浅谈js中reduce方法

mingzhong 发布于2019-08-26 10:40 / 877人阅读

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

介绍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分类
             });

GPU云服务器云服务器 reduce方法数组方法reduce js中数据排序方法 js方法中变量前置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106568.html

浅谈JS中 reduce() 的用法

摘要：一语法其中，表示将要原数组表示上一次调用回调时的返回值，或者初始值表示当前正在处理的数组元素表示当前正在处理的数组元素的索引，若提供值，则索引为，否则索引为表示初始值。一、语法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示将要原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表...

gplane 2019-08-23 16:41 评论0 收藏0
浅谈vuex

摘要：概念浅谈是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。更改的中的状态的唯一方法，类似。允许我们将分割成模块。通过购物车的一个案列，把vuex学习了一篇。 vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以...

chaos_G 2019-08-23 13:50 评论0 收藏0
浅谈Flux架构及Redux实践

摘要：在讲述之前，我们看看之前传统的架构以及在前端中的一些问题继而思考带来的改变。按照官方的描述，其中和体现了它的作用。实践我们通过一个非常简单的计数器来梳理的数据流。 Flux概述 Flux是Facebook用来构建用户端的Web应用程序的体系架构，与其它形式化的框架相比，它更像是一个架构思想，用于管理和控制应用中数据的流向。这里应用中的数据指包括但不限于来自服务端的数据页面中view的一...

Juven 2019-08-20 10:35 评论0 收藏0
浅谈js中的遍历

摘要：这几个方法会完整地遍历数组，即使在满足条件后，循环依旧进行。如果要同时遍历索引和项上述都是遍历数组的方法，这个是遍历对象的方法，并且最好不要混用遍历是程序中必不可少的一环，在所有语言中都存在，因为它可以简化人们的规律性操作，本文将一一道来。 for++ 这是最基础的for循环语句，格式如下： var arr = [1, 2, 3, 4, 5] for (var i =...

X1nFLY 2019-08-23 12:14 评论0 收藏0
浅谈Redux（之一)：Middleware原理

摘要：作为目前最火的模式实现之一，它有很多的点值得研究。这个函数既然要用于，也就是说它接收一个形式为的函数，对其一层层嵌套形式为。这个会在开始时发起一个，并在这个时发起另一个成功或失败的。为了方便起见，会返回这个让调用者可以等待。 Redux作为目前最火的Flux模式实现之一，它有很多的点值得研究。今天我们首先来看看它的Middleware。熟悉Express或者koa的朋友对Middle...

cocopeak 2019-08-22 10:34 评论0 收藏0