vue reduce函数的使用

1. 语法

arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）
initialValue （作为第一次调用 callback 的第一个参数。）

2. 参数（4个）

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）

3.实例

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

第一种写法

const str = 'jshdjsihh';
const obj = str.split('').reduce((pre,item) => {
    console.log(pre)
    console.log("itm：" + item)
    console.log(pre + "[" + item + "]" +  "：" + pre[item])
    pre[item] ? pre[item] ++ : pre[item] = 1
    return pre
 },{})
console.log(obj) // {j: 2, s: 2, h: 3, d: 1, i: 1}

运行

image.png

①设置了初始值，所以pre初始为{}
②item为数组（即字符串）第一项 j
③pre[item] 记录每个元素出现的次数，第一次使用时无定义，输出为undefind，执行pre[item]=1；当元素第二次出现，pre[item]在该元素第一次出现时记录为，1所以执行 ++，变为2；以此类推

第二种写法

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}