資訊專欄INFORMATION COLUMN
摘要：數(shù)組的方法方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素?？蛇x，執(zhí)行函數(shù)時(shí)的值。刪除所有的鍵值對(duì)，沒(méi)有返回值。返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前對(duì)象之中。
說(shuō)明
JavaScript數(shù)組去重這個(gè)問(wèn)題，經(jīng)常出現(xiàn)在面試題中，以前也寫(xiě)過(guò)一篇數(shù)組去重的文章，（JavaScript 數(shù)組去重的多種方法原理詳解）但感覺(jué)代碼還是有點(diǎn)不夠簡(jiǎn)單，今天和大家再說(shuō)兩種方法，代碼可是足夠的少了。
解釋 方法一：function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
就這么短，就可以了，我們來(lái)解釋一下為什么。
Map對(duì)象
Map是ES6 提供的新的數(shù)據(jù)結(jié)構(gòu)。
Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。
下表列出了 Map 對(duì)象的方法。
| 方法 | 描述 |
|---|---|
| clear | 刪除所有的鍵/值對(duì)，沒(méi)有返回值。 |
| delete | 刪除某個(gè)鍵，返回true。如果刪除失敗，返回false。 |
| forEach | 對(duì)每個(gè)元素執(zhí)行指定操作。 |
| get | 返回Map對(duì)象key相對(duì)應(yīng)的value值。 |
| has | 返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前 Map 對(duì)象之中。 |
| set | 給Map對(duì)象設(shè)置key/value 鍵/值對(duì)。 |
Map對(duì)象還有一個(gè)size屬性，他返回Map對(duì)象的鍵/值對(duì)的數(shù)量。
數(shù)組的 filter() 方法
filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素 是 通過(guò)檢查 指定數(shù)組 中 符合條件的所有元素。
語(yǔ)法：
array.filter(function(currentValue,index,arr), thisValue)
參數(shù)說(shuō)明：
箭頭函數(shù)
return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的代碼可以改成這樣
return arr.filter(function(a){
return !res.has(a) && res.set(a, 1);
});
1、箭頭函數(shù)寫(xiě)代碼擁有更加簡(jiǎn)潔的語(yǔ)法；
2、不會(huì)綁定this。
了解更多，點(diǎn)這里
方法一 分析
function unique(arr) {
//定義常量 res,值為一個(gè)Map對(duì)象實(shí)例
const res = new Map();
//返回arr數(shù)組過(guò)濾后的結(jié)果，結(jié)果為一個(gè)數(shù)組
//過(guò)濾條件是，如果res中沒(méi)有某個(gè)鍵，就設(shè)置這個(gè)鍵的值為1
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
方法二：
function unique(arr) {
return Array.from(new Set(arr))
}
這個(gè)方法的代碼量更少，簡(jiǎn)直不可思議。
數(shù)組的 from方法
Array.from() 方法從一個(gè)類似數(shù)組或可迭代的對(duì)象(包括 Array，Map，Set，String，TypedArray，arguments 對(duì)象等等) 中創(chuàng)建一個(gè)新的數(shù)組實(shí)例
語(yǔ)法：
Array.from(arrayLike[, mapFn[, thisArg]])
| 參數(shù) | 描述 |
|---|---|
| arrayLike | 必需，想要轉(zhuǎn)換成真實(shí)數(shù)組的類數(shù)組對(duì)象或可迭代的對(duì)象。 |
| mapFn | 可選，如果指定了該參數(shù)，則最后生成的數(shù)組會(huì)經(jīng)過(guò)該函數(shù)的加工處理后再返回。 |
| thisArg | 可選，執(zhí)行 mapFn 函數(shù)時(shí) this 的值。 |
示例代碼：
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from("foo");
// ["f", "o", "o"]
Set對(duì)象
Set 對(duì)象允許你存儲(chǔ)任何類型的 唯一值 ，無(wú)論是原始值或者是對(duì)象引用。
Set對(duì)象是值的集合，你可以按照插入的順序迭代它的元素。
Set中的元素只會(huì)出現(xiàn)一次，即 Set 中的元素是唯一的。
語(yǔ)法：
new Set([iterable]);
參數(shù)：
iterable，如果傳遞一個(gè)可迭代對(duì)象(包括 Array，Map，Set，String，TypedArray，arguments 對(duì)象等等)，它的所有元素將被添加到新的 Set中。如果不指定此參數(shù)或其值為null，則新的 Set為空。
下表列出了 Set 對(duì)象的方法。
| 方法 | 描述 |
|---|---|
| add | 添加某個(gè)值，返回Set對(duì)象本身。 |
| clear | 刪除所有的鍵/值對(duì)，沒(méi)有返回值。 |
| delete | 刪除某個(gè)鍵，返回true。如果刪除失敗，返回false。 |
| forEach | 對(duì)每個(gè)元素執(zhí)行指定操作。 |
| has | 返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前 Set 對(duì)象之中。 |
Set對(duì)象和Map對(duì)象一樣，都有一個(gè)size屬性，他返回Set對(duì)象的值的個(gè)數(shù)。
方法二 分析
function unique(arr) {
//通過(guò)Set對(duì)象，對(duì)數(shù)組去重，結(jié)果又返回一個(gè)Set對(duì)象
//通過(guò)from方法，將Set對(duì)象轉(zhuǎn)為數(shù)組
return Array.from(new Set(arr))
}
總結(jié)
這次說(shuō)的兩個(gè)方法，真的很簡(jiǎn)單，主要就是靠ES6里的新東西，難度不大，代碼簡(jiǎn)單，主要就是多用用就好了。
經(jīng)人提醒，再補(bǔ)充一種，[...new Set(arr)]
不懂 ... 的朋友，可以看這里 js擴(kuò)展運(yùn)算符
參考ES6新特性：Javascript中的Map和WeakMap對(duì)象
http://www.cnblogs.com/dilige...
Set和Map數(shù)據(jù)結(jié)構(gòu)
http://es6.ruanyifeng.com/#do...
MDN
https://developer.mozilla.org...
Array filter()
http://www.runoob.com/jsref/j...
Array.from()
https://developer.mozilla.org...
JavaScript初學(xué)者必看“箭頭函數(shù)”
http://www.cnblogs.com/fundeb...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89517.html
摘要：數(shù)組的方法方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素?？蛇x，執(zhí)行函數(shù)時(shí)的值。刪除所有的鍵值對(duì)，沒(méi)有返回值。返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前對(duì)象之中。 說(shuō)明 JavaScript數(shù)組去重這個(gè)問(wèn)題，經(jīng)常出現(xiàn)在面試題中，以前也寫(xiě)過(guò)一篇數(shù)組去重的文章，（JavaScript 數(shù)組去重的多種方法原理詳解）但感覺(jué)代碼還是有點(diǎn)不夠簡(jiǎn)單，今天和大家再說(shuō)兩種方法，代碼...
摘要：數(shù)組的方法方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素?？蛇x，執(zhí)行函數(shù)時(shí)的值。刪除所有的鍵值對(duì)，沒(méi)有返回值。返回一個(gè)布爾值，表示某個(gè)鍵是否在當(dāng)前對(duì)象之中。 說(shuō)明 JavaScript數(shù)組去重這個(gè)問(wèn)題，經(jīng)常出現(xiàn)在面試題中，以前也寫(xiě)過(guò)一篇數(shù)組去重的文章，（JavaScript 數(shù)組去重的多種方法原理詳解）但感覺(jué)代碼還是有點(diǎn)不夠簡(jiǎn)單，今天和大家再說(shuō)兩種方法，代碼...
摘要：和定義一組鍵值對(duì)的集合它是一組鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，由于之前的鍵必須是字符串。 Map和Set Map 定義：一組鍵值對(duì)的集合 它是一組鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，由于之前javascript的鍵（key）必須是字符串。為了使鍵可以是多種類型的于是在最新的es6中引入了map這種數(shù)據(jù)結(jié)構(gòu)，這樣可以加快查詢速度，類似于查字典 方法和屬性 var m = map() //空map m.set(學(xué)生年齡,...
摘要：數(shù)組元素甚至可以是對(duì)象或其它數(shù)組。它執(zhí)行的是淺拷貝，這意味著如果數(shù)組元素是對(duì)象，兩個(gè)數(shù)組都指向相同的對(duì)象，對(duì)新數(shù)組中的對(duì)象修改，會(huì)在舊的數(shù)組的相同對(duì)象中反應(yīng)出來(lái)。 JS中的數(shù)組是弱類型的，數(shù)組中可以含有不同類型的元素。數(shù)組元素甚至可以是對(duì)象或其它數(shù)組。JS引擎一般會(huì)優(yōu)化數(shù)組，按索引訪問(wèn)數(shù)組常常比訪問(wèn)一般對(duì)象屬性明顯迅速。數(shù)組長(zhǎng)度范圍 from 0 to 4,294,967,295(2^...
閱讀 3087·2019-08-30 15:56
閱讀 1242·2019-08-29 15:20
閱讀 1580·2019-08-29 13:19
閱讀 1489·2019-08-29 13:10
閱讀 3392·2019-08-26 18:27
閱讀 3077·2019-08-26 11:46
閱讀 2241·2019-08-26 11:45
閱讀 3769·2019-08-26 10:12
