新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

詳解ES6中的Map與Set

ES6是JavaScript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語言，本篇文章重點(diǎn)為大家講解一下ES6中的Map 與 Set。

大埔網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),大埔網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為大埔數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的大埔做網(wǎng)站的公司定做！

Map 對(duì)象

Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。

Maps 和 Objects 的區(qū)別

一個(gè) Object 的鍵只能是字符串或者 Symbols，但一個(gè) Map 的鍵可以是任意值。
Map 中的鍵值是有序的（FIFO 原則），而添加到對(duì)象中的鍵則不是。
Map 的鍵值對(duì)個(gè)數(shù)可以從 size 屬性獲取，而 Object 的鍵值對(duì)個(gè)數(shù)只能手動(dòng)計(jì)算。
Object 都有自己的原型，原型鏈上的鍵名有可能和你自己在對(duì)象上的設(shè)置的鍵名產(chǎn)生沖突。

Map 中的 key

key 是字符串

var myMap = new Map();
var keyString = "a string";

myMap.set(keyString, "和鍵'a string'關(guān)聯(lián)的值");

myMap.get(keyString);    // "和鍵'a string'關(guān)聯(lián)的值"
myMap.get("a string");   // "和鍵'a string'關(guān)聯(lián)的值"
                        // 因?yàn)?nbsp;keyString === 'a string'

key 是對(duì)象

var myMap = new Map();
var keyObj = {},

myMap.set(keyObj, "和鍵 keyObj 關(guān)聯(lián)的值");
?
myMap.get(keyObj); // "和鍵 keyObj 關(guān)聯(lián)的值"
myMap.get({}); // undefined, 因?yàn)?nbsp;keyObj !== {}

key 是函數(shù)

var myMap = new Map();
var keyFunc = function () {}, // 函數(shù)

myMap.set(keyFunc, "和鍵 keyFunc 關(guān)聯(lián)的值");

myMap.get(keyFunc); // "和鍵 keyFunc 關(guān)聯(lián)的值"
myMap.get(function() {}) // undefined, 因?yàn)?nbsp;keyFunc !== function () {}

key 是 NaN

var myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN); // "not a number"

var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"

雖然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)，NaN作為Map的鍵來說是沒有區(qū)別的。

Map 的迭代

對(duì) Map 進(jìn)行遍歷，以下兩個(gè)最高級(jí)。

for…of

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

// 將會(huì)顯示兩個(gè) log。 一個(gè)是 "0 = zero" 另一個(gè)是 "1 = one"
for (var [key, value] of myMap) {
 console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
 console.log(key + " = " + value);
}
/* 這個(gè) entries 方法返回一個(gè)新的 Iterator 對(duì)象，它按插入順序包含了 Map 對(duì)象中每個(gè)元素的 [key, value] 數(shù)組。 */

// 將會(huì)顯示兩個(gè)log。 一個(gè)是 "0" 另一個(gè)是 "1"
for (var key of myMap.keys()) {
 console.log(key);
}
/* 這個(gè) keys 方法返回一個(gè)新的 Iterator 對(duì)象， 它按插入順序包含了 Map 對(duì)象中每個(gè)元素的鍵。 */

// 將會(huì)顯示兩個(gè)log。 一個(gè)是 "zero" 另一個(gè)是 "one"
for (var value of myMap.values()) {
 console.log(value);
}
/* 這個(gè) values 方法返回一個(gè)新的 Iterator 對(duì)象，它按插入順序包含了 Map 對(duì)象中每個(gè)元素的值。 */

forEach()

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

// 將會(huì)顯示兩個(gè) logs。 一個(gè)是 "0 = zero" 另一個(gè)是 "1 = one"
myMap.forEach(function(value, key) {
 console.log(key + " = " + value);
}, myMap)

Map 對(duì)象的操作

Map 與 Array的轉(zhuǎn)換

var kvArray = [["key1", "value1"], ["key2", "value2"]];

// Map 構(gòu)造函數(shù)可以將一個(gè) 二維 鍵值對(duì)數(shù)組轉(zhuǎn)換成一個(gè) Map 對(duì)象
var myMap = new Map(kvArray);

// 使用 Array.from 函數(shù)可以將一個(gè) Map 對(duì)象轉(zhuǎn)換成一個(gè)二維鍵值對(duì)數(shù)組
var outArray = Array.from(myMap);

Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);

console.log(original === clone);
// 打印 false。 Map 對(duì)象構(gòu)造函數(shù)生成實(shí)例，迭代出新的對(duì)象。

Map 的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);var second = new Map([[1, 'uno'], [2, 'dos']]);// 合并兩個(gè) Map 對(duì)象時(shí)，如果有重復(fù)的鍵值，則后面的會(huì)覆蓋前面的，對(duì)應(yīng)值即 uno，dos， threevar merged = new Map([...first, ...second]);

Set 對(duì)象

Set 對(duì)象允許你存儲(chǔ)任何類型的唯一值，無論是原始值或者是對(duì)象引用。

Set 中的特殊值

Set 對(duì)象存儲(chǔ)的值總是唯一的，所以需要判斷兩個(gè)值是否恒等。有幾個(gè)特殊值需要特殊對(duì)待：

+0 與 -0 在存儲(chǔ)判斷唯一性的時(shí)候是恒等的，所以不重復(fù)；
undefined 與 undefined 是恒等的，所以不重復(fù)；
NaN 與 NaN 是不恒等的，但是在 Set 中只能存一個(gè)，不重復(fù)。

代碼

let mySet = new Set();mySet.add(1); // Set(1) {1}mySet.add(5); // Set(2) {1, 5}mySet.add(5); // Set(2) {1, 5} 這里體現(xiàn)了值的唯一性mySet.add("some text");// Set(3) {1, 5, "some text"} 這里體現(xiàn)了類型的多樣性var o = {a: 1, b: 2};mySet.add(o);mySet.add({a: 1, b: 2});// Set(5) {1, 5, "some text", {…}, {…}}// 這里體現(xiàn)了對(duì)象之間引用不同不恒等，即使值相同，Set 也能存儲(chǔ)

類型轉(zhuǎn)換

Array

// Array 轉(zhuǎn) Setvar mySet = new Set(["value1", "value2", "value3"]);// 用...操作符，將 Set 轉(zhuǎn) Arrayvar myArray = [...mySet];String// String 轉(zhuǎn) Setvar mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}// 注：Set 中 toString 方法是不能將 Set 轉(zhuǎn)換成 String

Set 對(duì)象作用

數(shù)組去重

var mySet = new Set([1, 2, 3, 4, 4]);[...mySet]; // [1, 2, 3, 4]

并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

本文名稱：詳解ES6中的Map與Set
當(dāng)前鏈接：http://m.fisionsoft.com.cn/article/cdiijdd.html