ES5 ES6中Array對象去除重復(fù)項的方法總結(jié)
輸入例子
[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq()
輸出例子
[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']
分析
題目要求給 Array 添加方法，所以我們需要用到 prototype。數(shù)組去重本身算法不是很難，但是在 JavaScript 中很多人會忽視 NaN 的存在，因?yàn)樵?JS 中 NaN !== NaN 。但是在去重中我們又不能保留兩個 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 對象，也就是我們所說的“集合”，它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。所以可以方便去重。
Set本身是一個構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu)。(詳看👉Set和Map數(shù)據(jù)結(jié)構(gòu))
如果用ES6為 Array 對象添加一個去除重復(fù)項的方法，則可以如下實(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)鍵代碼只需要一行，是不是非常簡單？😄
如果你要優(yōu)雅一點(diǎn)，可以使用 ES6 的擴(kuò)展運(yùn)算符。如下：
Array.prototype.uniq = function() {
return [...new Set(this)];
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
- 詳解JavaScript ES6中的模板字符串
- 淺談ES6 模板字符串的具體使用方法
- ES6新特征數(shù)字、數(shù)組、字符串
- ES6新特性之變量和字符串用法示例
- JavaScript中ES6字符串?dāng)U展方法
- JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
- ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能示例
- ES6新特性七：數(shù)組的擴(kuò)充詳解
- 淺談ES6新增的數(shù)組方法和對象
- ES6中箭頭函數(shù)的定義與調(diào)用方式詳解
- ES6學(xué)習(xí)筆記之字符串、數(shù)組、對象、函數(shù)新增知識點(diǎn)實(shí)例分析
相關(guān)文章
微信小程序設(shè)置全局請求URL及封裝wx.request請求操作示例
這篇文章主要介紹了微信小程序設(shè)置全局請求URL及封裝wx.request請求操作,結(jié)合實(shí)例形式分析了微信小程序針對wx.requset請求的封裝及調(diào)用操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-04-04
本文針對目前常見的面試題，僅提供了相應(yīng)的核心原理及思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序之購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了詳解微信小程序圖片地扯轉(zhuǎn)base64解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
封裝運(yùn)動框架實(shí)戰(zhàn)左右與上下滑動的焦點(diǎn)輪播圖(實(shí)例)
下面小編就為大家?guī)硪黄庋b運(yùn)動框架實(shí)戰(zhàn)左右與上下滑動的焦點(diǎn)輪播圖(實(shí)例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6
下面小編就為大家?guī)硪黄猨s導(dǎo)出Excel表格超出26位英文字符的解決方法ES6。具有很好的參考價值。一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了webpack4.x打包過程詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
javascript htmlencode函數(shù)(ff兼容版) 主要是編輯器中反轉(zhuǎn)html代碼
非常不錯的htmlencode 方法，比用正則實(shí)現(xiàn)的更好，而且效率高，推薦使用第一種方法。2009-06-06
在 JavaScript 中,對象是一種非常重要的數(shù)據(jù)類型,理解如何遍歷對象的屬性以及對象屬性的描述,對于高效使用 JavaScript 至關(guān)重要,本文將詳細(xì)介紹對象屬性的遍歷方法和屬性描述對象的相關(guān)內(nèi)容,需要的朋友可以參考下2025-02-02