搜尋
首頁web前端前端問答es6中reduce()怎麼用
es6中reduce()怎麼用Jan 29, 2023 pm 06:35 PM
es6reduce()

在es6中,reduce()函數用於對數組中的每個元素從左到右依次執行一個由用戶提供的回調函數,並將其累積結果匯總為單個返回值;語法“ arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])」。 reduce()函數不會改變原始數組。

es6中reduce()怎麼用

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

es6 reduce()介紹

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

第一個參數: callback函數

#執行數組中每個值(如果沒有提供第二個參數initialValue ,則第一個值除外)的函數,包含四個參數:

  •  accumulator:累計回呼的傳回值; 它是上次呼叫回呼時傳回的累積值,或initialValue(見於下方)。 

  • currentValue:陣列中正在處理的元素。

  •  currentIndex可選 :陣列中正在處理的目前元素的索引。如果提供了initialValue,則起始索引號為0,否則從索引1起始。

  • array可選:呼叫reduce()的原始數組

第二個參數: initialValue可選

作為第一次呼叫callback函數時的第一個參數的值。如果沒有提供初始值,則將使用陣列中的第一個元素。注意: 在沒有初始值的空數組上呼叫 reduce 將會報錯。

這樣看起來會有點蒙,其實就是兩種情況:一種情況是給了第二個參數initialValue初始值;一種是沒提供初始值。

var arr = [1, 2, 3];
function reducer(parmar1, parmar2){
}
arr.reduce(reducer)

reduce是數組原型物件上的一個方法,可以幫助我們操作數組。它將另一個函數作為其參數,可以稱為reducer。

reducer 有兩個參數。第一個參數 param1 是最後一次 reducer 運行的結果。如果這是第一次運行 reducer,則 param1 的預設值是數組第一個元素的值。

reduce 方法循環遍歷數組中的每個元素,就像在 for 迴圈中一樣。並將循環中的目前值作為參數2。

遍歷完數組,reduce會傳回最後一個reducer計算的結果。

我們來看一個詳細的例子。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add)

es6中reduce()怎麼用

接下來,我們來探索一下上面的程式碼是如何執行的。

在這段程式碼中,reducer 是 add 。

首先,因為我們是第一次執行add,所以數組中的第一個元素'a'會被當作add的第一個參數,然後循環會從數組的第二個元素' b'開始。這次,'b' 是 add 的第二個參數。

es6中reduce()怎麼用

第一次計算後,我們得到結果'ab'。此結果將被快取並在下一次新增計算中用作 param1。同時,數組中的第三個參數'c'將用作add的param2。

es6中reduce()怎麼用

同樣,reduce 會繼續遍歷數組中的元素,運行 'abc' 和 'd' 作為 add 的參數。

es6中reduce()怎麼用

最後,遍歷陣列中最後一個元素後,傳回計算結果。

es6中reduce()怎麼用

現在我們有了結果:'abcde'。

所以,我們可以看到reduce也是一種遍歷陣列的方式!它依序取數組中每個元素的值並執行reducer函數。

但我們可以看到,上面的循環並沒有那種和諧的美感。因為我們把陣列的第一個元素,也就是'a'當作初始的param1,然後從陣列的第二個元素循環得到param2。

實際上,我們可以將reduce中的第二個參數指定為reducer函數的param1的初始值,這樣param2就會從陣列的第一個元素開始循環取得。

程式碼如下:

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add, 's')

es6中reduce()怎麼用

#

这一次,我们第一次调用reducer时将's'作为param1,然后从第一个元素开始依次遍历数组。

es6中reduce()怎麼用

所以我们可以使用这个语法来重写我们的第一个代码片段。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
   return x + y;
}
arr.reduce(add, '')

接下来,我们将进入实际编程章节,体验reduce的强大威力。

1、累加和累积乘法

如果我们想得到数组中所有元素的总和,你会怎么做?

一般来说,你可能会这样写:

function accumulation(arr) {
 let sum = 0;
 for (let i = 0; i < arr.length; i++) {
   sum = sum + arr[i];
 }
 return sum;
}

当然,你可能还有其他的写法,但是只要使用for循环,代码就会显得多余。

那我们看看上面的累加函数是做什么的:

  • 将初始总和设置为零
  • 取出数组中的第一个元素并求和
  • 在 sum 中缓存上一步的结果
  • 依次取出数组中的其他元素,进行上述操作
  • 返回最终结果

我们可以看到,当我们用文字描述上述步骤时,很明显它符合reduce的使用。所以我们可以使用reduce来重写上面的代码:

function accumulation(arr) {
 function reducer(x, y) {
   return x + y
 }
 return arr.reduce(reducer, 0);
}

如果你习惯使用箭头函数,上面的代码看起来会更简洁:

function accumulation(arr) {
 return arr.reduce((x, y) => x + y, 0);
}

一行代码搞定!

es6中reduce()怎麼用

当然,累积乘法和累加是完全一样的:

function multiplication(arr) {
   return arr.reduce((x, y) => x * y, 1);
}

很多时候,我们在求和的时候需要加上一个权重,这样更能体现reduce的优雅。

