在前端开发中，遍历数组并处理其中的数据是一项非常基础和重要的操作。在 ES6 中新增了 for-of 循环，可以方便地遍历数组、字符串、Map 对象等可迭代对象。但是，对于数组去重操作，传统的方式比较繁琐，需要用到一些数组方法和对象属性，不太方便。而 ES11 又新增了 for-in 循环和 Set 对象，可以方便地实现数组去重操作。
for-of 循环基础用法
for-of 循环是 ES6 新增的循环语法，用于遍历可迭代对象中的无序集合（如数组、字符串、Map 对象等）。它比传统的 for 循环和 forEach 方法更加简洁直观，同时支持对 break 和 continue 语句进行循环操作。
for-of 循环的语法如下：
for (let value of iterable) {
// 循环体语句
}其中，iterable 为可迭代对象，value 为当前循环到的元素。我们可以在循环体中直接使用 value 变量来操作当前元素。
下面是一个简单的示例，用 for-of 循环遍历数组并打印出每个元素：
const arr = [1, 2, 3];
for (let value of arr) {
console.log(value);
}
// Output:
// 1
// 2
// 3for-in 循环基础用法
for-in 循环是 JavaScript 中最古老的循环语法，用于遍历对象的属性名。在 ES5 中，它还可以用于遍历数组的下标。但是，由于 for-in 循环是无序的，不能保证遍历顺序与属性定义顺序一致。而且，遍历过程会将原型链上的所有可枚举属性都遍历一遍，可能会影响性能。因此，不推荐使用 for-in 循环来处理数组，而是推荐使用 for-of 循环。
for-in 循环的语法如下：
for (let key in object) {
// 循环体语句
}其中，object 为要遍历的对象，key 为当前循环到的属性名。我们可以在循环体中使用 key 变量来操作当前属性名对应的属性值。
下面是一个简单的示例，用 for-in 循环遍历对象并打印出每个属性的名称和值：
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- --- ------- ------ -- --- ---- --- -- ---- - -------------------- -------------- - -- ------- -- ----- --- -- ---- -- -- ------- ----
使用 Set 对象去重
ES6 中新增的 Set 对象，是一种无序且不重复的集合，可以用来实现数组去重操作。Set 对象中的元素都是唯一的，因此不能有重复的元素。
Set 对象的基本用法如下：
const set = new Set(iterable);
其中，iterable 为可迭代对象，用于初始化 Set 对象。我们可以将数组或字符串等可迭代对象作为参数传入，从而得到一个去重后的 Set 对象。
下面是一个简单的示例，用 Set 对象去重：
const arr = [1, 2, 3, 2, 3, 4]; const set = new Set(arr); console.log([...set]); // Output: [1, 2, 3, 4]
将数组 arr 传入 Set 对象，得到去重后的集合。最后，使用扩展运算符将集合转化为数组。
ES11 的 for-in 遍历 Set 对象
ES11 新增的 for-in 循环，还可以用于遍历 Set 对象中的元素。和 for-of 循环相比，它的优点是可以遍历出重复元素，因此更适合用于数组去重操作。
for-in 循环遍历 Set 对象的语法如下：
for (let value in set) {
// 循环体语句
}其中，set 为要遍历的 Set 对象，value 为当前循环到的元素。我们可以在循环体中使用 value 变量来操作当前元素。
下面是一个示例，用 for-in 循环遍历 Set 对象并去重：
const arr = [1, 2, 3, 2, 3, 4];
const set = new Set(arr);
const result = [];
for (let value in set) {
result.push(Number(value)); // 转化为数字类型并推入结果数组
}
console.log(result); // Output: [1, 2, 3, 4]将数组 arr 传入 Set 对象，得到去重后的集合。使用 for-in 循环遍历集合中的元素，将每个元素转化为数字类型，并推入结果数组中。最后，输出结果数组。
总结
通过本文的介绍，我们了解到了 ES6 中新增的 for-of 循环和 ES11 新增的 for-in 循环，以及如何使用 Set 对象进行数组去重操作。这些新特性和对象的使用，可以有效地提高我们的代码编写效率和代码质量。在实际开发中，我们应该善加利用这些特性，并灵活运用到项目中去，以达到更好的开发效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0ef9f83d39b488154af3e