三個嘆為觀止的ES6 Array hack

warmcheng 發(fā)布于2019-08-01 16:39 / 2542人閱讀

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

在JavaScript中，數(shù)組隨處可見。在最新版本的ECMAScript 6背景下，借助新的展開符、解構等特性，我們可以對數(shù)組做很多“四兩撥千斤”的事情。

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

遍歷空數(shù)組

JavaScript數(shù)組其實是天生“稀疏”的。稀疏數(shù)組其實是一個很重要的概念：

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

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

那么什么樣會有稀疏數(shù)組？原因無外乎：

有沒有被賦值的項；

有被刪除（delete）的項

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

const arr = new Array(4);

新建了一個長度為4的數(shù)組。你會發(fā)現(xiàn)，遍歷這個數(shù)組我們只會得到：

arr.map((elem, index) => index);
// [undefined, undefined, undefined, undefined]

為了解決這個問題，比如，我想得到一個每一項值為其index的數(shù)組，長度為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]

給方法傳遞一個空參數(shù)

如果你想調用某個方法，但是忽略這個方法的某個參數(shù)，那么正常情況下，這樣做是會報錯的：

function method (a1, a2, a3) { console.log("ok"); }
method("parameter1", , "parameter3");
// Uncaught SyntaxError: Unexpected token ,

在實際開發(fā)中，這樣的場景其實屢見不鮮。通常的做法是，將這個函數(shù)參數(shù)傳遞為null或者undefined:

method("parameter1", null, "parameter3") 
// or
method("parameter1", undefined, "parameter3");

我個人其實并不喜歡用null來代替，因為在JavaScript中，null會被當作一個object來處理，這其實是很奇怪的。但是在ES6中，借助展開符和數(shù)組特性，我們能更好地實現(xiàn)上述做法。

上文提到JavaScript中數(shù)組其實是天生稀疏的，所以，給一個數(shù)組傳遞一個空值是沒有問題的。因此，我們這樣做：

method(...["parameter1", , "parameter3"]);
// ok

數(shù)組去重

數(shù)組去重，是一個老生常談的話題。實現(xiàn)方式真的已經很多了。但是我其實一直以來不明白Array構造函數(shù)的原型上，為什么沒有一個“官方”的方法，來產生一個不重復的數(shù)組或者完成數(shù)組去重的功能。ES6展開符的出現(xiàn)，成為了一種“官方”解決方案。

我們使用展開符，結合Set構造函數(shù)，便可以產生一個不含重復項的數(shù)組：

const arr = [...new Set([1, 2, 3, 3])]
// [1, 2, 3]

其實， NaN != NaN 對數(shù)組去重的不同方法會產生不同影響。
在上述方法當中，我們會得到：

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

總結

今天介紹了幾個利用ES6新特性對數(shù)組實現(xiàn)的一些hack方法，簡單有效且優(yōu)雅得體。在ES6引領前端開發(fā)的今天，希望對大家能有所啟發(fā)。也歡迎留言，與我討論。

Happy Coding!

PS: 作者Github倉庫，歡迎通過代碼各種形式交流。

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

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

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

三個嘆為觀止的ES6 Array hack

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

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

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

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

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

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

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

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

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

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