[转]ECMAScript 2016,2017 和 2018 中所有新功能的示例
很难追踪 JavaScript(ECMAScript)中的新功能。 想找到有用的代码示例更加困难。
因此,在本文中,我将介绍 TC39 已完成 ES2016,ES2017 和 ES2018(最终草案)提案中所有添加的 18 个功能,并展示有用的示例。
这是一个很长的文章,但应该很容易阅读。 可以把它想象成 “Netflix binge reading”。但是到文章结束,我保证你将对所有这些功能有很好的了解。
好的,让我们逐个讨论这些问题。
ECMAScript 2016
1.Array.prototype.includes
includes
是 Array 上的一个简单实例方法,有助于轻松查找某项元素是否在数组中(包括NaN
,与 indexOf
不同)。
人们想要 contains
来命名该规范,但显然 Mootools 已经使用过这个命名,所以使用了 includes
。
更多示例和常见问题请参见:ES2016 新特性:npm scripts : 每个前端开发都应知道的一些使用提示
2.指数运算符
加法和减法等数学运算分别具有 +
和 -
等中缀运算符。与它们类似,**
中缀运算符通常用于指数运算。在 ECMAScript 2016 中,引入了 **
代替 Math.pow
。
更多示例和常见问题请参见:ES2016 新特性:求幂运算符(**)
ECMAScript 2017
1.Object.values()
Object.values()
是一个与 Object.keys()
类似的新函数,但返回 Object 自身属性的所有值,不包括原型链中的任何值。
更多示例和常见问题请参见:ES2017 新特性:Object.entries() 和 Object.values()
2.Object.entries()
Object.entries()
与 Object.keys
相关,但它不仅仅返回 keys ,而是以数组方式返回 keys 和 values 。这使得在循环中使用对象或将对象转换为 Maps 等操作变得非常简单。
示例1
示例2
更多示例和常见问题请参见:ES2017 新特性:Object.entries() 和 Object.values()
3.字符串填充
String 中添加了两个实例方法,String.prototype.padStart
和 String.prototype.padEnd
– 允许将空字符串或其他字符串附加到原始字符串的开头或结尾。
'someString'.padStart(numberOfCharcters [,stringForPadding]); '5'.padStart(10) // ' 5'
'5'.padStart(10, '=*') //'=*=*=*=*=5' '5'.padEnd(10) // '5 '
'5'.padEnd(10, '=*') //'5=*=*=*=*='
当我们想要对齐字符串的长度的时候,可以非常方便的使用这两个函数。
3.1 padStart 示例
在下面的示例中,我们列出了不同长度的数字。我们希望前置“0”,以便所有项具有相同的 10 位数长度显示。我们可以使用 padStart(10, '0')
轻松实现这一目标。
3.2 padEnd 示例
当我们打印不同长度的多个项并希望正确对齐它们时,padEnd 真的很方便。
下面的示例是 padEnd
,padStart
和 Object.entries
组合在一起以产生漂亮输出的一个很好的现实示例。
const cars = {
'[转]ECMAScript 2016,2017 和 2018 中所有新功能的示例的更多相关文章
- ECMAScript 2016,2017 和 2018 中所有新功能的示例
很难追踪 JavaScript(ECMAScript)中的新功能. 想找到有用的代码示例更加困难. 因此,在本文中,我将介绍 TC39 已完成 ES2016,ES2017 和 ES2018(最终草案) ...
- 关于ECMAScript 2016, 2017, 和2018中新增功能(摘抄)
ECMAScript 2016 1. Array.prototype.includes includes是数组上的简单实例方法,并有助于轻松查找某个项是否在Array中(包括NaN不像indexOf) ...
- SQLSERVER2014中的新功能
SQLSERVER2014中的新功能 转载自:http://blog.csdn.net/maco_wang/article/details/22701087 博客人物:maco_wang SQLSER ...
- PhotoZoom Classic 7中的新功能
众所周知PhotoZoom Classic是家庭使用理想的放大图像软件.目前很多用户还在使用PhotoZoom Classic 6,对于PhotoZoom Classic 7还是有点陌生.其实在6代衍 ...
- 一个新人如何学习在大型系统中添加新功能和Debug
文章背景: 今年七月份正式入职,公司主营ERP软件,楼主所在的组主要负责二次开发,使用的语言是Java. 什么叫二次开发呢?ERP软件的客户都是企业.而这些企业之间的情况都有所不同,一套标准版本的企业 ...
- 【翻译】Ext JS 5.0.1 中的新功能
原文:What's New in Ext JS 5.0.1 今天,我们很高兴的宣布Ext JS 5.0.1发布了!此维护版本基于Sencha社区的反馈做了一些改进.下面让我们来了解一下这些改变. 可访 ...
- Java 17 将要发布,补一下 Java 13 中的新功能
本文章属于Java 新特性教程 系列,已经收录在 Github.com/niumoo/JavaNotes ,点个赞,不迷路. 自从 Oracle 调整了 Java 的版本发布节奏之后,Java 版本发 ...
- 关闭PHPStorm 2017.1 中的新功能中的参数提示( Parameter hints )
参数提示( Parameter hints ) 参数提示是显示在方法的参数值前面的文字,帮助你更好的理解语义的具体方法.我们还增加了一个选项来定制你的内联参数提示,以符合你的IDE配色方案. 配置面板 ...
- Java Math 类中的新功能--浮点数
Java™语言规范第 5 版向 java.lang.Math和 java.lang.StrictMath添加了 10 种新方法,Java 6 又添加了 10 种.这个共两部分的系列文章的 第 1 部分 ...
随机推荐
- 用蒙特卡罗方法解非线性规划MATLAB
共需要三个M文件,主程序为randlp.m randlp.m: function [sol,r1,r2]=randlp(a,b,n) %随机模拟解非线性规划 debug=1; a=0; %试验点下界 ...
- SQLSERVER 时间函数汇总
1.求当天的年份 (getdate(): 2012/05/08 18:07:26) SELECT YEAR(GETDATE()) --2012 2. 求当天的月份 SELECT M ...
- docker.[6] 数据卷
docker.[6] 数据卷 操作指令: # docker run -v /data1:/data2 -i -t centos /bin/bash 参数说明: data1 : 这里指的是宿主机的目录( ...
- Hdu 2522 hash
题目链接 题意:输入整数n (1<= abs(n) <= 10^5) , 输出 1/n. 这题不是自己做出来的...看了网上的思路.这种题目都能想到用hash..反正我是没往那里想,看到循 ...
- 【JZOJ4840】【NOIP2016提高A组集训第4场11.1】小W砍大树
题目描述 数据范围 解法 模拟. 代码 #include<stdio.h> #include<algorithm> #include<string.h> #incl ...
- 并发编程之submit和execute区别
前言 使用线程池难免会用到submit和execute,但是submit是有坑的,此处做个记录 1.submit坑 此处随便写一个方法,进入内部查看execute和submit /** * @Auth ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十三章:计算着色器(The Compute Shader)
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十三章:计算着色器(The Compute Shader) 代码工程 ...
- MySQL命令行分号无法结束问题解决
背景:输入一串查询语句,以分号结束,发现没有结束,再打回车,分号,还是不完.什么exit,quit,bye,都不顶用如果要ctrl+C吧,又得退出mysql,一切重来,很麻烦.后来终于发现,引起这种现 ...
- 2013年山东省第四届ACM大学生程序设计竞赛E题:Alice and Bob
题目描述 Alice and Bob like playing games very much.Today, they introduce a new game. There is a polynom ...
- input禁止复制、粘贴、剪切
<input type="text" autocomplete="off"> <!-- autocomplete="off" ...