資訊專欄INFORMATION COLUMN
摘要：但是我其實(shí)一直以來不明白構(gòu)造函數(shù)的原型上，為什么沒有一個官方的方法，來產(chǎn)生一個不重復(fù)的數(shù)組或者完成數(shù)組去重的功能。我們使用展開符，結(jié)合構(gòu)造函數(shù)，便可以產(chǎn)生一個不含重復(fù)項的數(shù)組其實(shí)，對數(shù)組去重的不同方法會產(chǎn)生不同影響。
在JavaScript中，數(shù)組隨處可見。在最新版本的ECMAScript 6背景下，借助新的展開符、解構(gòu)等特性，我們可以對數(shù)組做很多“四兩撥千斤”的事情。
這片文章我會分享幾個超級有用的hack技巧。
遍歷空數(shù)組JavaScript數(shù)組其實(shí)是天生“稀疏”的。稀疏數(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]
當(dāng)然，我們有一個更好的方法，就是使用ES6的展開符特性：
const arr = [...new Array(4)]; arr.map((elem, index) => index); // [0, 1, 2, 3]給方法傳遞一個空參數(shù)
如果你想調(diào)用某個方法，但是忽略這個方法的某個參數(shù)，那么正常情況下，這樣做是會報錯的：
function method (a1, a2, a3) { console.log("ok"); }
method("parameter1", , "parameter3");
// Uncaught SyntaxError: Unexpected token ,
在實(shí)際開發(fā)中，這樣的場景其實(shí)屢見不鮮。通常的做法是，將這個函數(shù)參數(shù)傳遞為null或者undefined:
method("parameter1", null, "parameter3")
// or
method("parameter1", undefined, "parameter3");
我個人其實(shí)并不喜歡用null來代替，因為在JavaScript中，null會被當(dāng)作一個object來處理，這其實(shí)是很奇怪的。但是在ES6中，借助展開符和數(shù)組特性，我們能更好地實(shí)現(xiàn)上述做法。
上文提到JavaScript中數(shù)組其實(shí)是天生稀疏的，所以，給一個數(shù)組傳遞一個空值是沒有問題的。因此，我們這樣做：
method(...["parameter1", , "parameter3"]); // ok數(shù)組去重
數(shù)組去重，是一個老生常談的話題。實(shí)現(xiàn)方式真的已經(jīng)很多了。但是我其實(shí)一直以來不明白Array構(gòu)造函數(shù)的原型上，為什么沒有一個“官方”的方法，來產(chǎn)生一個不重復(fù)的數(shù)組或者完成數(shù)組去重的功能。ES6展開符的出現(xiàn)，成為了一種“官方”解決方案。
我們使用展開符，結(jié)合Set構(gòu)造函數(shù)，便可以產(chǎn)生一個不含重復(fù)項的數(shù)組：
const arr = [...new Set([1, 2, 3, 3])] // [1, 2, 3]
其實(shí)， NaN != NaN 對數(shù)組去重的不同方法會產(chǎn)生不同影響。
在上述方法當(dāng)中，我們會得到：
const arr = [...new Set([1, 2, 3, 3, NaN, NaN])] // [1, 2, 3, NaN]總結(jié)
今天介紹了幾個利用ES6新特性對數(shù)組實(shí)現(xiàn)的一些hack方法，簡單有效且優(yōu)雅得體。在ES6引領(lǐng)前端開發(fā)的今天，希望對大家能有所啟發(fā)。也歡迎留言，與我討論。
Happy Coding!
PS: 作者Github倉庫，歡迎通過代碼各種形式交流。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/82445.html
摘要：但是我其實(shí)一直以來不明白構(gòu)造函數(shù)的原型上，為什么沒有一個官方的方法，來產(chǎn)生一個不重復(fù)的數(shù)組或者完成數(shù)組去重的功能。我們使用展開符，結(jié)合構(gòu)造函數(shù)，便可以產(chǎn)生一個不含重復(fù)項的數(shù)組其實(shí)，對數(shù)組去重的不同方法會產(chǎn)生不同影響。 在JavaScript中，數(shù)組隨處可見。在最新版本的ECMAScript 6背景下，借助新的展開符、解構(gòu)等特性，我們可以對數(shù)組做很多四兩撥千斤的事情。 這片文章我會分享幾...
摘要：你可能認(rèn)為和它的新模塊系統(tǒng)出現(xiàn)得有點(diǎn)晚。聚合模塊有時候一個包的主模塊只不過是導(dǎo)入包其他所有的模塊，并用統(tǒng)一的方式導(dǎo)出。靜態(tài)動態(tài)，或者說規(guī)則如何打破規(guī)則作為一個動態(tài)編譯語言，令人驚奇的是擁有一個靜態(tài)的模塊系統(tǒng)。 回想2007年，那時候我剛加入Mozillas JavaScript團(tuán)隊，那時候的一個典型的JavaScript程序只需要一行代碼，聽起來像個笑話。 兩年后，Google Map...
摘要：為指定事件注冊一個單次監(jiān)聽器，即監(jiān)聽器最多只會觸發(fā)一次，觸發(fā)后立刻解除該監(jiān)聽器。移除指定事件的某個監(jiān)聽器，監(jiān)聽器必須是該事件已經(jīng)注冊過的監(jiān)聽器。返回指定事件的監(jiān)聽器數(shù)組。如何創(chuàng)建空對象我們已經(jīng)了解到，是要來儲存監(jiān)聽事件監(jiān)聽器數(shù)組的。 毫無疑問，nodeJS改變了整個前端開發(fā)生態(tài)。本文通過分析nodeJS當(dāng)中events模塊源碼，由淺入深，動手實(shí)現(xiàn)了屬于自己的ES6事件觀察者系統(tǒng)。千萬不...
摘要：函數(shù)是這樣子聲明的使用了系統(tǒng)自己的構(gòu)造函數(shù)來聲明，第一個參數(shù)是，函數(shù)體內(nèi)又。構(gòu)造函數(shù)調(diào)用情況正常方式調(diào)用無窮無盡當(dāng)然，里還歸納了幾項比較簡單，我就不再翻譯了。 上一篇從一道面試題，到我可能看了假源碼中，由淺入深介紹了關(guān)于一篇經(jīng)典面試題的解法。最后在皆大歡喜的結(jié)尾中，突生變化，懸念又起。這一篇，就是為了解開這個懸念。 如果你還沒有看過前傳，可以參看前情回顧： 回顧1. 題目是模擬實(shí)現(xiàn)ES...
摘要：前個來源于年的博客，后個來源于年底的博客。的計時設(shè)置斷點(diǎn)老式手段全局變量利用全局變量可以在控制臺中查詢變量信息，但要記得在正式上線發(fā)布時刪除這些全局變量。 前言 好久沒寫博客啦~這次寫一篇輕松的內(nèi)容，JS里的16個有趣的技巧，簡單總結(jié)自Tal Bereznitskey 的兩篇博客，代碼摘自原文。 Javascript Hacks for Hipsters (2013) 7 Hacks...
閱讀 3952·2021-07-28 18:10
閱讀 2644·2019-08-30 15:44
閱讀 1163·2019-08-30 14:07
閱讀 3516·2019-08-29 17:20
閱讀 1643·2019-08-26 18:35
閱讀 3597·2019-08-26 13:42
閱讀 1875·2019-08-26 11:58
閱讀 1664·2019-08-23 18:33
