陣列去重

    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         }    *

利用ES6提供的擴充套件運算子讓物件合併變得很簡單.

函式引數必須

ES6中可以給引數指定預設值,確實帶來很多便利. 如果需要檢測某些引數是必傳時,可以這麼做

    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"

相比之前使用起來更加容易了.

轉自：