ES6中for循環(huán)和Map、Set怎么用

這篇文章給大家分享的是有關(guān)ES6中for循環(huán)和Map、Set怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

具體如下：

現(xiàn)在大家先想一想，如果要你遍歷一個(gè)數(shù)組的元素，你會(huì)選擇如何去做呢？一般都會(huì)想起for循環(huán)：

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

可惜我得告訴你，這個(gè)方法是二十年的人才應(yīng)該使用的方法，在ES5中已經(jīng)提出了更為簡(jiǎn)便的forEach方法，代碼如下：

myArray.forEach(function (value) {
 console.log(value);
});

雖然forEach方法簡(jiǎn)短一點(diǎn)，但是它也有它的缺點(diǎn)，就是不能夠break來(lái)中途退出循環(huán)，也不能通過(guò)return來(lái)退出循環(huán)。

那么不是還有for-in方法嗎：

for (var index in myArray) { 
 console.log(myArray[index]);
}

可是for-in方法實(shí)際上是為存儲(chǔ)key的鍵值對(duì)型對(duì)象準(zhǔn)備的，而不是為數(shù)組準(zhǔn)備的，它的下標(biāo)為字符串“1”，“2”……相信大家都知道“1”+“2”會(huì)怎么樣吧？

for-of循環(huán)

ES6為了不影響以前的代碼，為了滿足很多人已經(jīng)養(yǎng)成的習(xí)慣，只能推出一種新的循環(huán)語(yǔ)法for-of：

for (var value of myArray) {
 console.log(value);
}

對(duì)比f(wàn)or-in和for-of：

var a = ["a","b","c","d","e"];
for (var idx in a) {
  console.log( idx ); 
  }// 0 1 2 3 4 
for (var val of a) {
  console.log( val ); 
  }// "a" "b" "c" "d" "e"

for-of不僅僅可以用于數(shù)組，還可以用在dom對(duì)象上，同樣作用于Map和Set對(duì)象。

下面介紹一下Map和Set對(duì)象

Map,Set

JavaScript的默認(rèn)對(duì)象表示方式是{}，但是JavaScript的對(duì)象有個(gè)小問(wèn)題，就是鍵必須是字符串。但實(shí)際上Number或者其他數(shù)據(jù)類(lèi)型作為鍵也是非常合理的。

為了解決這個(gè)問(wèn)題，最新的ES6規(guī)范引入了新的數(shù)據(jù)類(lèi)型Map。

Map是具有極快查找速度的鍵值對(duì)結(jié)構(gòu)。

我們看看Map的使用示例：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

上面的has方法比indexOf速度快。

Set和Map類(lèi)似，也是存在key的列表，只不過(guò)Set中的元素不能夠重復(fù)。

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

可以看到，再次添加的重復(fù)數(shù)據(jù)會(huì)被過(guò)濾掉。

那么這兩種對(duì)象的運(yùn)用場(chǎng)景有哪些呢？

Map可以用來(lái)存儲(chǔ)鍵值對(duì)，比如姓名和年齡，而Set可以用來(lái)存儲(chǔ)不能重復(fù)的目標(biāo)，比如學(xué)號(hào)列表。

for-of用于對(duì)象

好啦，介紹完了兩種類(lèi)型的新對(duì)象，讓我們看看for-of如何作用于Set對(duì)象上的：

var uniqueWords = new Set(words);
for (var word of uniqueWords) {
 console.log(word);
}

遍歷Map對(duì)象則不同，因?yàn)镸ap是以鍵值對(duì)存儲(chǔ)的，所以我們需要分開(kāi)兩個(gè)單獨(dú)的變量來(lái)遍歷：

for (var [key, value] of phoneBookMap) {
 console.log(key + "'s phone number is: " + value);
}

但是需要注意一點(diǎn)。for-of并不是用來(lái)遍歷普通的對(duì)象的屬性的，如果我們一定要這么做，可以使用for-in或者如下方法：

for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

感謝各位的閱讀！關(guān)于“ES6中for循環(huán)和Map、Set怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！