JS中forEach和filter使用

主要区别

• 目的：forEach 用于执行操作，而 filter 用于筛选数据。
• 返回值：forEach 不返回新数组，而 filter 返回一个新数组。
• 使用场景：当你需要执行一些操作，而不需要创建一个新数组时，使用 forEach。当你需要根据条件筛选出数组的子集时，使用 filter。

总结来说，forEach 是一个“操作”方法，而 filter 是一个“筛选”方法。

forEach使用

• 用途：forEach 方法用于遍历数组中的每个元素，并对每个元素执行一个回调函数。它通常用于执行操作，而不返回任何值。
• 返回值：forEach 方法没有返回值，或者说它总是返回 undefined。因此，它不会创建一个新数组。
• 改变原数组：forEach 可以通过回调函数中的操作改变原数组，但这不是它的主要用途。

基础语法

array.forEach(function(currentValue, index, arr), thisValue)

• currentValue：数组中正在处理的当前元素。
• index（可选）：数组中正在处理的当前元素的索引。
• arr（可选）：forEach 方法正在操作的数组。
• thisValue（可选）：当执行回调函数时，用作 this 的值。

简单示例
const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});

apple 0
banana 1
cherry 2

es6简写
fruits.forEach((item, index) => {
  console.log(item, index);
});

forEach 方法没有返回值，它总是返回 undefined。此外，它不会改变原始数组，但是回调函数内部如果进行了操作，则可能会改变数组中的元素。

请注意，forEach 无法直接中断，如果需要中断循环，应该使用简单的 for 循环或者 for...of循环配合 break 语句。

filter使用

• 用途：filter 方法创建一个新数组，包含通过所提供函数实现的测试的所有元素。它用于筛选出数组中满足特定条件的元素。
• 返回值：filter 方法返回一个新的数组，该数组包含所有通过测试的元素。如果没有任何元素通过测试，则返回一个空数组。
• 改变原数组：filter 不会改变原数组，它总是返回一个新数组。

基础语法

array.filter(function(element, index, array), thisValue)

• element：当前正在处理的数组元素。
• index（可选）：当前元素的索引。
• array（可选）：调用 filter 方法的数组。
• thisValue（可选）：当执行回调函数时，用作 this 的值。

创建一个新数组，只包含原始数组中大于10的元素
const numbers = [5, 12, 8, 130, 44];

const filteredNumbers = numbers.filter(function(value) {
  return value > 10;
});

console.log(filteredNumbers); // 输出: [12, 130, 44]

使用ES6的箭头函数来简化代码：
const filteredNumbers = numbers.filter(value => value > 10);

filter() 方法返回一个新的、已过滤的数组，如果没有任何数组元素通过测试，则返回一个空数组。

需要注意的是，filter() 不会对空数组进行检测，也不会改变原数组。如果回调函数没有返回一个布尔值，那么 filter() 方法会假定返回值是 false，并且不会包含在结果数组中。