一般的なフロントエンド機能の実装

0：アドレスバーパラメータを取得しますgetUrlParams

function getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg);  //匹配目标参数
      if (r != null) return unescape(r[2]); return null; //返回参数值
 }

1：指定された長さのトラバース可能な配列を作成します

var a = Array.apply( null, { length: 3 } );  //  [ undefined, undefined, undefined ]

var c = Array.from( { length: 4 } );  // 新增api

2：iframeのウィンドウでiframeの元のリンクを取得します（ミドルステーション管理システムのiframeレイアウト）

window.frameElement.getAttribute（ 'src'）

3：任意の値のタイプを決定します

// return 'array', 'object', 'function', 'null', 'undefined', 'string', 'number'
export const typeOf = input => {
  return ({}).toString.call(input).slice(8, -1).toLowerCase();
};

4：アレイフィルターの重み

//简单数组
var arr=[1,2,1,'1',null,null,undefined,undefined,NaN,NaN]
let res=Array.from(new Set(arr));//{1,2,"1",null,undefined,NaN}
//or
let newarr=[...new Set(arr)]

// 数组对象


let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},  
];
 
let obj = {};
 
let peon = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
console.log(peon);

5：関数の実パラメータを配列に変換する方法

方法一：var args = Array.prototype.slice.call(arguments);

方法二：var args = [].slice.call(arguments, 0);

6：数値が整数であることを確認します

x === Math.floor( x );

或者

Number.isInteger( 4 ); // 新增api

7：タイプを判断する

JavaScriptは強く型付けされた言語ではないので、私がお勧めする最善の解決策はTypeScriptです。ただし、単純な型チェックが必要な場合もあります。この場合、JavaScriptでは「typeof」キーワードを使用できます。

「typeof」の問題は、特定のプリミティブや関数で使用するとうまく機能することですが、配列とオブジェクトは両方とも「オブジェクト」と見なされるため、それらの違いを把握するのは困難です。

const isOfType = (() => {
  // create a plain object with no prototype
  const type = Object.create(null);

  // check for null type
  type.null = x => x === null;
  // check for undefined type
  type.undefined = x => x === undefined;
  // check for nil type. Either null or undefined
  type.nil = x => type.null(x) || type.undefined(x);
  // check for strings and string literal type. e.g: 's', "s", `str`, new String()
  type.string = x => !type.nil(x) && (typeof x === 'string' || x instanceof String);
  // check for number or number literal type. e.g: 12, 30.5, new Number()
  type.number = x => !type.nil(x) 
    && (// NaN & Infinity have typeof "number" and this excludes that
      (!isNaN(x) && isFinite(x)
      && typeof x === 'number'
    ) || x instanceof Number);
  // check for boolean or boolean literal type. e.g: true, false, new Boolean()
  type.boolean = x => !type.nil(x) && (typeof x === 'boolean' || x instanceof Boolean);
  // check for array type
  type.array = x => !type.nil(x) && Array.isArray(x);
  // check for object or object literal type. e.g: {}, new Object(), Object.create(null)
  type.object = x => ({}).toString.call(x) === '[object Object]';
  // check for provided type instance
  type.type = (x, X) => !type.nil(x) && x instanceof X;
  // check for set type
  type.set = x => type.type(x, Set);
  // check for map type
  type.map = x => type.type(x, Map);
  // check for date type
  type.date = x => type.type(x, Date);

  return type;
})();

8：null値を決定します

一部のコンテンツが空であるかどうかを知り、長さ、サイズ、またはサブ要素が含まれているかどうかの確認など、結果に基づいて使用する方法を決定する必要がある場合があります。次のツールにはこれらの関数が含まれています。これを使用して、文字列、オブジェクト、配列、マップ、およびセットのサイズを確認できます。

function isEmpty(x) {
  if(Array.isArray(x)
    || typeof x === 'string'
    || x instanceof String
   ) {
    return x.length === 0;
  }

  if(x instanceof Map || x instanceof Set) {
    return x.size === 0;
  }

  if(({}).toString.call(x) === '[object Object]') {
    return Object.keys(x).length === 0;
  }

  return false;
}

9：乱数ジェネレーター

function randomNumber(max = 1, min = 0) {
  if(min >= max) {
    return max;
  }

  return Math.floor(Math.random() * (max - min) + min);
}

10：ディープクローンオブジェクト

const deepClone = obj => {
  let clone = obj;
  if (obj && typeof obj === "object") {
    clone = new obj.constructor();

    Object.getOwnPropertyNames(obj).forEach(
      prop => (clone[prop] = deepClone(obj[prop]))
    );
  }
  return clone;
};

一般的なフロントエンド機能の実装

おすすめ