ES6 循环

在 ES6 之前，JavaScript 中的循环语句只有 for 和 while。ES6 引入了一些新的循环语句，让循环更加灵活和强大。

for...of 循环

在 ES6 中，新增了 for...of 循环语句，可以用来遍历可迭代对象中的元素，例如数组、字符串、Set 和 Map。

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

此外，for...of 循环还可以在对象上进行迭代，但是需要使用 Object.keys() 方法或者 Object.values() 方法来获取一个可迭代的对象。

const obj = { foo: 'bar', baz: 42 };
for (const key of Object.keys(obj)) {
  console.log(key);
}
// Output:
// foo
// baz

for...in 循环

ES6 中 for...in 循环仍然可以用来遍历对象中的属性，但是不再是用于遍历数组。在遍历对象时，遍历顺序是不确定的。

const obj = { foo: 'bar', baz: 42 };
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}
// Output:
// foo: bar
// baz: 42

forEach 循环

forEach 方法是在数组上定义的，其作用是对数组中的每个元素执行一次回调函数，回调函数接受三个参数：item 表示当前元素，index 表示当前元素的下标，array 表示当前数组。

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

map 循环

map 方法也是在数组上定义的方法，它返回一个新的数组，其中的元素是回调函数的返回值。

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

filter 循环

filter 方法也是在数组上定义的方法，它返回一个新的数组，其中的元素是回调函数返回值为 true 的元素。

const arr = [1, 2, 3];
const newArr = arr.filter(item => item > 1);
console.log(newArr);
// Output: [2, 3]

reduce 循环

reduce 方法也是在数组上定义的方法，它将数组中的元素通过回调函数进行累加，并返回最终的结果。

const arr = [1, 2, 3];
const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(result);
// Output: 6

范围循环

在 JavaScript 中没有原生的范围类型。但是我们可以使用生成器函数和 for...of 循环来实现范围循环的效果。

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (const num of range(1, 5)) {
  console.log(num);
}
// Output:
// 1
// 2
// 3
// 4
// 5

总结

ES6 中新增的循环语句和数组方法让 JavaScript 中的循环变得更加灵活、强大。在实际开发中，我们可以根据实际需求选择最合适的循环语句和数组方法来进行操作，从而提高代码的可读性和可维护性。