JavascriptES6新特性之map和reduce详解

目录
  • 说明
    • 1.map()
      • 代码示例：
    • 2.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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 无循环 JavaScript(map、reduce、filter和find)

    之前有讨论过,缩进(非常粗鲁地)增加了代码复杂性.我们的目标是写出复杂度低的 JavaScript 代码.通过选择一种合适的抽象来解决这个问题,可是你怎么能知道选择哪一种抽象呢?很遗憾的是到目前为止,没有找到一个具体的例子能回答这个问题.这篇文章中我们讨论不用任何循环如何处理 JavaScript 数组,最终得出的效果是可以降低代码复杂性. 循环是一种很重要的控制结构,它很难被重用,也很难插入到其他操作之中.另外,它意味着随着每次迭代,代码也在不断的变化之中.--Luis Atencio 我们先

  • JavaScript mapreduce工作原理简析

    JavaScript mapreduce工作原理简析

    谷歌在2003到2006年间连续发表了三篇非常有影响力的文章,分别是2003年在SOSP上发布的GFS,2004年在OSDI上发布的MapReduce,以及2006年在OSDI上发布的BigTable.GFS是文件系统相关的,其对后来的分布式文件系统设计具有指导意义:MapReduce是一种并行计算的编程模型,用于作业调度:BigTable是一个用于管理结构化数据的分布式存储系统,构建在GFS.Chubby.SSTable等Google技术之上.相当多的Google应用使用了这三种技术,比如Go

  • JavaScript之map reduce_动力节点Java学院整理

    JavaScript之map reduce_动力节点Java学院整理

    如果你读过Google的那篇大名鼎鼎的论文"MapReduce: Simplified Data Processing on Large Clusters",你就能大概明白map/reduce的概念. map 举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一

  • 浅谈es6 javascript的map数据结构

    本文介绍了es6 javascript的map数据结构,分享给大家,具体如下: Map 结构的目的和基本用法 JavaScript 的对象( Object), 本质上是键值对的集合( Hash 结构), 但是传统上只能用字符串当作键. 这给它的使用带来了很大的限制. var data = {}; var element = document.getElementById('myDiv'); data[element] = 'metadata'; data['[object HTMLDivElem

  • JavascriptES6新特性之map和reduce详解

    JavascriptES6新特性之map和reduce详解

    目录 说明 1.map() 代码示例: 2.reduce() 代码示例: 综合案例 总结 说明 ES6中,数组新增了map和reduce方法. 1.map() map() :接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回. 代码示例: 有一个字符串数组,我们希望转为int数组 let arr = ['1', '20', '-5', '3']; console.log(arr) //传统写法 let newArr = arr.map(function(s) { return pa

  • webpack5新特性Asset Modules资源模块详解

    目录 正文 图片打包(asset/resource) publicPath asset/inline 模块 asset 模块 asset/source 模块 正文 webpack 可以将很多类型的文件写入最后打包的js文件,写入的方法有两种,一个是 Asset Modules 另一个是 Loaders 这一篇我们就来讨论 Asset Modules.Asset Modules(资源模块)是webpack5的新特性,它允许使用资源文件(字体,图标等)而无需配置额外 loader, webpack低

  • ES6新特性之模块Module用法详解

    本文实例讲述了ES6新特性之模块Module用法.分享给大家供大家参考,具体如下: 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能. 在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种.前者用

  • iOS12新特性之推送通知详解

    iOS12新特性之推送通知详解

    序言 众所周知,iOS中消息推送扮演了不可或缺的位置.不管是本地通知还是远程通知无时不刻的在影响着我们的用户体验,以致于在iOS10的时候苹果对推送大规模重构,独立了已 UserNotifications 和 UserNotificationsUI 两个单独的framework,可见重要性一斑.针对于WWDC18苹果又给我们带来了什么惊喜呢? 新特性 Grouped notifications 推送分组 Notification content extensions 推送内容扩展中的可交互和动态

  • C# 9 新特性之增强的foreach详解

    C# 9 新特性之增强的foreach详解

    Intro 在 C# 9 中增强了 foreach 的使用,使得一切对象都有 foreach 的可能 我们来看一段代码,这里我们试图遍历一个 int 类型的值 思考一下,我们可以怎么做使得上面的代码编译通过呢? 迭代器模式 迭代器模式,提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示. 迭代器模式是分离了集合对象的遍历行为,抽象出一个迭代器类来负责,这样既可以做到不暴露集合的内部结构,又可以让外部代码透明地访问集合内部的数据. foreach 其实是一个迭代器模式的语法糖

  • MySQL8新特性之全局参数持久化详解

    目录 前言 全局参数持久化 写在最后 总结 参考文档: 前言 自从 2018 年发布第一版 MySQL 8.0.11 正式版至今,MySQL 版本已经更新迭代到 8.0.26,相对于稳定的 5.7 版本来说,8.0 在性能上的提升是毋庸置疑的! 随着越来越多的企业开始使用 MySQL 8.0 版本,对于 DBA 来说是一个挑战,也是一个机遇!

  • Java8新特性之精简的JRE详解_动力节点Java学院整理

    Java8新特性之精简的JRE详解_动力节点Java学院整理

    Oracle公司如期发布了Java 8正式版!没有让广大javaer失望.对于一个人来说,18岁是人生的转折点,从稚嫩走向成熟,法律意味着你是完全民事行为能力人,不再收益于未成年人保护法,到今年为止,java也走过了18年,java8是一个新的里程碑,带来了前所未有的诸多特性,lambda表达式,Stream API,新的Date time api,多核并发支持,重大安全问题改进等,相信java会越来越好,丰富的类库以及庞大的开源生态环境是其他语言所不具备的,说起丰富的类库,很多同学就吐槽了,j

  • ThinkPHP3.1新特性之字段合法性检测详解

    ThinkPHP3.1版增加了表单提交的字段合法性检测,可以更好的保护数据的安全性.这一特性是3.1安全特性中的一个重要部分. 表单字段合法性检测需要使用create方法创建数据对象的时候才能生效,具体有两种方式: 一.属性定义 可以给模型配置insertFields 和 updateFields属性用于新增和编辑表单设置,使用create方法创建数据对象的时候,不在定义范围内的属性将直接丢弃,避免表单提交非法数据. insertFields 和 updateFields属性的设置采用字符串(逗

  • ThinkPHP3.1新特性之内容解析输出详解

    以往版本的ThinkPHP中页面输出的过程是读取模板文件,然后进行模板解析(也支持调用第三方模板引擎解析),但是有一些情况,我们并没有定义模板文件,或者把模板文件保存在数据库里面,那么这种情况下进行页面输出的时候,我们是无法进行模板文件读取的,ThinkPHP3.1版本则针对这样的情况增加了内容解析输出的功能. 内置的模板引擎也进行了完善,如果传入的模板文件不存在的话,则会认为是传入的模板解析内容,因此,ThinkPHP3.1版的View类和Action类也做了一些相应的改进. display方

  • Redis的新特性懒惰删除Lazy Free详解

    前言 Redis4.0新增了非常实用的lazy free特性,从根本上解决Big Key(主要指定元素较多集合类型Key)删除的风险.笔者在redis运维中也遇过几次Big Key删除带来可用性和性能故障. 本文分为以下几节说明redis lazy free: lazy free的定义 我们为什么需要lazy free lazy free的使用 lazy free的监控 lazy free实现的简单分析 lazy free的定义 lazy free可译为惰性删除或延迟释放:当删除键的时候,red

随机推荐