欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript數(shù)組reduce常見實(shí)例方法

 更新時(shí)間：2022年05月18日 14:56:22   作者：沉靜地閃光  
reduce方法在數(shù)組的每個(gè)元素上執(zhí)行用戶提供的回調(diào)函數(shù),即"reducer",它傳入對前一個(gè)元素進(jìn)行計(jì)算的返回值,結(jié)果是單個(gè)值,它是在數(shù)組的所有元素上運(yùn)行reducer的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce常見實(shí)例方法的相關(guān)資料,需要的朋友可以參考下

前言

對比map、 forEach、 filter 等數(shù)組方法，reduce比它們更強(qiáng)。

一、 reduce定義和用法

reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。

reduce() 可以作為一個(gè)高階函數(shù)，用于函數(shù)的 compose。

注意: reduce() 對于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

語法：

array.reduce(function(prev, cur, index, arr), init)

  • prev （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
  • cur （數(shù)組中當(dāng)前被處理的元素）
  • index （當(dāng)前元素在數(shù)組中的索引)
  • arr （調(diào)用的數(shù)組）
  • init （傳遞給函數(shù)的初始值）

二、reduce瀏覽器支持情況

三、reduce累加

帶初始值

var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {
    return pre + item
}, 10)
console.log(sum) // 20

不帶初始值

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

四、reduce數(shù)組去重

var arr = [1,2,3,3,2,1,4]
arr.reduce((acc, cur) => {
  if (!(acc.includes(cur))) {
    acc.push(cur)
  }
  return acc
}, [])
// [1, 2, 3, 4]

五、reduce求數(shù)組項(xiàng)最大值

var arr = [1, 2, 3, 4];
arr.reduce((prev, cur) => {
    return Math.max(prev,cur);
});
//4

六、reduce將二維數(shù)組轉(zhuǎn)為一維數(shù)組

var arr = [[1,2], [3,4], [5,6]]
arr.reduce((acc, cur) => {
  return acc.concat(cur)
}, [])
// [1,2,3,4,5,6]

七、reduce對象里的屬性求和

var arr = [
    {subject: 'Math', score: 90},
    {subject: 'Chinese', score: 90},
    {subject: 'English', score: 100}
]
arr.reduce((pre, cur) => {
    return cur.score + pre
}, 0)
//280

八、reduce計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的個(gè)數(shù)

var arr = [1, 2,3,3,2,1,2,1]
arr.reduce((acc, cur) => {
  if (!(cur in acc)) {
    acc[cur] = 1
  } else {
    acc[cur] += 1
  }
  return acc
}, {})
//{1: 3, 2: 3, 3: 2}

九、reduce按屬性給數(shù)組分類

var arr = [
    {subject: 'Math', score: 90},
    {subject: 'Chinese', score: 90},
    {subject: 'English', score: 100},
    {subject: 'Math', score: 80},
    {subject: 'Chinese', score: 95}
];
arr.reduce((acc, cur) => {
  if (!acc[cur.type]) {
    acc[cur.type] = [];
  }
  acc[cur.type].push(cur)
  return acc
}, {})

十、reduce實(shí)現(xiàn)map

var arr = [1, 2, 3, 4]
Array.prototype.reduceMap = function(callback) {
  return this.reduce((acc, cur, index, array) => {
    const item = callback(cur, index, array)
    acc.push(item)
    return acc
  }, [])
}
arr.reduceMap((item, index) => {
  return item + index
})
// [1, 3, 5, 7]

十一、reduce實(shí)現(xiàn)forEach

var arr = [1, 2, 3, 4]
Array.prototype.reduceForEach = function(callback) {
  this.reduce((acc, cur, index, array) => {
    callback(cur, index, array)
  }, [])
}

arr.reduceForEach((item, index, array) => {
  console.log(item, index)
})
// 1234
// 0123

十二、reduce實(shí)現(xiàn)filter

var arr = [1, 2, 3, 4]
Array.prototype.reduceFilter = function (callback) {
   return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array)) {
      acc.push(cur)
    }
    return acc
  }, [])
}
arr.reduceFilter(item => item % 2 == 0) // 過濾出偶數(shù)項(xiàng)。
// [2, 4]

十三、reduce實(shí)現(xiàn)find

var arr = [1, 2, 3, 4]
var obj = [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }]
Array.prototype.reduceFind = function (callback) {
  return this.reduce((acc, cur, index, array) => {
    if (callback(cur, index, array)) {
      if (acc instanceof Array && acc.length == 0) {
        acc = cur
      }
    }    
    if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {
      acc = undefined
    }
    return acc
  }, [])
}
arr.reduceFind(item => item % 2 == 0) // 2
obj.reduceFind(item => item.a % 2 == 0) // {a: 2}
obj.reduceFind(item => item.a % 9 == 0) // undefined

碰到數(shù)組復(fù)雜操作的時(shí)候，就是reduce大顯身手的時(shí)候。深入研究reduce的用法，對開發(fā)大有裨益。

總結(jié)

到此這篇關(guān)于JavaScript數(shù)組reduce常見實(shí)例的文章就介紹到這了,更多相關(guān)js數(shù)組reduce實(shí)例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論