成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

三個(gè)嘆為觀止的ES6 Array hack

hsluoyz / 2422人閱讀

摘要：但是我其實(shí)一直以來(lái)不明白構(gòu)造函數(shù)的原型上，為什么沒(méi)有一個(gè)官方的方法，來(lái)產(chǎn)生一個(gè)不重復(fù)的數(shù)組或者完成數(shù)組去重的功能。我們使用展開(kāi)符，結(jié)合構(gòu)造函數(shù)，便可以產(chǎn)生一個(gè)不含重復(fù)項(xiàng)的數(shù)組其實(shí)，對(duì)數(shù)組去重的不同方法會(huì)產(chǎn)生不同影響。

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

這片文章我會(huì)分享幾個(gè)超級(jí)有用的hack技巧。

遍歷空數(shù)組

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

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

從定義來(lái)看，稀疏數(shù)組就是沒(méi)有從0開(kāi)始的連續(xù)的index。

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

有沒(méi)有被賦值的項(xiàng)；

有被刪除（delete）的項(xiàng)

我們從下面這個(gè)例子來(lái)看：

const arr = new Array(4);

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

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

為了解決這個(gè)問(wèn)題，比如，我想得到一個(gè)每一項(xiàng)值為其index的數(shù)組，長(zhǎng)度為4，可以這樣做：

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

當(dāng)然，我們有一個(gè)更好的方法，就是使用ES6的展開(kāi)符特性：

const arr = [...new Array(4)];
arr.map((elem, index) => index);
// [0, 1, 2, 3]
給方法傳遞一個(gè)空參數(shù)

如果你想調(diào)用某個(gè)方法，但是忽略這個(gè)方法的某個(gè)參數(shù)，那么正常情況下，這樣做是會(huì)報(bào)錯(cuò)的：

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

在實(shí)際開(kāi)發(fā)中，這樣的場(chǎng)景其實(shí)屢見(jiàn)不鮮。通常的做法是，將這個(gè)函數(shù)參數(shù)傳遞為null或者undefined:

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

我個(gè)人其實(shí)并不喜歡用null來(lái)代替，因?yàn)樵贘avaScript中，null會(huì)被當(dāng)作一個(gè)object來(lái)處理，這其實(shí)是很奇怪的。但是在ES6中，借助展開(kāi)符和數(shù)組特性，我們能更好地實(shí)現(xiàn)上述做法。

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

method(...["parameter1", , "parameter3"]);
// ok
數(shù)組去重

數(shù)組去重，是一個(gè)老生常談的話(huà)題。實(shí)現(xiàn)方式真的已經(jīng)很多了。但是我其實(shí)一直以來(lái)不明白Array構(gòu)造函數(shù)的原型上，為什么沒(méi)有一個(gè)“官方”的方法，來(lái)產(chǎn)生一個(gè)不重復(fù)的數(shù)組或者完成數(shù)組去重的功能。ES6展開(kāi)符的出現(xiàn)，成為了一種“官方”解決方案。

我們使用展開(kāi)符，結(jié)合Set構(gòu)造函數(shù)，便可以產(chǎn)生一個(gè)不含重復(fù)項(xiàng)的數(shù)組：

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

其實(shí)， NaN != NaN 對(duì)數(shù)組去重的不同方法會(huì)產(chǎn)生不同影響。
在上述方法當(dāng)中，我們會(huì)得到：

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

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

Happy Coding!

PS: 作者Github倉(cāng)庫(kù)，歡迎通過(guò)代碼各種形式交流。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82445.html

相關(guān)文章

  • 三個(gè)嘆為觀止的ES6 Array hack

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

    warmcheng 評(píng)論0 收藏0

  • 【翻譯】深入理解ES6的模塊

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

    icattlecoder 評(píng)論0 收藏0

  • 解析nodeJS模塊源碼 親手打造基于ES6的觀察者系統(tǒng)

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

    csRyan 評(píng)論0 收藏0

  • 從一道面試題，到“我可能看了假源碼［2］

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

    chanthuang 評(píng)論0 收藏0

  • JS奇謀詭計(jì)——16 Hacks

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

    impig33 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<