重学JS数组的reduce、map、filter方法reduce定义 reduce() 方法对数组中的每个元素按序执行一

reduce定义

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

首先我们可以看到，reduce返回的是一个单值，该单值是由每一项计算出来的

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

语法

数组变量名.reduce((sum.value)=>{
            //向sum变量上累加值
            //一定要return 值给下一次循环sum初始值
            },0)

参数说明

arr.reduce(callback(accumulator, currentValue[, currentIndex [, array]])[, initialValue])

callback：执行数组中每个值(如果没有提供 initialValue则第一值除外)的函数，包括四个参数：

accumulator: 累计器累计回调的返回值；它是上一次调用回调时返回的累计值，或者 initialValue;
currentValue：数组中正在处理的元素;
index 可选: 数组中正在处理的当前元素的索引，如果提供了initialValue,则起始索引号为0，否则从索引 1 起始;
array 可选：调用 reduce()的数组；
initialValue 可选：作为第一次调用callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce将报错;

练习一

求下面数字的和
let arr=[7,10,3,2]

let result1=arr.reduce((sum,value)=>{
            sum+=value
            return sum
},0)
console.log(result1)  //22

计算数组中每个元素出现的次数

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames :
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

reduce() 方法接受一个数组作为输入值并返回一个值。这点挺有趣的。reduce 接受一个回调函数，回调函数参数包括一个累计器（数组每一段的累加值，它会像雪球一样增长），当前值，和索引。reduce 也接受一个初始值作为第二个参数：

let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
  ...

本节代码图解，演示了用炖锅调制调料，并附上手写的代码

来写一个炒菜函数和一个作料清单：

// our list of ingredients in an array
const ingredients = ['wine', 'tomato', 'onion', 'mushroom']

// a cooking function
const cook = (ingredient) => {
  return `cooked ${ingredient}`
}

如果我们想要把这些作料做成一个调味汁（开玩笑的），用 reduce() 来归约！

const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce += cook(item) + ', '
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "

初始值（这个例子中的 ''）很重要，它决定了第一个作料能够进行烹饪。这里输出的结果不太靠谱，自己炒菜时要当心。下面的例子就是我要说到的情况：

const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce += cook(item) + ', '
})

// wineReduction = "winecooked tomato, cooked onion, cooked mushroom, "

最后，确保新字符串的末尾没有额外的空白，我们可以传递索引和数组来执行转换：

const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  sauce += cook(item)
  if (index < array.length - 1) {
    sauce += ', '
  }
  return sauce
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"

可以用三目操作符、模板字符串和隐式返回，写的更简洁（一行搞定！）：

const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  return (index < array.length - 1) ? sauce += `${cook(item)}, ` : sauce += `${cook(item)}`
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"

记住这个方法的简单办法就是回想你怎么做调味汁：把多个作料归约到单个。

map方法

map() 修改数组通过指定函数处理数组的每个元素，并返回处理后的数组。

修改数组
return 执行return后操作出来的结果所组成的新数组
arr.map(function (item, key, arr) {}) item 必选， key 可选， arr 可选当前元素属于的数组对象

map 遍历修改数组的值并返回新数组

// 初始数组
let arr = [1, 2, 3, 4, 5, 6];

// 操作-遍历 所以会log的次数则是被操作的数组长度
let newarr1 = arr.map(function (item, key, arr) {
    console.log('item', item); // 输出6次 每次分别是 1 2 3 4 5 6
    console.log('key', key); // 输出6次 每次分别是 0 1 2 3 4 5
    console.log('arr', arr); // 输出6次 重复6次 arr [1, 2, 3, 4, 5, 6] 
    return item; // 会返回一个新数组
})
console.log(newarr1); // [1, 2, 3, 4, 5, 6]

// 操作-修改数组的值
let newarr2 = arr.map(function (item, key, arr) {
    return item * 10; // 会返回一个新数组
})
console.log(newarr2); //[10, 20, 30, 40, 50, 60]

map 遍历修改数组对象的值并返回新数组

// 初始对象数组
let people = [
                {name: "小杨",
                age: 23},
                {name: '小肖',
                 age: 30}
                   ];

// 操作-修改其中的对象的某个属性的值
let newpeople1 = people.map(item => {
    return {
        name: '这个人叫做' + item.name,
    }
});
console.log(newpeople1); // [{name: '这个人叫做小杨'}, {name: '这个人叫做小肖'}]

// 操作-修改其中对象的所有属性的值
let newpeople2 = people.map(item => {
    return {
        name: '这个人叫做' + item.name,
        age: '这个人的年龄' + item.age
    }
});
console.log(newpeople2); 
// [{name: '这个人叫做小杨', age: '这个人的年龄23' },{ name: '这个人叫做小肖', age: '这个人的年龄30'}]

filter() 过滤数组检测数值元素，并返回符合条件所有元素的数组

过滤数组
return 符合过滤条件的原数组数据组成的新数组
arr.fitler(function (item, key, arr) {}) item 必选， key 可选， arr 可选，当前元素属于的数组对象

filter 遍历数组

