七個 JavaScript 實用小技巧

做者： @davidwalshblog

原文：7 Useful JavaScript Tricks

和許多其餘語言同樣，JavaScript 也須要靠不少小技巧去完成各類不一樣的事情。有的可能早已經廣爲人知，有的卻可能會讓你感到有些迷惑。接下來先介紹七個立刻就能用起來的 JavaScript 小技巧。

數組去重

完成數組去重可能比你想象中更容易：

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

這裏使用到了 Set 和擴展運算符。

數組和布爾

關於如何過濾掉數組中的假值，有這樣一個簡單的技巧：

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

只須要將 Boolean 傳給 filter 函數便可過濾掉數組中的全部假值。

建立一個空對象

你可能會直接使用對象字面量 {} 去建立一個空對象，可是這個空對象仍然包含 __proto__ 和 hasOwnProperty 以及其餘的對象方法。這裏提供一種方式，能夠建立真正的空對象：

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

這個對象不包含任何屬性或者方法。

對象合併

在 JavaScript 中合併對象的需求應該有不少，好比當建立一個有不少選項的類或組件的時候。

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

擴展運算符（...) 讓這項工做變得異常簡單。

函數必需參數

能夠給函數設置默認參數是一項很厲害的特性，能夠經過傳一個函數去檢查必需參數是否傳參：

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

解構賦值別名

解構是一項很是強大的特性，但有時咱們指望用其餘名稱來引用這些屬性，這時能夠利用使用別名的技巧：

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

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

須要避免跟已有變量產生命名衝突時很是有用。

獲取 query 參數

曾經咱們必需經過正則表達式的方式去獲取 query 參數的值，但如今已經不須要了，可使用 URLSearchParams Web API：

// Assuming "?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"

後

譯者說

彷佛許多人仍然頗爲沉迷於這種技巧性質的東西，如最前所言，大部分或許早已成爲一些常識性的東西，但對於某個特定的個體而言，可能仍是初次見面，多多指教的狀況。老實講，文章所說的小技巧大部分都是 ES6 新增的語法特性，ES6，或者說 ES2015 已經發布好些年頭，這些特性你們可能已經很是熟識。而如今 ES 的發佈方式，每一年小版本更新，已經漸漸淡化版本的概念，更關心的或許是宿主環境實現了什麼。

逐條細說，第一條，是流傳至關廣的一行代碼。2，Boolean 自己也是一個構造函數，不使用 new 的時候至關於進行一個 ToBoolean 轉換操做，但這條日常好像也沒有場景用到。3，使用對象字面量 {} 至關因而 Object.create(Object.prototype) ，若是不但願有太多對象方法，卻是能夠試試 Object.create(null)。4，對象合併，很少說，大部分場景能夠取代 Object.assign 。5，對函數參數默認值挺有意思的一種用法。6，解構賦值別名，沒什麼好說的。7，URLSearchParams 這是一個新的瀏覽器的 API ，不算 JavaScript 語言的，第一次見，支持度還比較弱。