[譯] 三個歎爲觀止的ES6 Array hack

在JavaScript中，數組隨處可見。在最新版本的ECMAScript 6背景下，藉助新的展開符、解構等特性，咱們能夠對數組作不少「四兩撥千斤」的事情。

這片文章我會分享幾個超級有用的hack技巧。

遍歷空數組

JavaScript數組實際上是天生「稀疏」的。稀疏數組實際上是一個很重要的概念：

A sparse array is one in which the elements do not have contiguous indexes starting at 0.

從定義來看，稀疏數組就是沒有從0開始的連續的index。

那麼什麼樣會有稀疏數組？緣由無外乎：

• 有沒有被賦值的項；
• 有被刪除（delete）的項

咱們從下面這個例子來看：

const arr = new Array(4);複製代碼

新建了一個長度爲4的數組。你會發現，遍歷這個數組咱們只會獲得：

arr.map((elem, index) => index);
// [undefined, undefined, undefined, undefined]複製代碼

爲了解決這個問題，好比，我想獲得一個每一項值爲其index的數組，長度爲4，能夠這樣作：

const arr = Array.apply(null, new Array(4));
arr.map((elem, index) => index);
// [0, 1, 2, 3]複製代碼

固然，咱們有一個更好的方法，就是使用ES6的展開符特性：

const arr = [...new Array(4)];
arr.map((elem, index) => index);
// [0, 1, 2, 3]複製代碼

給方法傳遞一個空參數

若是你想調用某個方法，可是忽略這個方法的某個參數，那麼正常狀況下，這樣作是會報錯的：

function method (a1, a2, a3) { console.log('ok'); }
method('parameter1', , 'parameter3');
// Uncaught SyntaxError: Unexpected token ,複製代碼

在實際開發中，這樣的場景其實家常便飯。一般的作法是，將這個函數參數傳遞爲null或者undefined:

method('parameter1', null, 'parameter3') 
// or
method('parameter1', undefined, 'parameter3');複製代碼

我我的其實並不喜歡用null來代替，由於在JavaScript中，null會被看成一個object來處理，這實際上是很奇怪的。可是在ES6中，藉助展開符和數組特性，咱們能更好地實現上述作法。

上文提到JavaScript中數組實際上是天生稀疏的，因此，給一個數組傳遞一個空值是沒有問題的。所以，咱們這樣作：

method(...['parameter1', , 'parameter3']);
// ok複製代碼

數組去重

數組去重，是一個老生常談的話題。實現方式真的已經不少了。可是我其實一直以來不明白Array構造函數的原型上，爲何沒有一個「官方」的方法，來產生一個不重複的數組或者完成數組去重的功能。ES6展開符的出現，成爲了一種「官方」解決方案。

咱們使用展開符，結合Set構造函數，即可以產生一個不含重複項的數組：

const arr = [...new Set([1, 2, 3, 3])]
// [1, 2, 3]複製代碼

其實， NaN != NaN 對數組去重的不一樣方法會產生不一樣影響。
在上述方法當中，咱們會獲得：

const arr = [...new Set([1, 2, 3, 3, NaN, NaN])]
// [1, 2, 3, NaN] 複製代碼

總結

今天介紹了幾個利用ES6新特性對數組實現的一些hack方法，簡單有效且優雅得體。在ES6引領前端開發的今天，但願對你們能有所啓發。也歡迎留言，與我討論。

Happy Coding!

PS: 做者Github倉庫，歡迎經過代碼各類形式交流。