乐趣区

关于javascript:JavaScript-数组reduce实例方法

jiezi

比照map、forEach、filter 等数组办法，reduce 比它们更强。

一、reduce 定义和用法

reduce() 办法接管一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 能够作为一个高阶函数，用于函数的 compose。

留神: reduce() 对于空数组是不会执行回调函数的。

语法：

array.reduce(function(prev, cur, index, arr), init)

  • prev（上一次调用回调返回的值，或者是提供的初始值（initialValue））
  • cur（数组中以后被解决的元素）
  • index（以后元素在数组中的索引)
  • arr（调用的数组）
  • init（传递给函数的初始值）

二、reduce 浏览器反对状况

三、reduce 累加

带初始值

var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {return pre + item}, 10)
console.log(sum) // 20

不带初始值

var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {return pre + item},)
console.log(sum) // 10

四、reduce 数组去重

var arr = [1,2,3,3,2,1,4]
arr.reduce((acc, cur) => {if (!(acc.includes(cur))) {acc.push(cur)
  }
  return acc
}, [])
// [1, 2, 3, 4]

五、reduce 求数组项最大值

var arr = [1, 2, 3, 4];
arr.reduce((prev, cur) => {return Math.max(prev,cur);
});
//4

六、reduce 将二维数组转为一维数组

var arr = [[1,2], [3,4], [5,6]]
arr.reduce((acc, cur) => {return acc.concat(cur)
}, [])
// [1,2,3,4,5,6]

七、reduce 对象里的属性求和

var arr = [{subject: 'Math', score: 90},
    {subject: 'Chinese', score: 90},
    {subject: 'English', score: 100}
]
arr.reduce((pre, cur) => {return cur.score + pre}, 0)
//280

八、reduce 计算数组中每个元素呈现的个数

var arr = [1, 2,3,3,2,1,2,1]
arr.reduce((acc, cur) => {if (!(cur in acc)) {acc[cur] = 1
  } else {acc[cur] += 1
  }
  return acc
}, {})
//{1: 3, 2: 3, 3: 2}

九、reduce 按属性给数组分类

var arr = [{subject: 'Math', score: 90},
    {subject: 'Chinese', score: 90},
    {subject: 'English', score: 100},
    {subject: 'Math', score: 80},
    {subject: 'Chinese', score: 95}
];
arr.reduce((acc, cur) => {if (!acc[cur.type]) {acc[cur.type] = [];}
  acc[cur.type].push(cur)
  return acc
}, {})

十、reduce 实现 map

var arr = [1, 2, 3, 4]
Array.prototype.reduceMap = function(callback) {return this.reduce((acc, cur, index, array) => {const item = callback(cur, index, array)
    acc.push(item)
    return acc
  }, [])
}
arr.reduceMap((item, index) => {return item + index})
// [1, 3, 5, 7]

十一、reduce 实现 forEach

var arr = [1, 2, 3, 4]
Array.prototype.reduceForEach = function(callback) {this.reduce((acc, cur, index, array) => {callback(cur, index, array)
  }, [])
}

arr.reduceForEach((item, index, array) => {console.log(item, index)
})
// 1234
// 0123

十二、reduce 实现 filter

var arr = [1, 2, 3, 4]
Array.prototype.reduceFilter = function (callback) {return this.reduce((acc, cur, index, array) => {if (callback(cur, index, array)) {acc.push(cur)
    }
    return acc
  }, [])
}
arr.reduceFilter(item => item % 2 == 0) // 过滤出偶数项。// [2, 4]

十三、reduce 实现 find

var arr = [1, 2, 3, 4]
var obj = [{a: 1}, {a: 2}, {a: 3}, {a: 4}]
Array.prototype.reduceFind = function (callback) {return this.reduce((acc, cur, index, array) => {if (callback(cur, index, array)) {if (acc instanceof Array && acc.length == 0) {acc = cur}
    }    
    if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {acc = undefined}
    return acc
  }, [])
}
arr.reduceFind(item => item % 2 == 0) // 2
obj.reduceFind(item => item.a % 2 == 0) // {a: 2}
obj.reduceFind(item => item.a % 9 == 0) // undefined

碰到数组简单操作的时候，就是 reduce 大显神通的时候。深入研究 reduce 的用法，对开发大有裨益。

退出移动版