前端ES6(4)——map+reduce

最新推荐文章于 2022-10-07 15:05:15 发布

Java小生不才

最新推荐文章于 2022-10-07 15:05:15 发布

阅读量160

点赞数

分类专栏： html 文章标签：前端 es6

本文链接：https://blog.csdn.net/qq_41596346/article/details/121002124

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中新增的map和reduce方法，map用于数组元素处理并创建新数组，reduce则用于对数组元素进行累加或其它操作。通过实例演示了如何使用这两个函数实现元素乘以2和求和。

摘要由CSDN通过智能技术生成

数组中新增了map和reduce方法

1.map

接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map和reduce</title>
</head>
<body>
    <script>
        //数组中新增了map和reduce方法。
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        let arr = ['1', '20', '-5', '3'];
        //  arr = arr.map((item)=>{
        //     return item*2
        //  });
        arr = arr.map(item => item * 2);
        console.log(arr);
    </script>
</body>

</html>

在这里插入图片描述

2.reduce

语法：arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
initialValue （作为第一次调用 callback )

 //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
 //[2, 40, -10, 6]
  //arr.reduce(callback,[initialValue])
  /**
   1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
   2、currentValue （数组中当前被处理的元素）
   3、index （当前元素在数组中的索引）
   4、array （调用 reduce 的数组）*/
  let result = arr.reduce((a, b) => {
      console.log("上一次处理后：" + a);
      console.log("当前正在处理：" + b);
      return a + b;
  }, 100);
  console.log(result)

在这里插入图片描述

3.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map和reduce</title>
</head>

<body>
    <script>
        //数组中新增了map和reduce方法。
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        let arr = ['1', '20', '-5', '3'];

        //  arr = arr.map((item)=>{
        //     return item*2
        //  });
        arr = arr.map(item => item * 2);
        console.log(arr);


        //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //[2, 40, -10, 6]
        //arr.reduce(callback,[initialValue])
        /**
         1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
         2、currentValue （数组中当前被处理的元素）
         3、index （当前元素在数组中的索引）
         4、array （调用 reduce 的数组）*/
        let result = arr.reduce((a, b) => {
            console.log("上一次处理后：" + a);
            console.log("当前正在处理：" + b);
            return a + b;
        }, 100);
        console.log(result)
    </script>
</body>
</html>