归约归约冲突_JavaScript映射，归约和过滤-带有代码示例的JS数组函数

归约归约冲突

Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function. In this article, you will learn why and how to use each one.

映射，缩小和过滤都是JavaScript中的数组方法。 每个人都将遍历一个数组并执行转换或计算。 每个函数都将根据函数的结果返回一个新数组。 在本文中，您将学习为什么以及如何使用每一项。

Here is a fun summary by Steven Luscher:

这是史蒂文·卢切尔(Steven Luscher)的有趣总结：

地图 (Map)

The map() method is used for creating a new array from an existing one, applying a function to each one of the elements of the first array.

map()方法用于从现有数组创建新数组，并将函数应用于第一个数组的每个元素。

句法 (Syntax)

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

In the callback, only the array element is required. Usually some action is performed on the value and then a new value is returned.

在回调中，仅需要array element 。 通常，对该值执行一些操作，然后返回一个新值。

例 (Example )

In the following example, each number in an array is doubled.

在下面的示例中，数组中的每个数字都加倍。

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

过滤 (Filter)

The filter() method takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

filter()方法获取数组中的每个元素，并对其应用条件语句。 如果此条件返回true，则该元素将被推送到输出数组。 如果条件返回false，则不会将元素压入输出数组。

句法 (Syntax)

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

The syntax for filter is similar to map, except the callback function should return true to keep the element, or false otherwise. In the callback, only the element is required.

filter的语法类似于map ，不同之处在于回调函数应返回true以保留该元素，否则返回false 。 在回调中，仅需要element 。

例子 (Examples)

In the following example, odd numbers are "filtered" out, leaving only even numbers.

在下面的示例中，“滤除”了奇数，仅保留了偶数。

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]

In the next example, filter() is used to get all the students whose grades are greater than or equal to 90.

在下一个示例中， filter()用于获取所有成绩大于或等于90的学生。

const students = [
  { name: 'Quincy', grade: 96 },
  { name: 'Jason', grade: 84 },
  { name: 'Alexis', grade: 100 },
  { name: 'Sam', grade: 65 },
  { name: 'Katie', grade: 90 }
];

const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

减少 (Reduce)

The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.

reduce()方法将值数组减少为一个值。 为了获得输出值，它在数组的每个元素上运行一个reducer函数。

句法 (Syntax)

arr.reduce(callback[, initialValue])

The callback argument is a function that will be called once for every item in the array. This function takes four arguments, but often only the first two are used.

callback参数是一个函数，将为数组中的每个项目调用一次。 该函数有四个参数，但通常仅使用前两个参数。

• accumulator - the returned value of the previous iteration

  累加器 -上一次迭代的返回值

• currentValue - the current item in the array

  currentValue-数组中的当前项目

• index - the index of the current item

  index-当前项目的索引

• array - the original array on which reduce was called

  array-在其上调用reduce的原始数组

• The initialValue argument is optional. If provided, it will be used as the initial accumulator value in the first call to the callback function.

  initialValue参数是可选的。 如果提供的话，它将在第一次调用回调函数时用作初始累加器值。

例子 (Examples)

The following example adds every number together in an array of numbers.

下面的示例将每个数字加在一起组成一个数字数组。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10

In the next example, reduce() is used to transform an array of strings into a single object that shows how many times each string appears in the array. Notice this call to reduce passes an empty object {} as the initialValue parameter. This will be used as the initial value of the accumulator (the first argument) passed to the callback function.

在下一个示例中， reduce()用于将字符串数组转换为单个对象，该对象显示每个字符串出现在数组中的次数。 注意，该reduce调用将空对象{}作为initialValue参数传递。 这将用作传递给回调函数的累加器(第一个参数)的初始值。

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts); 

/*
Output:
 { 
    dog: 2, 
    chicken: 3, 
    cat: 1, 
    rabbit: 1 
 }
 */

影片说明 (Video Explanation)

Check out the video below from the freeCodeCamp.org YouTube channel. It covers the array methods discussed, plus a few more.

观看以下来自freeCodeCamp.org YouTube频道的视频。 它涵盖了讨论的数组方法以及其他一些方法。

翻译自: https://www.freecodecamp.org/news/javascript-map-reduce-and-filter-explained-with-examples/

归约归约冲突