亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript中的reduce方法執(zhí)行過程、使用場景及進階用法

 更新時間：2025年02月21日 10:21:39   作者：酒釀泡芙1217  
這篇文章主要介紹了JavaScript中的reduce方法執(zhí)行過程、使用場景及進階用法的相關資料,reduce是JavaScript中用于累積計算數組元素的重要方法,它接受一個回調函數和一個初始值,返回一個計算結果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 什么是reduce

reduce 方法是 JavaScript 中數組的重要方法之一，用于對數組中的元素進行累積計算。它接收一個回調函數作為參數，并返回一個最終計算結果。reduce 在許多場景下都非常有用，比如求和、數組扁平化、對象計數、數據轉換等。

2. reduce語法

2.1 語法

arr.reduce(callback, initialValue)

2.2 參數說明

  • callback(accumulator, currentValue, currentIndex, array)：回調函數，接受四個參數：
    • accumulator：上一次callback執(zhí)行后的返回值
    • currentValue：當前值
    • currentIndex：當前元素在數組中的索引
    • array：原數組（正在遍歷的數組）
  • initialValue（可選）：累加器的初始值
    • 如果提供，則accumulator從initialValue開始
    • 如果沒有提供，則取數組的第一個元素

3. reduce執(zhí)行過程

3.1 執(zhí)行過程

reduce 方法會遍歷數組的每個元素，并對其應用回調函數。其執(zhí)行流程如下：

  • 初始化 accumulator：如果提供了 initialValue，則 accumulator 取 initialValue，否則取數組的第一個元素，并跳過該元素。
  • 遍歷數組：從索引 0（如果有 initialValue）或 1（如果沒有 initialValue）開始，依次執(zhí)行 callback，并更新 accumulator。
  • 返回最終的 accumulator 值。

3.2 示例

const numbers = [1, 2, 3, 4];
const result = numbers.reduce((acc, cur, index) => {
  console.log(`累加器: ${acc}, 當前值: ${cur}, 索引: ${index}`);
  return acc + cur;
}, 0);
console.log('最終結果:', result);

執(zhí)行結果如下：

累加器: 0, 當前值: 1, 索引: 0
累加器: 1, 當前值: 2, 索引: 1
累加器: 3, 當前值: 3, 索引: 2
累加器: 6, 當前值: 4, 索引: 3
最終結果: 10

4. reduce使用場景

4.1 數組求和

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 輸出 15

4.2 統計數組中元素出現的次數

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

4.3 計算數組中對象的某個屬性總和

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 300 }
];
const totalPrice = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalPrice); // 輸出 1800

5. reduce進階用法

5.1 按屬性分組數據

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 }
];
const groupedByAge = people.reduce((acc, person) => {
  (acc[person.age] = acc[person.age] || []).push(person);
  return acc;
}, {});
console.log(groupedByAge);
// 輸出：
// {
//   25: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }],
//   30: [{ name: 'Bob', age: 30 }, { name: 'David', age: 30 }]
// }

5.2 計算嵌套對象的總和

const orders = [
  { customer: 'Alice', total: 50 },
  { customer: 'Bob', total: 30 },
  { customer: 'Alice', total: 20 }
];
const customerTotals = orders.reduce((acc, order) => {
  acc[order.customer] = (acc[order.customer] || 0) + order.total;
  return acc;
}, {});
console.log(customerTotals); 
// 輸出：{ Alice: 70, Bob: 30 }

5.3 組合多個reduce進行復雜計算

const data = [
  { category: 'A', value: 10 },
  { category: 'B', value: 20 },
  { category: 'A', value: 15 },
  { category: 'B', value: 25 }
];
const aggregatedData = data.reduce((acc, item) => {
  acc[item.category] = (acc[item.category] || []).concat(item.value);
  return acc;
}, {});

const summedData = Object.keys(aggregatedData).reduce((acc, key) => {
  acc[key] = aggregatedData[key].reduce((sum, num) => sum + num, 0);
  return acc;
}, {});

console.log(summedData); // 輸出：{ A: 25, B: 45 }

6. 手寫reduce實現

Array.prototype.myReduce = function(callback,initialValue){
    const arr = this;    // 獲取調用reduce的數組
    
    if(typeof callback !== "function"){    // 驗證回調函數是否傳入
        throw new TypeError(`${callback} is not a function`);
    }
    
    let accumulator;    // 累加器
    let startIndex;    // 數組遍歷起始位置

    if(initialValue!==undefined){    // 判斷是否傳遞了初始值
        accumulator = initialValue;
        startIndex = 0;
    }else{
        // 如果沒有提供初始值，則將第一個數組元素作為累加器的初始值
        if(arr.length===0){
            throw new TypeError(`Reduce of empty array with on initial value`);
        }
        accumulator = arr[0];
        startIndex = 1;
    }
    // 遍歷數組并應用回調函數
    for(let i=startIndex;i<arr.length;i++){
        accumulator = callback(accumulator,arr[i],i,arr);
    }
    // 返回累加結果
    return accumulator
}

const numbers = [1,2,3,4,5];
const sum = numbers.myReduce((acc,curr)=>acc+curr,0)   // 15
const product = numbers.myReduce((acc,curr)=>acc*curr)   // 120

總結 

到此這篇關于JavaScript中的reduce方法執(zhí)行過程、使用場景及進階用法的文章就介紹到這了,更多相關JS中reduce方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • javascript事件函數中獲得事件源的兩種不錯方法

    javascript事件函數中獲得事件源的兩種不錯方法

    許多情況我們需要獲得事件源對象來對其屬性進行更改,在事件響應函數中獲得事件源的方法有如下兩種
    2014-03-03
  • 在layui.use 中自定義 function 的正確方法

    在layui.use 中自定義 function 的正確方法

    今天小編就為大家分享一篇在layui.use 中自定義 function 的正確方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • Axios+Spring?Boot實現文件上傳和下載

    Axios+Spring?Boot實現文件上傳和下載

    這篇文章主要為大家詳細介紹了Axios+Spring?Boot實現文件上傳和下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • javascript 學習筆記(onchange等)

    javascript 學習筆記(onchange等)

    javascript 學習筆記，一些簡單的小技巧，學習js的朋友可以看下。
    2010-11-11
  • Webpack優(yōu)化配置縮小文件搜索范圍

    Webpack優(yōu)化配置縮小文件搜索范圍

    這篇文章主要介紹了Webpack優(yōu)化-縮小文件搜索范圍的相關知識，文中較詳細的給大家介紹了可以優(yōu)化的途徑,需要的朋友可以參考下
    2017-12-12
  • JavaScript數據分析之交集,并集,對稱差集

    JavaScript數據分析之交集,并集,對稱差集

    這篇文章主要介紹了JavaScript數據分析之交集,并集,對稱差集，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
    2022-07-07
  • 微信小程序版本自動更新的方法

    微信小程序版本自動更新的方法

    這篇文章主要介紹了微信小程序版本自動更新的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • 千萬不要錯過的JavaScript高效對比數組差異方法

    千萬不要錯過的JavaScript高效對比數組差異方法

    前端開發(fā)中，我們通常需要對比兩個數組對象的差異。這其中有很多種方法，但是有些方法會帶來一些問題，所以本文為大家準備了一個高效方法，需要的可以參考一下
    2023-05-05
  • HTML+CSS+JavaScript實現簡單日歷效果

    HTML+CSS+JavaScript實現簡單日歷效果

    這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • 基于input框覆蓋掉數字英文的實例講解

    基于input框覆蓋掉數字英文的實例講解

    下面小編就為大家?guī)硪黄趇nput框覆蓋掉數字英文的實例講解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論