随着前端技术的不断发展，JavaScript 作为前端开发中最为重要的语言之一，也在不断的更新升级。ES12 中引入了许多新特性，其中最为重要的两个特性就是 “For…of” 循环和 “Map” 对象。本文将详细介绍这两个新特性的应用，并给出相应的示例代码。
“For…of” 循环
在 ES12 中，我们可以使用 “For…of” 循环来遍历数组、字符串、Map、Set 等数据结构。相比于传统的 “For” 循环和 “For…in” 循环，它具有以下优点：
- 语法简洁，易于理解和使用；
- 可以遍历任何可迭代对象，包括数组、字符串、Map、Set 等；
- 不需要使用索引或者键值，直接获取元素本身；
- 可以与 “break” 和 “continue” 语句配合使用。
下面是一个遍历数组的示例：
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item);
}输出结果为：
1 2 3 4 5
我们也可以遍历字符串：
const str = "hello world";
for (const char of str) {
console.log(char);
}输出结果为：
-- -------------------- ---- ------- - - - - - - - - - -
在遍历 Map 对象时，我们可以使用 “entries()” 方法来获取键值对：
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------ ------- ---- ---------- ---- --- --- ------ ----- ------ -- -------------- - -------------------- ----------- -
输出结果为：
name: 张三 age: 18 gender: 男
“Map” 对象
在 ES12 中，我们还可以使用 “Map” 对象来存储键值对。相比于传统的对象，它具有以下优点：
- 支持任何类型的键，包括对象、数组、函数等；
- 可以直接获取键值对的数量，无需遍历整个对象；
- 可以直接使用 “forEach” 方法遍历所有键值对。
下面是一个使用 “Map” 对象存储键值对的示例：
-- -------------------- ---- ------- ----- --- - --- ------ --------------- ------ -------------- ---- ----------------- ----- ----------------------------- -- ----- ---------------------- -- ---- ------------------- ---- -- - -------------------- ----------- ---
输出结果为：
name: 张三 age: 18 gender: 男
总结
ES12 中引入的 “For…of” 循环和 “Map” 对象是 JavaScript 前端开发中非常重要的新特性。它们可以帮助我们更加方便地遍历数据结构和存储键值对，提高开发效率和代码可读性。在实际开发中，我们应该充分利用这两个特性，提高自己的编程能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650667b895b1f8cacd24e44d