溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ES6新特性五：Set與Map的數(shù)據(jù)結(jié)構(gòu)實(shí)例分析

發(fā)布時(shí)間：2020-10-05 12:18:06 來源：腳本之家 閱讀：158 作者：Dason_yu 欄目：web開發(fā)

本文實(shí)例講述了ES6新特性五之Set與Map的數(shù)據(jù)結(jié)構(gòu)。分享給大家供大家參考，具體如下：

1. Set

① 定義：它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。Set本身是一個(gè)構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu)。

var s = new Set();
[2,3,5,4,5,2,2].map(x => s.add(x))
console.log(s); //Set { 2, 3, 5, 4 }

② 屬性和方法

Set結(jié)構(gòu)有以下屬性。

Set.prototype.constructor：構(gòu)造函數(shù)，默認(rèn)就是Set函數(shù)。
Set.prototype.size：返回Set的成員總數(shù)。

Set數(shù)據(jù)結(jié)構(gòu)有以下方法。

add(value)：添加某個(gè)值，返回Set結(jié)構(gòu)本身。
delete(value)：刪除某個(gè)值，返回一個(gè)布爾值，表示刪除是否成功。
has(value)：返回一個(gè)布爾值，表示該值是否為Set的成員。
clear()：清除所有成員，沒有返回值。

var s = new Set();
s.add(1).add(2).add(2);
// 注意2被加入了兩次
console.log(s.size) // 2
console.log(s.has(1)) // true
console.log(s.has(2)) // true
console.log(s.has(3)) // false
console.log(s.delete(2));
console.log(s.has(2)) // false

③ Array.from方法可以將Set結(jié)構(gòu)轉(zhuǎn)為數(shù)組

var items = new Set([1, 2, 3, 4, 5]);
var arr = Array.from(items);
//運(yùn)用: 去除數(shù)組中重復(fù)元素的方法
var array = [1,2,3,2,3,4];
function fun(array) {
  return Array.from(new Set(array));
}
console.log(fun(array));//[ 1, 2, 3, 4 ]

④ Set結(jié)構(gòu)有一個(gè)values方法，返回一個(gè)遍歷器。

var s = new Set([1, 2, 3, 4, 5]);
console.log(s.values());//SetIterator { 1, 2, 3, 4, 5 }
//Set結(jié)構(gòu)的默認(rèn)遍歷器就是它的values方法
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values)//true
//所以遍歷可以直接使用 for...of
for (let x of s) {
  console.log(x);
}
//由于擴(kuò)展運(yùn)算符（...）內(nèi)部使用for...of循環(huán)，將Set轉(zhuǎn)化為數(shù)組。
var arr = [...s];
console.log(arr);//[ 1, 2, 3, 4, 5 ]

⑤ Set結(jié)構(gòu)的foreach方法

var set = new Set([1, 2, 3]);
set.forEach(function(value,key){
  console.log(value);
});

⑥ Set結(jié)構(gòu)也有keys和entries方法，這時(shí)每個(gè)值的鍵名就是鍵值。

let set = new Set(['red', 'green', 'blue']);
for ( let item of set.keys() ){
  console.log(item);
}
// red
// green
// blue
for ( let [key, value] of set.entries() ){
  console.log(key, value);
}
// red, red
// green, green
// blue, blue

⑦ 數(shù)組的map和filter方法的運(yùn)用

map(x){}: 遍歷數(shù)組，對每一元素進(jìn)行處理，返回處理后的數(shù)組。
filter(x){}: 遍歷數(shù)組，對每一個(gè)元素進(jìn)行校驗(yàn)，返回含有通過校驗(yàn)元素的數(shù)組。

var set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
console.log(set);//返回Set結(jié)構(gòu)：{2, 4, 6}
var set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
console.log(set);// 返回Set結(jié)構(gòu)：{2, 4}

2. Map

① 原因：JavaScript的對象，本質(zhì)上是鍵值對的集合，但是只能用字符串當(dāng)作鍵。

② 定義：它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。

③ 屬性和方法

size：返回成員總數(shù)。
set(key, value)：設(shè)置key所對應(yīng)的鍵值，然后返回整個(gè)Map結(jié)構(gòu)。如果key已經(jīng)有值，則鍵值會(huì)被更新，否則就新生成該鍵。
get(key)：讀取key對應(yīng)的鍵值，如果找不到key，返回undefined。
has(key)：返回一個(gè)布爾值，表示某個(gè)鍵是否在Map數(shù)據(jù)結(jié)構(gòu)中。
delete(key)：刪除某個(gè)鍵，返回true。如果刪除失敗，返回false。
clear()：清除所有成員，沒有返回值。

④ 與set 相同 可以接受數(shù)組參數(shù)創(chuàng)建map，但數(shù)組的元素是一個(gè)個(gè)代表鍵值對的數(shù)組構(gòu)成。

var map = new Map();
var map1 = new Map([["name", "張三"], ["title", "Author"]]);
console.log(map1.size)//2

⑤ 只有對同一個(gè)對象的引用，Map結(jié)構(gòu)才將其視為同一個(gè)鍵，只要內(nèi)存地址不一樣，就視為兩個(gè)鍵。

var map = new Map();
map.set(['a'], 555);
console.log(map.get(['a'])) // undefined
var k1 = ['a'];
//雖然值相同，但這是一個(gè)新的值，內(nèi)存地址不一樣,new 的
var k2 = ['a'];
map.set(k1, 111);
map.set(k2, 222);

⑥ 遍歷

Map結(jié)構(gòu)的默認(rèn)遍歷器接口（Symbol.iterator屬性），就是entries方法。

keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回所有成員的遍歷器。

console.log(Map[Symbol.iterator] === Map.entries)//true
let map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
console.log([...map.keys()]);//[ 1, 2, 3 ]
console.log([...map.values()]);//[ 'one', 'two', 'three' ]
console.log([...map.entries()]);//[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]
console.log([...map]);[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]

⑦M(jìn)ap還有一個(gè)forEach方法，進(jìn)行遍歷。

⑧與set相同，map可以結(jié)合數(shù)組的map方法、filter方法，可以實(shí)現(xiàn)Map的遍歷和過濾。

希望本文所述對大家ECMAScript程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手