ES6新特性:map和reduce

简介: ES6新特性:map和reduce

说明


ES6中,数组新增了map和reduce方法。


1.map()


map() :接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。


代码示例:


有一个字符串数组,我们希望转为int数组


let arr = ['1', '20', '-5', '3'];
console.log(arr)
//传统写法
let newArr = arr.map(function(s) {
  return parseInt(s);
});
console.log(newArr); //输出[1,20,-5,3]
//箭头函数
let newArr2 = arr.map(s => parseInt(s));
console.log(newArr2) //输出[1,20,-5,3]



2.reduce()


reduce() :接收一个函数(必须)和一个初始值(可选),该函数接收两个参数。下面我们详细的来看一下:


函数原型:


reduce(callback, initialValue)


函数参数:


  • callback是上一次reduce处理的结果:


callback四个参数分别是: 上一次结果值、当前元素、当前索引、原数组


  • initialValue是数组中要处理的下一个元素


函数作用机制:


reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce 的第一个参数。如果是第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数。


代码示例:


let arr = ['1', '20', '-5', '3']
arr = arr.map(item => item*2);
console.log(arr);
let result = arr.reduce((a, b) => {
    console.log('上一次计算结果值: '+a);
    console.log('当前数值: '+b);
  console.log('当前return的值(a+b):'+(a+b));
    return a+b;
}, 100);
console.log(result);



综合案例


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ES6新特性学习-(9)-扩展运算符</title>
  </head>
  <body>
    <script>
      //ES6中,数组新增了map和reduce方法。
      //1.map() :接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。 
      //举例:有一个字符串数组,我们希望转为int数组
      let arr = ['1', '20', '-5', '3'];
      console.log(arr)
      //传统写法
      let newArr = arr.map(function(s) {
        return parseInt(s);
      });
      console.log(newArr); //输出[1,20,-5,3]
      //箭头函数
      let newArr2 = arr.map(s => parseInt(s));
      console.log(newArr2) //输出[1,20,-5,3]
      // 2.reduce() :接收一个函数(必须)和一个初始值(可选),该函数接收两个参数: 
      const arr = [1, 20, -5, 3]
      //此时a=1,b=20开始从左往右循环处理
      let result1 = arr.reduce((a, b) => {
        return a + b;
      });
      console.log(result1); //输出 19
      //当有初始值传入的时候, a=1,b=1,开始从左往右循环处理
      let result2 = arr.reduce((a, b) => {
        return a + b;
      }, 1)
      console.log(result2); //输出 20
    </script>
</body>
</html>
相关文章
|
2月前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
2月前
ES6中map对象的使用,确实比Object好使哈
ES6中Map对象的使用优势,包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等,支持forEach循环和for...of循环。
32 1
ES6中map对象的使用,确实比Object好使哈
|
2月前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
2月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
人工智能 算法 大数据
算法金 | 推导式、生成器、向量化、map、filter、reduce、itertools,再见 for 循环
这篇内容介绍了编程中避免使用 for 循环的一些方法,特别是针对 Python 语言。它强调了 for 循环在处理大数据或复杂逻辑时可能导致的性能、可读性和复杂度问题。
54 6
算法金 | 推导式、生成器、向量化、map、filter、reduce、itertools,再见 for 循环
|
3月前
|
存储 JavaScript 前端开发
ES6新特性(四): Set 和 Map
ES6新特性(四): Set 和 Map
|
3月前
|
分布式计算 Python
【python笔记】高阶函数map、filter、reduce
【python笔记】高阶函数map、filter、reduce
|
4月前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
81 1
|
2月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
3月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set