三個嘆為觀止的ES6 Array hack

warmcheng 發布于2019-08-01 16:39 / 2536人閱讀

摘要：但是我其實一直以來不明白構造函數的原型上，為什么沒有一個官方的方法，來產生一個不重復的數組或者完成數組去重的功能。我們使用展開符，結合構造函數，便可以產生一個不含重復項的數組其實，對數組去重的不同方法會產生不同影響。

在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倉庫，歡迎通過代碼各種形式交流。

GPU云服務器云服務器 java的三個平臺 php 中的三個等號云服務器的三個特征 html三個點的效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50662.html

三個嘆為觀止的ES6 Array hack

摘要：但是我其實一直以來不明白構造函數的原型上，為什么沒有一個官方的方法，來產生一個不重復的數組或者完成數組去重的功能。我們使用展開符，結合構造函數，便可以產生一個不含重復項的數組其實，對數組去重的不同方法會產生不同影響。在JavaScript中，數組隨處可見。在最新版本的ECMAScript 6背景下，借助新的展開符、解構等特性，我們可以對數組做很多四兩撥千斤的事情。這片文章我會分享幾...

hsluoyz 2019-08-20 15:43 評論0 收藏0
【翻譯】深入理解ES6的模塊

摘要：你可能認為和它的新模塊系統出現得有點晚。聚合模塊有時候一個包的主模塊只不過是導入包其他所有的模塊，并用統一的方式導出。靜態動態，或者說規則如何打破規則作為一個動態編譯語言，令人驚奇的是擁有一個靜態的模塊系統。回想2007年，那時候我剛加入Mozillas JavaScript團隊，那時候的一個典型的JavaScript程序只需要一行代碼，聽起來像個笑話。兩年后，Google Map...

icattlecoder 2019-08-21 17:36 評論0 收藏0
解析nodeJS模塊源碼親手打造基于ES6的觀察者系統

摘要：為指定事件注冊一個單次監聽器，即監聽器最多只會觸發一次，觸發后立刻解除該監聽器。移除指定事件的某個監聽器，監聽器必須是該事件已經注冊過的監聽器。返回指定事件的監聽器數組。如何創建空對象我們已經了解到，是要來儲存監聽事件監聽器數組的。毫無疑問，nodeJS改變了整個前端開發生態。本文通過分析nodeJS當中events模塊源碼，由淺入深，動手實現了屬于自己的ES6事件觀察者系統。千萬不...

csRyan 2019-08-20 15:19 評論0 收藏0
從一道面試題，到“我可能看了假源碼［2］

摘要：函數是這樣子聲明的使用了系統自己的構造函數來聲明，第一個參數是，函數體內又。構造函數調用情況正常方式調用無窮無盡當然，里還歸納了幾項比較簡單，我就不再翻譯了。上一篇從一道面試題，到我可能看了假源碼中，由淺入深介紹了關于一篇經典面試題的解法。最后在皆大歡喜的結尾中，突生變化，懸念又起。這一篇，就是為了解開這個懸念。如果你還沒有看過前傳，可以參看前情回顧：回顧1. 題目是模擬實現ES...

chanthuang 2019-08-20 14:26 評論0 收藏0
JS奇謀詭計——16 Hacks

摘要：前個來源于年的博客，后個來源于年底的博客。的計時設置斷點老式手段全局變量利用全局變量可以在控制臺中查詢變量信息，但要記得在正式上線發布時刪除這些全局變量。前言好久沒寫博客啦~這次寫一篇輕松的內容，JS里的16個有趣的技巧，簡單總結自Tal Bereznitskey 的兩篇博客，代碼摘自原文。 Javascript Hacks for Hipsters (2013) 7 Hacks...

impig33 2019-08-22 17:18 評論0 收藏0