js循环中 for、for...in、for...of、forEach、filter、map、some、every区别,代码示例 ,优缺点,和使用场景

25 阅读4分钟

1. for循环:

区别:for循环是最基础的循环方式,适用于遍历数组、对象和其他可迭代对象。通过控制循环条件和步进来灵活控制循环过程。

代码示例:

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

优点:灵活控制循环条件和步进。 缺点:代码相对繁琐,需要手动控制循环条件和步进,容易出错。 使用场景:适用于对数组、对象和其他可迭代对象进行灵活的遍历和处理。

2. for…in循环:

区别:for…in循环用于遍历对象的可枚举属性,包括原型链上的属性。

代码示例:

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

优点:可以遍历对象的属性,包括可枚举属性和原型链上的属性。 缺点:遍历顺序不确定,可能会遍历到不需要的属性。 使用场景:适用于遍历对象的属性,需要对属性进行处理的场景。

3. for…of循环:

区别:for…of循环用于遍历可迭代对象的值,如数组、字符串、Set等。

代码示例:

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

优点:可以遍历可迭代对象的值,如数组、字符串、Set等。 缺点:无法遍历对象的属性。 使用场景:适用于遍历可迭代对象的值,需要对值进行处理的场景。

4. forEach方法:

区别:forEach方法是数组的内置方法,提供了一种简洁的方式来遍历和处理数组。可以使用回调函数对每个元素进行特定操作。

代码示例:

const array = [1, 2, 3, 4, 5];
array.forEach((item) => {
  console.log(item);
});

优点:简洁易用,提供了对数组元素的遍历和处理。 缺点:无法中断或跳出循环。 使用场景:适用于对数组进行遍历和处理,需要对每个元素进行特定操作的场景。

5. filter方法:

区别:filter方法是数组的内置方法,用于根据指定条件筛选出符合条件的元素,返回一个新的数组。

代码示例:

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter((item) => {
  return item > 2;
});
console.log(filteredArray); // [3, 4, 5]

优点:简洁易用,提供了筛选数组元素的功能。 缺点:无法中断或跳出循环。 使用场景:适用于根据指定条件筛选数组元素的场景。

6. map方法:

区别:map方法是数组的内置方法,用于根据指定条件对数组的每个元素进行操作,返回一个新的数组。

代码示例:

const array = [1, 2, 3, 4, 5];
const mappedArray = array.map((item) => {
  return item * 2;
});
console.log(mappedArray); // [2, 4, 6, 8, 10]

优点:简洁易用,提供了对数组元素进行操作的功能。 缺点:无法中断或跳出循环。 使用场景:适用于对数组元素进行操作并返回新数组的场景。

7. some方法:

区别:some方法是数组的内置方法,用于判断数组中是否存在满足指定条件的元素,只要有一个满足条件即返回true。

代码示例:

const array = [1, 2, 3, 4, 5];
const hasEvenNumber = array.some((item) => {
  return item % 2 === 0;
});
console.log(hasEvenNumber); // true

优点:简洁易用,提供了判断数组中是否存在满足条件的元素的功能。 缺点:无法中断或跳出循环。 使用场景:适用于判断数组中是否存在满足条件的元素的场景。

8. every方法:

区别:every方法是数组的内置方法,用于判断数组中的所有元素是否都满足指定条件,只有全部满足条件才返回true。

代码示例:

const array = [1, 2, 3, 4, 5];
const allEvenNumbers = array.every((item) => {
  return item % 2 === 0;
});
console.log(allEvenNumbers); // false

优点:简洁易用,提供了判断数组中的所有元素是否都满足条件的功能。 缺点:无法中断或跳出循环。 使用场景:适用于判断数组中的所有元素是否都满足条件的场景。

总结:选择适当的循环方式和数组方法取决于具体的需求和数据类型。如果需要对数组进行灵活的遍历和处理,可以使用for循环、for…in循环、for…of循环或forEach方法;如果需要根据条件筛选数组元素,可以使用filter方法;如果需要对数组元素进行操作并返回新数组,可以使用map方法;如果需要判断数组中是否存在满足条件的元素,可以使用some方法;如果需要判断数组中的所有元素是否都满足条件,可以使用every方法。

原文链接:blog.csdn.net/ACCPluzhiqi…