一、一图胜千言


前端开发中,js数组处理是最常用的,除了for循环外,随着es6的普及,像reduce()、filter()、map()、some()、every()以及…展开属性都是最常用到的。
今天偶然从网上看到这张图,真是眼前一亮,真是一目了然,不用一句解释就让人了解相关函数的用途

二、重点函数说明


1、map和forEach


map跟forEach功能类似, 但是map有返回值,产生一个新的数组,不改变原来数组,forEach没有返回值

  • map:让数组通过计算产生新的数组
  • forEach:让数组的每一项执行一次操作
  • const a = [1, 2, 3];
    const b = a.map(x => x * 2);
    let c=a.forEach(x=>x*2)
    console.log(a,b,c);

    输出结果:> Array [1, 2, 3] Array [2, 4, 6] undefined

    2、filter (过滤)

    返回满足条件的新数组,不影响原数组

  • 返回值:Array
  • const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);
    console.log('原值',words);
    console.log('结果',result);
    -------------------------------
    > "原值" Array ["spray", "limit", "elite", "exuberant", "destruction", "present"]
    > "结果" Array ["exuberant", "destruction", "present"]

    3、some(任意)、every(全部)

  • 返回值:Boolean
  • every:判断每一个元素是否全部满足条件, 有的话返回true, 否则false
  • some:判断每一个元素是否有任意一个满足条件, 有的话返回true, 否则false
  • console.log([1, undefined, 1].some((x) => x !== 1)); // true
    console.log([1, 30, 39, 29, 10, 13].every(x=>x<40)); // true

    4、reduce (累计)

    reduce()方法在数组的每个元素上依次执行用户提供的“reducer”回调函数,并传入前一个元素上的计算返回值,最终计算为一个值

    arr.reduce(callback,[initialValue])

  • callback 要为数组中的每个元素执行的函数。它的返回值在下次调用时成为参数的值。对于最后一次调用,返回值变做为最终的返回值
  • initialValue(可选参数) 当设置了initialValue参数时,callback 第一个参数 初始值将默认是 initialValue。
  • const array = [15, 16, 17, 18, 19];
    function reducer(accumulator, currentValue, index) {
      const returns = accumulator + currentValue;
      console.log(
        `accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`,
      return returns;
    array.reduce(reducer);

    默认值的作用

    如果组件为空时,不设置默认值,调用reduce会报错,但是设置了默认值后,可以正常执行

    var  arr = [];
    var sum = arr.reduce(function(prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    console.log(arr,sum) // Error: Reduce of empty array with no initial value
    var sumDefault = arr.reduce(function(prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    console.log(arr,sumDefault) // Array[] 0

    1、组求和,求乘积,比较等

    const  arr = [1, 2, 3, 4];
    const sum = arr.reduce((x,y)=>x+y)
    const mul = arr.reduce((x,y)=>x*y)
    var max = arr.reduce(function (prev, cur) {
        return Math.max(prev,cur);
    console.log( sum ); //求和,10
    console.log( mul ); //求乘积,24
    console.log( max ); //max=4

    2、数组去重、过滤以及实现filter、map等联合功能

    let  arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    let newArr = arr.reduce(function (prev, cur) {
        cur>3 && !prev.some((x)=>x==cur*2) && prev.push(cur*2) ;
        return prev;
    },[]);
    console.log(newArr) // [8, 10, 8]

    3、函数组合

    const reverse = arr => arr.reverse()
    const first = arr => arr[0]
    const toUpper = s => s.toUpperCase()
    // 函数组合
    function compose(...funs) {
        if (funs.length === 0) {
            return arg => arg;
        if (funs.length === 1) {
           return funs[0];
        return funs.reduce((a, b) => (...arg) => a(b(...arg)))
    var arr = ['one', 'two', 'three'];
    // 执行组合函数
    let fu=compose(toUpper, first, reverse)
    console.log(fu(arr))  // THREE