1. 程式人生 > >es6 reduce的用法

es6 reduce的用法


一、forEach
回撥函式引數,item(陣列元素)、index(序列)、arr(陣列本身)
迴圈陣列,無返回值,不改變原陣列
不支援return操作輸出,return只用於控制迴圈是否跳出當前迴圈

二、includes
判斷陣列是否包含某個元素,不用return,不用回撥函式,返回布林值

三、filter
使用return操作輸出,會迴圈陣列每一項,並在回撥函式中操作
返回滿足條件的元素組成的陣列,不改變原陣列

四、map
輸出的是return什麼就輸出什麼新陣列
原陣列被“對映”成對應新陣列,返回新陣列,不改變原陣列

五、find
用來查詢目標元素,找到就返回該元素,找不到返回undefined
輸出的是一旦判斷為true則跳出迴圈輸出符合條件的陣列元素

六、some
返回布林值,遇到滿足條件變跳出迴圈

七、every
返回布林值,遇到不滿足條件跳出迴圈

八、reduce
累加器,輸出的是return疊加什麼就輸出什麼
回撥函式引數四個
pre: 初始值(之後為上一操作的結果)
cur: 當前元素之
index: 當前索引
arr: 陣列本身
主要有以下幾種用法:
1.陣列求和
[1,2,3,4].reduce((pre, cur) => pre + cur)//10
2.二維陣列轉為一維陣列
[[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => [...acc, ...cur], [])//[1, 2, 3, 4, 5, 6]
3.計算陣列中每個元素出現的次數
const arraySum = (arr, val) => arr.reduce((acc, cur) => {
return cur == val ? acc + 1 : acc + 0
}, 0);
let arr = [1, 2, 3, 4, 5];
arraySum(arr, 0) //3
4.代替filter和map的組合
const characters = [
{ name: 'ironman', env: 'marvel' },
{ name: 'black_widow', env: 'marvel' },
{ name: 'wonder_woman', env: 'dc_comics' },
];

console.log(
characters
.filter(character => character.env === 'marvel')
.map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
);
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]

console.log(
characters
.reduce((acc, character) => {
return character.env === 'marvel'
? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
: acc;
}, [])
)
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]

參考:
1.https://blog.csdn.net/kingan123/article/details/79818566
2.https://juejin.im/post/5b8d0a74f265da431d0e7ec0
3.https://www.cnblogs.com/cckui/p/9267542.html