const scores = [
 { score: 90, subject: "HTML", weight: 0.2 },
 { score: 95, subject: "CSS", weight: 0.3 },
 { score: 85, subject: "JavaScript", weight: 0.5 }
];
const result = scores.reduce((x, y) => x + y.score * y.weight, 0); // 89

2、获取一个数组的最大值和最小值

如果要获取数组的最大值和最小值,可以这样写:

function max(arr){
 let max = arr[0];
 for (let ele of arr) {
   if(ele > max) {
     max = ele;
   }
 }
 return max;
}

这和以前一样,如果我们使用reduce,我们可以在一行代码中完成。

let arr = [3.24, 2.78, 999];
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

es6中reduce()怎麼用

3、计算数组中元素出现的频率

我们经常需要统计数组中每个元素出现的次数。reduce 方法可以帮助我们实现这一点。

function countFrequency(arr) {
 return arr.reduce(function(result, ele){
   // Judge whether this element has been counted before
   if (result.get(ele) != undefined) {
     /**
       * If this element has been counted before,
       * increase the frequency of its occurrence by 1
       */
     result.set(ele, result.get(ele) + 1)
   } else {
     /**
       * If this element has not been counted before,
       * set the frequency of its occurrence to 1
       */
     result.set(ele, 1);
   }
   return result;
 }, new Map());
}

注意,我们使用map对象而不是对象来存储统计后的频率,因为数组中的元素可能是对象类型,而对象的key只能是字符串或符号类型。

这里有两个例子:

es6中reduce()怎麼用

1es6中reduce()怎麼用

同样,如果要统计字符串中每个字符出现的频率,可以先将字符串转换为字符数组,然后按照上面的方法。

let str = &#39;helloworld&#39;;
str.split(&#39;&#39;).reduce((result, currentChar) => {
   result[currentChar] ? result[currentChar] ++ : result[currentChar] = 1;
    return result;                            
}, {})

1es6中reduce()怎麼用

因为字符类型可以用作对象的键,所以我们这里不使用 Map。

4、多个数组的展平

function Flat(arr = []) {
   return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}

1es6中reduce()怎麼用

通过reduce依次访问数组中的每个元素。如果我们发现元素还是一个数组,就递归调用 flat 方法。

【相关推荐:javascript视频教程web前端

以上是es6中reduce()怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6怎么判断是否为数组es6怎么判断是否为数组Apr 25, 2022 pm 06:43 PM

在es6中,可以利用“Array.isArray()”方法判断对象是否为数组,若判断的对象是数组,返回的结果是true,若判断对象不是数组,返回的结果是false,语法为“Array.isArray(需要检测的js对象)”。

es6中遍历跟迭代的区别是什么es6中遍历跟迭代的区别是什么Apr 26, 2022 pm 02:57 PM

es6中遍历跟迭代的区别是:遍历强调的是要把整个数据依次全部取出来,是访问数据结构的所有元素;而迭代虽然也是依次取出数据,但是并不保证取多少,也不保证把所有的数据取完,是遍历的一种形式。

es6中怎么判断两个对象是否相等es6中怎么判断两个对象是否相等Apr 19, 2022 pm 03:34 PM

在es6中,可用Object对象的is()方法来判断两个对象是否相等,该方法检测两个变量的值是否为同一个值,判断两个对象的引用地址是否一致,语法“Object.is(对象1,对象2)”;该方法会返回布尔值,若返回true则表示两个对象相等。

es6怎么将数字转为字符串es6怎么将数字转为字符串Apr 19, 2022 pm 06:38 PM

转换方法:1、利用“+”给数字拼接一个空字符,语法“数字+""”;2、使用String(),可把对象的值转换为字符串,语法“String(数字对象)”;3、用toString(),可返回数字的字符串表示,语法“数字.toString()”。

es6中assign的用法是什么es6中assign的用法是什么May 05, 2022 pm 02:25 PM

在es6中,assign用于对象的合并,可以将源对象的所有可枚举属性复制到目标对象;若目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性,语法为“Object.assign(...)”

es6怎么改变数组数据es6怎么改变数组数据Apr 26, 2022 am 10:08 AM

改变方法:1、利用splice()方法修改,该方法可以直接修改原数组的内容,语法为“数组.splice(开始位置,修改个数,修改后的值)”;2、利用下标访问数组元素,并重新赋值来修改数组数据,语法为“数组[下标值]=修改后的值;”。

sort排序是es6中的吗sort排序是es6中的吗Apr 25, 2022 pm 03:30 PM

sort排序是es6中的;sort排序是es6中用于对数组的元素进行排序的方法,该方法默认不传参,按照字符编码顺序进行排序,排序顺序可以是字母或数字,并按升序或降序,语法为“array.sort(callback(a,b))”。

import as在es6中的用法是什么import as在es6中的用法是什么Apr 25, 2022 pm 05:19 PM

在es6中,import as用于将若干export导出的内容组合成一个对象返回;ES6的模块化分为导出与导入两个模块,该方法能够将所有的导出内容包裹到指定对象中,语法为“import * as 对象 from ...”。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具