js中reduce方法详解以及使用

最新推荐文章于 2024-01-14 09:34:52 发布

七十一Li

最新推荐文章于 2024-01-14 09:34:52 发布

阅读量1.8k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43507104/article/details/123382120

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>