|
reduce方法详解看官方：MDN reduce
以下为reduce方法常用情况，包括部分和数组，计算元素出现个数，数组去重，二维数组转一维数组，多维数组转一维数组，对象里属性求和。
多练几次就可以熟练运用reduce方法啦！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>accumulate</title>
</head>
<script type="text/javascript">
(function(){
//1.部分和数组
const arr1 = [1,2,3,4,5,6];
const accumulate = (arr) =>
arr.reduce((preArr,curValue) => [...preArr, curValue + (preArr.slice(-1)[0] || 0)] ,[]);
// console.log('accumulate', accumulate(arr1));
//2.计算元素出现个数
// （1）关键字 in 判断对象是否是数组/对象的元素/属性
// （2）for in 和 for of 的区别
// for in 遍历对象 遍历的是数组的索引key(string类型的数字)不可进行运算，且遍历顺序不一定是内部的实际顺序
// for of 遍历数组 遍历数组元素值
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bruce','Bruce'];
const nameNum = names.reduce((pre,cur) => {
if(cur in pre) {
pre[cur] ++;
}else {
pre[cur] = 1;
}
return pre
},{})
// console.log('nameNum', nameNum);
//3.数组去重
// includes 和 in： 数组用includes 对象Map用in
// concat 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
let arr = [1,2,3,4,4,4,1]
let newArr = arr.reduce((pre, cur) => {
if(!pre.includes(cur)){
return pre.concat(cur);
}else{
return pre;
}
},[])
// console.log('newArr', newArr);
//4.将二维数组转化为一维数组
let arr2 = [[0, 1], [2, 3], [4, 5]]
let newArr2 = arr2.reduce((pre, cur) => {
return pre.concat(cur);
},[])
// console.log('newArr2', newArr2);
// 5.将多维数组转化为一维数组
let arr3 = [[0, 1], [2, 3], [4,[5,6,7]]]
let newArr3 = function(arr){
return arr.reduce((pre, cur) => {
// console.log(cur)
return pre.concat(Array.isArray(cur)?newArr3(cur):cur);
}, []);
}
console.log(newArr3(arr3))
//这种方案是十分的麻烦的，我们可以用join方法代替
//join: 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串
//split:方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
//map:方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值
console.log(arr3.join().split(',').map(Number))
//6.对象里属性求和
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
let result1 = result.reduce((pre, cur)=>{
return pre + cur.score;
},0)
console.log(result1)
})()
</script>
<body>
</body>
</html>
|