filter、map、reduce 一次性说清楚-Toy模板网

这篇具有很好参考价值的文章主要介绍了filter、map、reduce 一次性说清楚。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

filter

filter() 方法是 JavaScript 中数组的一个方法，用于筛选数组中符合指定条件的元素，并返回一个新的数组，新数组中包含筛选出的元素。

filter() 方法语法如下：

arr.filter(callback(element[, index[, array]])[, thisArg])

其中，参数 callback 是一个回调函数，用于定义筛选规则，该函数接收三个参数 element、index、array，分别代表当前正在被处理的元素、该元素的索引和数组本身。函数返回 true 时，当前元素被保留到新数组中；返回 false 时，当前元素被过滤掉，不会出现在新数组中。

除了 callback 参数之外，filter() 方法还支持一个可选参数 thisArg，用于指定回调函数中的 this 指向，这个参数可以省略。如果指定了 thisArg 参数，则 callback 中的 this 指向该参数的值。

下面是一些 filter() 方法的例子：

// 过滤一个数组中的奇数，返回一个新的数组
const nums = [1, 2, 3, 4, 5, 6];
const odds = nums.filter(num => num % 2 !== 0);
console.log(odds); // [1, 3, 5]

// 针对数组对象进行筛选，返回一个新的对象数组
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: 'Jack', age: 24 }, { name: 'Peter', age: 30 }, { name: 'Mary', age: 26 }]

// 根据数组对象进行筛选，返回一个新的对象数组
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const jack = users.filter(user => user.name === 'Jack');
console.log(jack); // [{ name: 'Jack', age: 24 }]

map

map() 方法是 JavaScript 中数组的一个方法，用于对数组中的每个元素进行转换，并将转换后的元素存储到一个新的数组中，最终返回这个新数组。

map() 方法语法如下：

arr.map(callback(element[, index[, array]])[, thisArg])

其中，参数 callback 是一个回调函数，用于定义转换规则，该函数接收三个参数 element、index、array，分别代表当前正在被处理的元素、该元素的索引和数组本身。函数返回的值将被存储到新数组中。

除了 callback 参数之外，map() 方法还支持一个可选参数 thisArg，用于指定回调函数中的 this 指向，这个参数可以省略。如果指定了 thisArg 参数，则 callback 中的 this 指向该参数的值。

下面是一些 map() 方法的例子：

// 将一个数组中的所有元素乘以 2，返回一个新的数组
const nums = [1, 2, 3, 4, 5];
const doubles = nums.map(num => num * 2);
console.log(doubles); // [2, 4, 6, 8, 10]

// 对数组对象中的某个属性进行操作，返回一个新的对象数组
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const userNames = users.map(user => user.name);
console.log(userNames); // ['Jack', 'Peter', 'Mary']

// 根据数组对象进行转换，返回一个新的对象数组
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const newUsers = users.map(user => ({ ...user, gender: 'unknown' }));
console.log(newUsers); // [{ name: 'Jack', age: 24, gender: 'unknown' }, { name: 'Peter', age: 30, gender: 'unknown' }, { name: 'Mary', age: 26, gender: 'unknown' }]

map和filter的区别是什么

map() 和 filter() 方法都是 JavaScript 数组的方法，它们的作用不同。

map() 方法用于对数组中的每个元素进行转换，并将转换后的元素存储到一个新的数组中，最终返回这个新数组。该方法不会改变原来的数组。通常情况下，使用 map() 方法可以简化代码，并提升程序的可读性和可维护性。

filter() 方法用于对数组中的元素进行过滤，并将符合条件的元素存储到一个新的数组中，最终返回这个新数组。该方法不会改变原来的数组。通常情况下，使用 filter() 方法可以轻松地从大量数据中筛选出需要的数据，同时也可以提高程序的可读性和可维护性。

可以总结出 map() 与 filter() 的区别：

map() 方法会将数组中的每个元素进行转换，并返回一个新数组；而 filter()方法会根据指定的条件筛选数组中的元素，并返回一个新数组。
map() 方法没有改变原数组的内容，而 filter() 方法也没有改变原数组的内容。
map() 方法会保留原数组中的每个元素，只是将其转化为另一种形式，即新数组的长度与原数组的长度相等；而 filter()方法将会根据筛选条件保留或排除原数组中的各个元素，使得返回的新数组长度可能小于原数组长度。

因此，如果想要对数组中的元素进行转换操作，则应使用 map() 方法；如果想要根据某个条件筛选出符合条件的元素，则应使用 filter() 方法

reduce

reduce() 是 JavaScript 数组的一个方法，它可以用于对数组元素执行一个归并操作，并将最终结果返回。通常情况下，reduce() 可以用来进行累加、求和、求平均值等操作。下面是 reduce() 方法的详细使用方法：

Array.prototype.reduce(callback[, initialValue]) 方法接受一个回调函数 callback 和一个可选的初始值 initialValue 作为参数。其中，callback 函数接受四个参数：累计器（也就是上一次回调返回的值或者初始值），当前元素，当前索引和原始数组。

具体使用时，reduce() 方法从数组的第一个元素开始遍历，每次将遍历到的元素传入回调函数中进行处理，并将处理结果作为下一次遍历的初始值传入回调函数中。最后，返回的结果即为最终的累积值。

如果没有指定初始值 initialValue，则 reduce() 方法会从数组的第二个元素开始遍历，将第一个元素作为初始值传入回调函数中。如果数组为空且没有提供初始值，则 reduce() 方法会抛出一个 TypeError 异常。

下面是一些 reduce() 方法的例子：文章来源地址https://www.toymoban.com/news/detail-455118.html

// 求数组所有元素的和
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, curr) => acc + curr);
console.log(sum); // 15

// 使用初始值计算数组所有元素的和
const sumWithInit = nums.reduce((acc, curr) => acc + curr, 10);
console.log(sumWithInit); // 25

// 求数组所有元素的平均值
const avg = nums.reduce((acc, curr, index, array) => {
  acc += curr;
  if (index === array.length - 1) {
    return acc / array.length;
  } else {
    return acc;
  }
});
console.log(avg); // 3

// 对一个对象数组中的某个属性求和
const users = [
  { name: 'Jack', score: 92 },
  { name: 'Peter', score: 85 },
  { name: 'Mary', score: 88 }
];
const totalScore = users.reduce((acc, curr) => acc + curr.score, 0);
console.log(totalScore); // 265