ES6 中的循环

Question

ES6 中提供了 4 种循环语法：for...of、for...in、forEach 以及 map。这些循环语法使得在 JavaScript 中进行循环变得更加容易和直观。

for...of 循环

for...of 循环是 ES6 中最常用的循环语法。它主要用于遍历可迭代对象（例如数组、字符串、Map、Set、arguments 对象等）。下面是 for...of 循环的语法：

for (let value of iterable) {
  // 循环语句
}

其中， value 是当前循环到的值， iterable 是要遍历的对象。下面是一个遍历数组的例子：

const arr = ['apple', 'orange', 'banana'];
for (let fruit of arr) {
  console.log(fruit);
}
// 输出：
// apple
// orange
// banana

for...in 循环

for...in 循环也是用于遍历对象的循环语法，它可以遍历对象的属性名和属性值。下面是 for...in 循环的语法：

for (let key in obj) {
  // 循环语句
}

其中， key 是当前循环到的属性名， obj 是要遍历的对象。下面是一个遍历对象的例子：

const person = {name: 'John', age: 30, gender: 'male'};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
// 输出：
// name: John
// age: 30
// gender: male

需要注意的是，for...in 循环也会遍历对象的原型属性。因此，为了避免遍历到不需要的属性，我们需要使用 hasOwnProperty() 方法来判断一个属性是否是对象自身的属性。

forEach 循环

forEach 循环是用于遍历数组的循环语法，它的语法如下：

array.forEach(function(currentValue, index, array) {
  // 当前值和索引
});

其中， currentValue 是当前循环到的值， index 是当前值的索引， array 是要遍历的数组。下面是一个遍历数组的例子：

const arr = ['apple', 'orange', 'banana'];
arr.forEach(function(fruit, index) {
  console.log(`${index}: ${fruit}`);
});
// 输出：
// 0: apple
// 1: orange
// 2: banana

需要注意的是，forEach 循环无法使用 break 和 continue 语句来结束循环或跳过某一项。

map 循环

map 循环也是用于遍历数组的循环语法，它主要用于对数组的每个元素进行操作，并返回一个新的数组。它的语法如下：

const newArray = array.map(function(currentValue, index, array) {
  // 对当前值进行操作，并返回新的值
});

其中， currentValue 是当前循环到的值， index 是当前值的索引， array 是要遍历的数组。 newArray 即为操作后的新数组。下面是一个对数组进行操作的例子：

const arr = [1, 2, 3];
const newArr = arr.map(function(num) {
  return num * 2;
});
console.log(newArr);
// 输出：[2, 4, 6]

需要注意的是，map 循环同样无法使用 break 和 continue 语句。