快捷導(dǎo)航

ES5 ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法總結(jié)

更新時(shí)間：2017年04月27日 14:18:49 作者：Microzz

這篇文章主要給大家介紹了Array對(duì)象去除重復(fù)項(xiàng)的相關(guān)資料，文中通過(guò)示例代碼詳細(xì)介紹了在ES5和ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

輸入例子

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq()

輸出例子

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

分析

題目要求給 Array 添加方法，所以我們需要用到 prototype。數(shù)組去重本身算法不是很難，但是在 JavaScript 中很多人會(huì)忽視 NaN 的存在，因?yàn)樵?JS 中 NaN !== NaN 。但是在去重中我們又不能保留兩個(gè) NaN ，所以需要進(jìn)行一下判斷，這是很多人容易忽視的。

ES5的實(shí)現(xiàn)如下：

代碼

Array.prototype.uniq = function () {
 var arr = [];
 var flag = true;
 this.forEach(function(item) {
 // 排除 NaN (重要?。?！)
 if (item != item) {
 flag && arr.indexOf(item) === -1 ? arr.push(item) : '';
 flag = false;
 } else {
 arr.indexOf(item) === -1 ? arr.push(item) : ''
 }
 });
 return arr;
}

驗(yàn)證

我們只需要在數(shù)組上直接調(diào)用 uniq 方法就可以了，如：

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq()

結(jié)果為：

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

進(jìn)階

ES6的實(shí)現(xiàn)

ES6新增了 Set 對(duì)象，也就是我們所說(shuō)的“集合”，它類似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。所以可以方便去重。

Set本身是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Set數(shù)據(jù)結(jié)構(gòu)。(詳看👉Set和Map數(shù)據(jù)結(jié)構(gòu))

如果用ES6為 Array 對(duì)象添加一個(gè)去除重復(fù)項(xiàng)的方法，則可以如下實(shí)現(xiàn)：

Array.prototype.uniq = function() {
 return Array.from(new Set(this));
}

代碼中用 Array.from 把 Set 結(jié)構(gòu)轉(zhuǎn)換成數(shù)組，當(dāng)然，你也可以用其他方法，這里不深究。這里去重關(guān)鍵代碼只需要一行，是不是非常簡(jiǎn)單？😄

如果你要優(yōu)雅一點(diǎn)，可以使用 ES6 的擴(kuò)展運(yùn)算符。如下：

Array.prototype.uniq = function() {
 return [...new Set(this)];
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

微信小程序設(shè)置全局請(qǐng)求URL及封裝wx.request請(qǐng)求操作示例
這篇文章主要介紹了微信小程序設(shè)置全局請(qǐng)求URL及封裝wx.request請(qǐng)求操作,結(jié)合實(shí)例形式分析了微信小程序針對(duì)wx.requset請(qǐng)求的封裝及調(diào)用操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-04-04
20道JS原理題助你面試一臂之力(必看)
本文針對(duì)目前常見(jiàn)的面試題，僅提供了相應(yīng)的核心原理及思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-07-07
微信小程序之購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了微信小程序之購(gòu)物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
詳解微信小程序圖片地扯轉(zhuǎn)base64解決方案
這篇文章主要介紹了詳解微信小程序圖片地扯轉(zhuǎn)base64解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
封裝運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)
下面小編就為大家?guī)?lái)一篇封裝運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6
下面小編就為大家?guī)?lái)一篇js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6。具有很好的參考價(jià)值。一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助
2017-11-11
微信JS-SDK選取手機(jī)照片上傳功能
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
webpack4.x打包過(guò)程詳解
這篇文章主要介紹了webpack4.x打包過(guò)程詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
javascript htmlencode函數(shù)(ff兼容版) 主要是編輯器中反轉(zhuǎn)html代碼
非常不錯(cuò)的htmlencode 方法，比用正則實(shí)現(xiàn)的更好，而且效率高，推薦使用第一種方法。
2009-06-06
JavaScript對(duì)象屬性遍歷與描述詳解
在 JavaScript 中,對(duì)象是一種非常重要的數(shù)據(jù)類型,理解如何遍歷對(duì)象的屬性以及對(duì)象屬性的描述,對(duì)于高效使用 JavaScript 至關(guān)重要,本文將詳細(xì)介紹對(duì)象屬性的遍歷方法和屬性描述對(duì)象的相關(guān)內(nèi)容,需要的朋友可以參考下
2025-02-02