三個嘆為觀止的 ES6 Array hack[譯]

cavq4009 7年前發布 | 16K 次閱讀 JavaScript開發 ECMAScript

在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引領前端開發的今天,希望對大家能有所啟發。也歡迎留言,與我討論。

 

 

來自:https://juejin.im/post/58ee092eac502e006bb94d2c

 

 本文由用戶 cavq4009 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!