Es 6 7つの比較的役に立つテクニック

はいれつデポジット

var arr = [1, 2, 3, 3, 4];
console.log(...new Set(arr))
>> [1, 2, 3, 4]

配列とブール
配列の値がfalseの値であることをフィルタする必要がある場合がある.例えば(0,undefined,null,false)では、このようなテクニックを知らないかもしれません.

var myArray = [1, 0 , undefined, null, false];
myArray.filter(Boolean);
> > [1]
//      ,         Boolean     .

空のオブジェクトを作成
プロトタイプチェーンなどを含まない純粋なオブジェクトを作成する必要がある場合があります.一般に、空のオブジェクトを作成する最も直接的な方法は、文字数{}であるが、このオブジェクトには依然としてproto属性がObjectを指す.prototypeなど

let dict = Object.create(null);
 
dict.__proto__ === "undefined" 

オブジェクトのマージ
JavaScriptで複数のオブジェクトをマージする必要があります.たとえば、パラメータを渡すときにフォームパラメータとページングパラメータをマージしてバックエンドに渡す必要があります.

const page = {
    current: 1,
    pageSize: 10
}
 
const form = {
    name: "",
    sex: ""
}
 
const params = {...form, ...page};
 
/*
    {
        name: "",
        sex: "",
        current: 1,
        pageSize: 10
    }
*

ES 6が提供する拡張演算子によりオブジェクトのマージが簡単になる.
関数パラメータは必須です
ES 6ではパラメータにデフォルト値を指定することができ、確かに多くの便利さをもたらす.特定のパラメータが必須であることを検出する必要がある場合は、このようにすることができます.

const isRequired = () => { throw new Error('param is required'); };
 
const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
 
//          ,       
hello();
//          
hello(undefined);
 
//   
hello(null);
hello('David'); 

割り当てを解除するときの別名の使用
解構賦値は非常に人気のあるJavaScript機能ですが、他の名前でこれらの属性を参照するのが好きな場合があります.そのため、別名を使用して完了できます.

const obj = { x: 1 };
 
// Grabs obj.x as { x }
const { x } = obj;
 
// Grabs obj.x as { otherName }
const { x: otherName } = obj;

クエリー・パラメータの取得
長年、クエリ文字列の値を取得するために粗い正規表現を作成してきましたが、その日はもう戻っていません.これで、URLSearchParams APIを使用してクエリー・パラメータを取得できます.
URLSearchParamsを使用せずに、次のように正規の方法でクエリー・パラメータの取得を完了します.

 function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    return r ? r[2] : null;
  }

URLSearchParamsを使用した後:

//               "?post=1234&action=edit"
 
var urlParams = new URLSearchParams(window.location.search);
 
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

以前より使いやすくなりました