JavaScript 之 for、forEach、map

js 中通常使用 for 循环、forEach 和 map 方法来遍历数组，但这三种循环的方法之间还是存在很多不同点。

1. for 循环

for 循环适用于任何可迭代对象，可以通过控制变量和条件来灵活控制循环过程，可以使用 break 跳出循环。

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0){
	break;
  }
  console.log(numbers[i]);  
}

除此之外，还可以使用 for … in … 和 for … of … 来遍历数组和可迭代对象

for … in 循环

for … in 循环用于遍历对象的可枚举属性（包括自身属性和继承属性）。对于数组或类似数组的对象，它将迭代索引值而不是元素本身。

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const key in person) {
  console.log(key + ": " + person[key]);	// name: John
}

const numbers = [1, 2, 3, 4, 5];

for (const index in numbers){
	console.log(index + ": " + numbers[index]);	// 0: 1
}

for … of 循环

for…of 循环用于遍历可迭代对象（例如数组、字符串、Set、Map等），迭代元素本身。

const numbers = [1, 2, 3, 4, 5];

for (const number in numbers){
	console.log(number);	// 1
}

2. forEach

forEach 方法是数组提供的一种迭代方法，用于遍历数组中的每个元素，并对其执行回调函数。

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = [];

numbers.forEach(number => {
	if (number === 3) {
    	return;
  	}
	doubleNumbers.push(number * 2);
})

// doubleNumbers = [2, 4, 8, 10]

forEach 方法中的 return 只会结束当前迭代，而不会中断整个循环或跳出循环，循环将继续并处理剩余元素，相当于 for 循环中的 continue 语句。

3.map

map 方法是数组提供的另一种迭代方法，用于遍历数组中的每个元素，并生成一个新的数组。

const numbers = [1, 2, 3, 4, 5];

const doubleNumbers = numbers.map(number => {
	if (number === 3) {
    	return;
  	}
	return number * 2;
})
// doubleNumbers = [2, 4, undefined, 8, 10]

map 方法的 return 用于返回新数组，并不会中断整个循环或跳出循环