js常用方法合集

js常用方法合集

reduce

reduce() 将当前数组进行遍历，并内置一个回调函数，通过参数获取 pre cur 定义初始值等，返回你所要返回的任意值。
pre: 获取上一轮return的结果
cur: 获取当前正在遍历的元素

const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => { 
return previousValue + currentValue
},
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

const arr = [
    {
        age: 12,
        sex: '男',
        name: '小明',
    },
    {
        age: 10,
        sex: '女',
        name: '小红',
    },
    {
        age: 9,
        sex: '女',
        name: '小花',
    },
]
arr.reduce((prev, cur) => {
  return {
    ...prev,
    [`学生_${cur.name}`]: cur.sex,
  };
}, {})
// expected output:
{
    学生_小明: "男"
    学生_小红: "女"
    学生_小花: "女"
}

官方解释
reduce为数组中的每一个元素依次执行callback函数

接受四个参数：
accumulator 累计器
currentValue 当前值
currentIndex 当前索引
array 数组

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
}, 10)

tips: 提供初始值通常更安全
如果提供initialValue，从索引0开始。如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。
如果数组仅有一个元素，并且没有提供initialValue，那么此唯一值将被返回并且callback不会被执行。

再看几个其他

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6