【CRR学习笔记】JavaScript之Array.prototype API

Javascript

Array.prototype

Array.prototype.reduce

首先看下官方文档：

语法

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

其中callback回调函数-执行数组中每个值的函数，包含四个参数：

1. accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
2. currentValue 数组中正在处理的元素。
3. currentIndex可选 数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。
4. array可选 调用reduce()的数组

第二个参数：initialValue可选 作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

reduce返回：函数累计处理的结果

下面我们通过几个例子来使用reduce:

1，统计数组中每个数出现的次数

 function reducer(acc,cur){
  if (cur in acc){
    acc[cur]++;
  }else{
    acc[cur] = 1;
  }
  // console.log(acc);
  return acc;
 }
 let arr = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
 console.log(arr.reduce(reducer,{})); //传入对象作为acc 的初始值；
 
 // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

2，按属性对Object分类

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

 function reducer(acc,cur){
  if (cur.age in acc){
    acc[cur.age].push(cur.name);
  }else{
    acc[cur.age] = [];
    acc[cur.age].push(cur.name);
 }
 return acc;
}

 console.log(people.reduce(reducer,{}));

3，数组去重

 let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
 function reducer1(acc,cur,idx){
  if (acc.length ===0 || acc[acc.length-1]!= cur){
    acc.push(cur);
  }
  return acc;
 }
  console.log(arr.sort().reduce(reducer1,[]));//先排序后去重

当然数组去重，最快地方法是：new Set(arr);

4，将二维数组转化为一维

 let aa = [[1,2],[3,4]];
 function reducer2(acc,cur){
  return acc.concat(cur);
 }
 console.log(aa.reduce(reducer2,[]));

5，按顺序执行Promise

 // promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5);
  });
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2);
  });
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
 return a * 3;
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4);
  });
}
//方法
function runPromiseSequence(arr,input){
return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  );
 }

//4个Promise,如何顺序执行呢
const promiseArr = [p1, p2, f3, p4];
//传入初始值
runPromiseSequence(promiseArr, 10)
  .then(console.log);   // 1200