ES6中for循環和Map、Set怎么用

這篇文章給大家分享的是有關ES6中for循環和Map、Set怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體如下：

現在大家先想一想，如果要你遍歷一個數組的元素，你會選擇如何去做呢？一般都會想起for循環：

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

可惜我得告訴你，這個方法是二十年的人才應該使用的方法，在ES5中已經提出了更為簡便的forEach方法，代碼如下：

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

雖然forEach方法簡短一點，但是它也有它的缺點，就是不能夠break來中途退出循環，也不能通過return來退出循環。

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

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

可是for-in方法實際上是為存儲key的鍵值對型對象準備的，而不是為數組準備的，它的下標為字符串“1”，“2”……相信大家都知道“1”+“2”會怎么樣吧？

for-of循環

ES6為了不影響以前的代碼，為了滿足很多人已經養成的習慣，只能推出一種新的循環語法for-of：

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

對比for-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不僅僅可以用于數組，還可以用在dom對象上，同樣作用于Map和Set對象。

下面介紹一下Map和Set對象

Map,Set

JavaScript的默認對象表示方式是{}，但是JavaScript的對象有個小問題，就是鍵必須是字符串。但實際上Number或者其他數據類型作為鍵也是非常合理的。

為了解決這個問題，最新的ES6規范引入了新的數據類型Map。

Map是具有極快查找速度的鍵值對結構。

我們看看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類似，也是存在key的列表，只不過Set中的元素不能夠重復。

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"}

可以看到，再次添加的重復數據會被過濾掉。

那么這兩種對象的運用場景有哪些呢？

Map可以用來存儲鍵值對，比如姓名和年齡，而Set可以用來存儲不能重復的目標，比如學號列表。

for-of用于對象

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

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

遍歷Map對象則不同，因為Map是以鍵值對存儲的，所以我們需要分開兩個單獨的變量來遍歷：

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

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

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

感謝各位的閱讀！關于“ES6中for循環和Map、Set怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！