Javascript的map、reduce、filter新数组使用方法


数组是编程世界中最常用的数据结构。较新的数组方法,如map(),reduce()和filter()广泛用于使用一些库/框架(如 React/Vue/Angular)构建项目。
在这篇博文中,我将通过真实世界的例子详细讨论这些方法。
 
map()

  • Array.map() 使用传递给它的回调函数返回的元素创建一个新数组。
  • 对数组中的每个元素执行此回调函数,并期望从中获得返回值。
  • 如果回调函数没有返回任何内容,则 undefined 将隐式返回并存储在新创建的数组中。
  • 新数组的长度与调用 map() 的数组长度完全相等。
  • 它不会改变原始数组。

const nums = [1,3,5,7];

const numsDoubled = nums.map(number => number *2);
console.log(numsDoubled);  // [2, 6, 10, 14]

// No return from map's callback fn
const undefArray = nums.map(number => {
            let double = nums*2;
});
console.log(undefArray);
// [undefined, undefined, undefined, undefined]

 reduce()
Array.reduce( ) 方法采用一个 reducer 函数(由我们提供),对 Array 中的每个元素执行这个 reducer 函数,并产生一个值。
让我们先看一个简单的例子。
假设我们有一个学生获得的分数数组,并且需要计算总分。

const studentMarks = [65,75,63,58,69];
const totalMarks = studentMarks.reduce((accumulator, currentElement) => accumulator + currentElement);

console.log(totalMarks); // 330

在第一次迭代中

  1. accumulator(acc) 值用数组的第一个元素初始化(在这种情况下为 65)
  2. 在第一次迭代中,currentElement 为 75(数组的第二个元素)。
  3. accumulator + currentElement,65 + 75 =140 返回并分配给累加器

在第二次迭代中
  1. 累加器值变成了140(等于第一次迭代的结果)
  2. currentElement 是 63,即来自上一次迭代的数组的下一个元素。
  3. 同样,accumulator + currentElement,140 + 63 = 203 被返回并分配给 accumulator

这一直持续到 Array 耗尽。一旦没有其他元素要迭代,累加器值将被返回并存储在 totalMarks 变量中。
让我们看看 Array.reduce() 的另一个变体
考虑一个场景,
学校校长决定给学生 20 分的宽限分,承认由于冠状病毒大流行而未能妥善安排课程的事实。
.reduce() 函数如何处理这种情况?看下面的代码;

const studentMarks = [65,75,63,58,69];
const totalMarks = studentMarks.reduce((acc, currentElement) => acc + currentElement, 20);

console.log(totalMarks); // 350

事实证明,Array.reduce() 可以将第二个参数(它是可选的)作为累加器的初始值。

  1. 如果我们将第二个参数传递给 .reduce() 则累加器的初始值设置为传递的参数,currentElement 从第一个元素开始,在这种情况下为 65
  2. 如果我们不传递第二个参数,那么累加器值将使用数组的第一个值(在本例中为 65)进行初始化,而 currentElement 为 75(数组的第二个值),如第一个示例中所述。

 
Filter
Array.filter() 方法创建一个新数组,其中包含提供给 filter() 的函数为其返回 true 的元素。
和 map() 一样,filter() 也不会改变原始数组。
const array = [1,-1,2,3,-5];
const positiveArray = array.filter(num => num >= 0);
console.log(positiveArray) // [1, 2, 3]

 
概括

  • map、reduce 和 filter 广泛用于库/框架的工作。
  • 这些方法都不会改变原始数组。
  • map()和filter()产生新的数组,而reduce()产生单一的值的结果。