ES6 | 循环

在 ES6 中，循环有了很多新的特性，这些特性使循环更加强大、更加方便。本文将介绍 ES6 中循环的几个比较重要的特性。

for...of 循环

for...of 循环是 ES6 中一个非常方便的循环语法，可以遍历可迭代对象中的元素。可迭代对象包括数组、字符串、Map、Set、TypedArray等。

const arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
}
// 1
// 2
// 3

for...of 循环和 for 循环的语法类似，可以使用 break 和 continue 控制循环。

const arr = ['a', 'b', 'c'];
for (let item of arr) {
  if (item === 'b') {
    break;
  }
  console.log(item);
}
// a

for (let item of arr) {
  if (item === 'b') {
    continue;
  }
  console.log(item);
}
// a
// c

for...in 循环

for...in 循环是遍历对象的属性的一种方式，对于数组等可迭代对象，不建议使用 for...in 循环。

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}
// a: 1
// b: 2
// c: 3

for...in 循环会遍历对象的原型链上的属性，所以需要使用 hasOwnProperty 方法判断属性是否为对象自身的属性。

const obj = { a: 1, b: 2, c: 3 };
obj.prototype.d = 4;
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ': ' + obj[key]);
  }
}
// a: 1
// b: 2
// c: 3

forEach 循环

forEach 循环是数组的一个方法，可以遍历数组中的每个元素。

const arr = [1, 2, 3];
arr.forEach((item) => {
  console.log(item);
});
// 1
// 2
// 3

forEach 循环接受一个回调函数作为参数，在回调函数中可以使用当前元素、当前索引和原数组三个参数。

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  console.log(item, index, array);
});
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]

map、filter 和 reduce 方法

map、filter 和 reduce 方法是数组的三个方法，可以结合使用进行复杂的数据处理。

map 方法会将数组中的每个元素进行转换，并返回一个新的数组。

const arr = [1, 2, 3];
const newArr = arr.map((item) => item * 2);
console.log(newArr);
// [2, 4, 6]

filter 方法会根据条件对数组进行过滤，并返回一个新的数组。

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.filter((item) => item % 2 === 0);
console.log(newArr);
// [2, 4, 6]

reduce 方法会根据函数对数组中的元素进行归并，并返回一个新的值。

const arr = [1, 2, 3];
const sum = arr.reduce((prev, current) => prev + current);
console.log(sum);
// 6

以上是 ES6 中循环的几个比较重要的特性，掌握这些特性将有助于提高编程效率和代码质量。