ES6 for-of循环与Map、Set数据结构详解

ES6循环与数据结构概述

本文通过具体实例，详细解析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循环主要面向存储键值对的对象，其索引值为字符串类型（如“1”、“2”等）。由于字符串拼接特性，“1”+“2”的结果并非数值3，这可能导致逻辑错误。

for-of循环详解

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数据结构解析

Map与Set详解

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

可以看出，Map的has方法在判断键是否存在时，性能优于数组的indexOf方法。

Set与Map类似，同样维护一个键列表，但其核心特性是元素不可重复。


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

如示例所示，当尝试添加重复数据时，Set会自动过滤掉重复项。

那么，这两种数据结构的具体应用场景是什么？

Map适用于存储键值对数据，例如姓名与年龄的对应关系；而Set则适用于存储需要去重的目标集合，如学号列表。

for-of在对象遍历中的应用

for-of用于对象遍历

介绍完Map和Set后，我们来看看for-of如何作用于Set对象。


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

遍历Map对象时，由于数据以键值对形式存储，需要使用解构赋值分别获取key和value。


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]);
}

希望本文所述内容能对ECMAScript程序设计有所帮助。

ES6教程之for循环和Map,Set用法分析

ES6循环与数据结构概述

for-of循环详解

Map与Set数据结构解析

for-of在对象遍历中的应用

实用工具推荐