// 操作-遍历数组
let arr = [1, 2, 3, 4, 5, 6];
let newarr = arr.filter(function (item, index, arr) {
    console.log(item); // 输出6次 每次分别是 1 2 3 4 5 6
    console.log(index); // 输出6次 每次分别是 0 1 2 3 4 5
    console.log(arr); // 输出6次 重复6次 [ 1, 2, 3, 4, 5, 6 ] 
});
console.log(arr, '原数组')
console.log(newarr); //[]

filter 遍历操作过滤去重筛选数组，数组对象，返回新数组

// 操作-遍历过滤出所有偶数
let arr1 = [1, 2, 3, 4, 5, 6];
let newarr1 = arr1.filter(item => {
    return item % 2 === 0;
});
console.log('过滤出所有偶数', newarr1); // 过滤出所有偶数 [2, 4, 6]

// 操作-遍历过滤掉空字符串 undefined null 0
let arr2 = ['', 1, undefined, '小肖', 0, null];
let newarr2 = arr2.filter(item => item);
console.log(newarr2); // [ 1, '小肖' ]

// 操作-数组去重
let arr3 = [1, 1, '小杨', '小杨', null, 'undefined', '小肖', '105', null, undefined];
let newarr3 = arr3.filter(function (item, index, arr3) {
    // 当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr3.indexOf(item, 0) === index;
});
console.log(newarr3); 
// [ 1, '小杨', null, 'undefined', '小肖', '105', undefined ]

// 操作-筛选数组对象 单个条件筛选
let arr4 = [{name: '小肖',age: 30},{name: '小杨',age: 23}];
let newarr4 = arr4.filter(item => item.age == 23);
console.log(newarr4); // [{ name: '小杨', age: 23 }]

当我们想要过滤数组的值到另一个数组，新数组中的每个值都通过一个特定检查，Array.filter() 这个快捷实用的方法就派上用场了。

类似搜索过滤器，filter 基于传递的参数来过滤出值。

举个例子，假定有个数字数组，想要过滤出大于 10 的值，可以这样写：

[1, 4, 6, 14, 32, 78].filter(val => val > 10)
// the result is: [14, 32, 78]

如果在这个数组上使用 map 方法，比如在上面这个例子，会返回一个带有 val > 10 判断的和原始数组长度相同的数组，其中每个值都经过转换或者检查。如果原始值大于 10，会被转换为真值。就像这样：

[1, 4, 6, 14, 32, 78].map(val => val > 10)

但是 filter 方法，只返回真值。因此如果所有值都执行指定的检查的话，结果的长度会小于等于原始数组。

把 filter 想象成一个漏斗。部分混合物会从中穿过进入结果，而另一部分则会被留下并抛弃。

假设宠物训练学校有一个四只狗的小班，学校里的所有狗都会经过各种挑战，然后参加一个分级期末考试。我们用一个对象数组来表示这些狗狗：

const students = [
  {
    name: "Boops",
    finalGrade: 80
  },
  {
    name: "Kitten",
    finalGrade: 45
  },
  {
    name: "Taco",
    finalGrade: 100
  },
  {
    name: "Lucy",
    finalGrade: 60
  }
]
复制代码

如果狗狗们的期末考试成绩高于 70 分，它们会获得一个精美的证书；反之，它们就要去重修。为了知道证书打印的数量，要写一个方法来返回通过考试的狗狗。不必写循环来遍历数组的每个对象，我们可以用 filter 简化代码！

const passingDogs = students.filter((student) => {
  return student.finalGrade >= 70
})

/*
passingDogs = [
  {
    name: "Boops",
    finalGrade: 80
  },
  {
    name: "Taco",
    finalGrade: 100
  }
]
*/
复制代码

你也看到了，Boops 和 Taco 是好狗狗（其实所有狗都很不错），它们取得了通过课程的成就证书！利用箭头函数的隐式返回特性，一行代码就能实现。因为只有一个参数，所以可以删掉箭头函数的括号：

const passingDogs = students.filter(student => student.finalGrade >= 70)

/*
passingDogs = [
  {
    name: "Boops",
    finalGrade: 80
  },
  {
    name: "Taco",
    finalGrade: 100
  }
]
*/

map和filter的异同点

map：将每一项item取出跟return后面的语句分别执行将结果们一起返回以一个新数组形式显示
map：是对原数组的加工,映射成一对一映射的新数组

let arr = [{name:'小肖',age:30},{name:'小杨',age:23},{name:'小悦',age:18}];

let mapArr1 = arr.map(item=>{
    return item.age > 18
});
console.log(mapArr1); // [true, true, false]

let mapArr2 = arr.map(item=>{
    return item.name == '小肖'
});
console.log(mapArr2); // [ true, false, false ]

filter：将每一项item取出跟return后面语句分别执行过滤出来的数据合在一起以新数组形式显示
filter：是满足条件的留下,是对原数组的过滤

let filterArr = arr.filter(item=>{
    return item.age >18
});
console.log(filterArr); // [{name: '小肖', age: 30}, {name: '小杨', age: 23}]

总结：map用于修改 filter用于过滤都不改变原数组**

重学JS数组的reduce、map、filter方法