ES6语法新特性之----数组Map和数组reduce

最新推荐文章于 2023-08-29 18:58:17 发布

咸鱼_翻身

最新推荐文章于 2023-08-29 18:58:17 发布

阅读量381

点赞数 2

分类专栏： ES6语法新规则文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/aaa123_456aaa/article/details/121221383

版权

ES6语法新规则专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.先看数组map的简单使用

a.数组map自带循环
b.处理的值回填对应的位置

<!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>Document</title>
</head>
<body>
    <script>
        //想对arr数组中的每个元素都乘2
        let arr = [1,2,3,4,5,6,7,8,9];
        
        //首先我们来看传统的方式
        let newarr = [];
        for(let i=0;i<arr.length;i++){
            newarr.push(arr[i]*2);
        }
        console.log(newarr);

        //我们再来看map是如何实现的
        let newarr2 =  arr.map(function(ele){
            return ele*2;
        })
        console.log(newarr2);

        //那么我们再来简化一下，简化规则请看我之前的ES6新特性的文章
        let newarr3 =  arr.map(ele => ele*2);
        console.log(newarr3);
    </script>
</body>
</html>

在这里插入图片描述

2.我们再来看数组map处理对象数据

<!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>Document</title>
</head>
<body>
    <script>
         //map处理对象的数据
        var users = [{name:"java入门到自学",age:18},{name:"ssm",age:19},{name:"springBoot",age:20}];
        var newusers =  users.map(function(ele){
            ele.age = ele.age + 1;
            return ele;
        });
        console.log(newusers);

        //我们再来简化一下
        var users2 = [{name:"java入门到自学",age:18},{name:"ssm",age:19},{name:"springBoot",age:20}];
        var newusers2 =  users2.map(ele=>{
            //有逻辑体，不能省略大括号
            ele.age = ele.age + 1;
            return ele;
        });
        console.log(newusers2);        
    </script>
</body>
</html>

在这里插入图片描述

3.当然我们也可以给对象临时加一个属性，这个在实际的开发中会频繁的使用到。

        var users2 = [{name:"java入门到自学",age:18},{name:"ssm",age:19},{name:"springBoot",age:20}];
        var newusers2 =  users2.map(ele=>{
            //有逻辑体，不能省略大括号
            ele.age = ele.age + 1;
            ele.check = true;
            return ele;
        });

在这里插入图片描述

4.我们再来看数组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>Document</title>
</head>
<body>
    <script>
        //1.先看看传统的方法
        var arr = [1,2,3,4,5,6];
        /*原理就是，先取出 a = 1,b = 2,然后进行相加，结果为3然后再放入数组，
        此时应该为arr = [3,3,4,5,6],之后取出a = 3,b = 4,再进行相加，填入
        反复循环之后，取出最终的结果*/
        var newarr = arr.reduce(function(a,b){
            return a + b;
        });
        console.log("结果为=======>" + newarr);

        //2.我们再来简化一下
        var newarr2 = arr.reduce((a,b)=>a + b);
        console.log("结果为=======>" + newarr2);

    </script>
</body>
</html>

在这里插入图片描述

咸鱼_翻身

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6语法新特性之----数组Map和数组reduce

1.先看数组map的简单使用a.数组map自带循环b.处理的值回填对应的位置<!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, in
复制链接

扫一扫