淺談js中reduce方法

mingzhong 發布于2019-08-26 10:40 / 909人閱讀

摘要：介紹方法接收一個函數作為累加器為數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數初始值上一次回調的返回值，當前元素值，當前索引，原數組。

介紹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方法中變量前置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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