关闭

js中reduce()方法

时间: 2019-08-08阅读: 6337标签: 函数

介绍reduce

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组。

语法:arr.reduce(callback,[initialValue])
callback:函数中包含四个参数
- previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
- currentValue (数组中当前被处理的元素)
- index (当前元素在数组中的索引)
- array (调用的数组)
 
initialValue (作为第一次调用 callback 的第一个参数。)


简单应用

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


案例

根据对象里面的某一项属性分类,如下效果所示:


let arr = [{index:0},{index:0},{index:1},{index:2},{index:2}];
let res = arr.reduce((pre,item)=>{
 let temp = [];
 pre.forEach((val)=>{
  if(val&&val.length) {
   if(val[0].index==item.index) {
    val.push(item);
    return pre;
   }
  }
 })
 temp.push(item);
 pre.push(temp);
 return pre;
},[]);

结果如下:



不使用reduce实现上述需求:

groupBy(array, f) {
    let groups = {};
    array.forEach(function(o) {
        let group = jsON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
    });
    return Object.keys(groups).map(function(group) {
        return groups[group];
    });
};

let sorted = this.groupBy(this.arr, function(item){
                return [item.index];   //根据对象里面的每一项的index分类
             });

1

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/4612

css中calc()函数

css3中函数:用于动态计算长度值。(注意事项:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px));任何长度值都可以使用calc()函数进行计算;

函数式编程术语及示例

函数式编程有许多优势,由此越来越受欢迎。然而每个编程范式 (paradigm) 都有自己唯一的术语,函数式编程也不例外。我们提供一张术语表,希望使你学习函数式编程变得容易些。

工作中常用的JavaScript函数片段

返回已 size 为长度的数组分割的原数组;检查数组中某元素出现的次数;扁平化数组默认 depth 全部展开;对比两个数组并且返回其中不同的元素

eval到底哪里不好?

为什么要少用eval?eval是 js 中一个强大的方法。都说eval == evil等于true,这篇文章将研讨eval的几个缺点和使用注意事项。

JavaScript全局属性和全局函数

调用上面的全局函数而不是全局方法的属性是有意义的,因为函数是全局调用的,而不是任何对象。 无论如何,您也可以调用这些函数方法,因为它们是运行它们的全局对象的方法。在web浏览器中,全局对象是浏览器窗口

js之惰性函数

惰性函数是js函数式编程的另一个应用,惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,他的应用情景在于当我们遇到一个需要判断场景去调用不同的方法时,避免重复进入函数内的if判断,也就是说if判断只进行一次,之后函数就会被分支里的代码替换掉

什么时候不能使用箭头函数?

JS中对象方法的定义方式是在对象上定义一个指向函数的属性,当方法被调用的时候,方法内的this就会指向方法所属的对象:定义字面量方法、定义原型方法、定义事件回调函数、定义构造函数、追求过短的代码

10个非常实用的Js工具函数

生成一周时间new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环,类型判断判断核心使用Object.prototype.toString,这种方式可以准确的判断数据类型。

javascript构造函数

提起构造函数,我们需要从JS的创建对象开始,JS的创建对象有两种方式,一种是对象字面量法(把一个对象的属性和方法一一罗列出来),对象字面量法有一个明显的不足在于它不适合批量的或者是构建大量的类似或者重复的对象

浅谈async函数await用法

async和await相信大家应该不陌生,让异步处理变得更友好。其实这玩意儿就是个Generator的语法糖,想深入学习得去看看Generator,不然你可能只停留在会用的阶段。用法很简单,看代码吧。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!