ES2016-ES2020
参考:https://zhuanlan.zhihu.com/p/59096242
备注:可以使用ES6取代的10个Lodash特性 https://www.w3cplus.com/javascript/lodash-features-replace-es6.html
Finished Proposals
https://github.com/tc39/proposals/blob/master/finished-proposals.md
1.逻辑空赋值
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment
a ||= b;
a || (a = b); // "And And Equals"
a &&= b;
a && (a = b); // "QQ Equals"
a ??= b;
a ?? (a = b);
2.String.prototype.replaceAll
3.WeakRef
4.Promise.any
5.Numeric Separators
let budget = 1_000_000_000_000;
let nibbles = 0b1010_0001_1000_0101;
ES2016(ES7) https://www.html.cn/archives/9965
1.Array.prototype.includes
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
2.求幂运算符**
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation
ES2017(ES8) https://www.html.cn/archives/9981
1.字符串填充 padStart()
和 padEnd()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
2.Object.values()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
3.Object.entries()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
4.Object.getOwnPropertyDescriptors()
返回对象的所有自有(非继承的)属性描述符
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
作用:
ES2015 给我们带来了 Object.assign()
方法,它从一个或多个对象复制所有可枚举的属性,并返回一个新对象。
但是存在问题,它无法正确复制具有非默认特性(attribute) 的属性 (property)(getter,setter,不可写属性,等)。
如果一个对象只有一个 setter ,则无法使用 Object.assign()
正确地复制到一个新对象。
const person1 = {
set name(newName) {
console.log(newName)
}
}
以下代码将不起作用:
const person2 = {}
Object.assign(person2, person1)
但下面的代码就会奏效:
const person3 = {}
Object.defineProperties(person3,
Object.getOwnPropertyDescriptors(person1))
person2
丢失了 setter ,因为它没有复制过来。
使用 Object.create()
对浅拷贝对象也有同样的限制。
5.函数参数列表和调用中的尾随逗号
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Trailing_commas
const doSomething = (var1, var2,) => {
//...
}
doSomething('test2', 'test2',)
6.Async Functions (异步函数)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
7.共享内存 和 Atomics
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Atomics
WebWorkers 用于在浏览器中创建多线程程序。
他们通过事件提供消息传递协议。 从ES2017开始,您可以使用 SharedArrayBuffer
在 Web worker 及其创建者之间创建共享内存数组。
由于我们不知道向共享内存部分写入要花费多少时间来传播,因此 Atomics 是一种在读取值时执行该操作的方法,并且完成了任何类型的写入操作。
ES2018(ES9) https://www.html.cn/archives/9990
1.Rest(剩余)/Spread(展开) 属性
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
ES6 在处理数组解构时,引入了 rest(剩余)元素的概念
ES2018 为对象引入了类似的功能
2.Asynchronous iteration (异步迭代)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for-await...of
新的 for-await-of
构造允许您使用异步可迭代对象作为循环迭代
for await (const line of readLines(filePath)) {
console.log(line)
}
3.Promise.prototype.finally()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
4.正则表达式改进
(1) 先行断言(lookahead) 和 后行断言(lookbehind)
新增后行断言
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Special_characters_meaning_in_regular_expressions
- (?=pattern) 零宽正向先行断言(zero-width positive lookahead assertion)
- (?!pattern) 零宽负向先行断言(zero-width negative lookahead assertion)
- (?<=pattern) 零宽正向后行断言(zero-width positive lookbehind assertion)
- (?<!pattern) 零宽负向后行断言(zero-width negative lookbehind assertion)
(2) Unicode 属性转义 \p{…} 和 \P{…}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode
新功能将扩展此概念到引入 \p{}
匹配所有 Unicode 字符,否定为 \P{}
/^\p{ASCII}+$/u.test('abc')
/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF')
/^\p{Lowercase}$/u.test('h')
/^\p{Emoji}+$/u.test('')
/^\p{Script=Latin}+$/u.test('hey')
还有许多其他布尔属性,您只需通过在花括号中添加它们的名称来检查它们,包括 Uppercase
, Lowercase
, White_Space
, Alphabetic
, Emoji
等
除了这些二进制属性之外,您还可以检查任何 unicode 字符属性以匹配特定值。在上面例子中,检查字符串是用希腊语还是拉丁字母写的
更多属性:https://github.com/tc39/proposal-regexp-unicode-property-escapes
(3) 命名捕获组(Named capturing groups)
https://github.com/tc39/proposal-regexp-named-groups
在 ES2018 中,可以为捕获组分配一个名称,而不是仅在结果数组中分配一个 slot(插槽):
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02') // result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';
(4) 正则表达式的 ‘s’ 标志 dotAll
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll
ES2018以前元字符.
无法匹配\r \n \u{2048} \u{2049}
等换行符。 在 ES2018 中为正则表达式增加了一个新的标志s
用来表示属性dotAll。以使 .
可以匹配任意字符, 包括换行符。
s
标志是 ‘single line'(单行)的缩写,它使 .
匹配新的行字符。如果没有它,点将匹配普通字符,而不是新行:
/hi.welcome/.test('hi\nwelcome') // false
/hi.welcome/s.test('hi\nwelcome') // true
5.ES2018关于非法转义序列的修订
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings#%E5%B8%A6%E6%A0%87%E7%AD%BE%E7%9A%84%E6%A8%A1%E7%89%88%E5%AD%97%E9%9D%A2%E9%87%8F%E5%8F%8A%E8%BD%AC%E4%B9%89%E5%BA%8F%E5%88%97
ES2019(ES10) https://zhuanlan.zhihu.com/p/59096242 https://github.com/AttemptWeb/Record/issues/3
1.可选 Catch Binding
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_exception_identifier
可选的 catch binding 允许开发人员在catch块中,不使用error参数的情况下使用try/catch。
try {
// try to use a web feature which may not be implemented
} catch {
// 省略catch后的函数括号
}
2.JSON 超集
https://github.com/tc39/proposal-json-superset
当json文本中存在未转义的换行符如\u2028,\u2029
时,js中会报语法错误。
ES2018中对此作了扩展,支持了所有的json文本,因此同样允许未转义的换行符的存在。
3.Symbol.prototype.description
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description
Symbol
对象添加了一个只读属性description
,它会返回Symbol
对象的可选描述的字符串
在ES2019之前,Symbol
的描述存储在内部的 [[Description]]
,没有直接对外暴露,只有调用 Symbol
的 toString()
才能读取到
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description
4.Function.prototype.toString revision
https://tc39.es/Function-prototype-toString-revision/
Function.prototype.toString()现在返回精确字符,包括空格和注释。
5.Object.fromEntries()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
Object.fromEntries()
与Object.entries()
对应,它把键值对列表转换为一个对象
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']]
Object.fromEntries(map) // { 1: 'one', 2: 'two', 3: 'three' }
6.Well-formed JSON.stringify()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Well-formed_JSON.stringify()
更友好的JSON.stringify,对于一些超出范围的 Unicode,为其输出转义序列,使其成为有效 Unicode
// Previously:
JSON.stringify("\uD800"); // '"�"'
// Now:
JSON.stringify("\uD800"); // '"\\ud800"'
7.String.prototype.{trimStart,trimEnd}
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft
trimStart()
方法从字符串的开头删除空格。trimLeft()
是此方法的别名。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd
The trimEnd()
method removes whitespace from the end of a string. trimRight()
is an alias of this method.
8.Array.prototype.{flat,flatMap} 平铺数组
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
var arr = [1, 2, 3, 4]; arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
ES2020(ES10) https://juejin.im/post/6844904080955932679
1.可选链操作符(Optional Chaining)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
2.空位合并操作符(Nullish coalescing Operator)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
空值合并操作符(??
)是一个逻辑操作符,当左侧的操作数为 null
或者 undefined
时,返回其右侧操作数,否则返回左侧操作数
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
3.Promise.allSettled
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled
Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个promise为reject的话,则整个Promise.all 调用会立即终止,并返回一个reject的新的 Promise 对象。
4.String.prototype.matchAll
el.onclick = () => {
import('/modules/my-module.js')
.then(module => {
// Do something with the module.
})
.catch(err => {
// load error;
})
}
// 或者
let module = await import('/modules/my-module.js');
6.BigInt
-(2^53-1)
至 2^53-1
范的值,即Number.MIN_SAFE_INTEGER
至Number.MAX_SAFE_INTEGER
,超出这个范围的整数计算或者表示会丢失精度。于是 BigInt 应运而生,它是第7个原始类型,可安全地进行大数整型计算。 你可以在BigInt上使用与普通数字相同的运算符,例如 +, -, /, *, %等等。
创建 BigInt 类型的值也非常简单,只需要在数字后面加上 n 即可。例如,123 变为 123n。也可以使用全局方法 BigInt(value) 转化,入参 value 为数字或数字字符串。
不过有一个问题,在大多数操作中,不能将 BigInt与Number混合使用。比较Number和 BigInt是可以的,但是不能把它们相加
7.globalThis
globalThis 目的就是提供一种标准化方式访问全局对象,有了 globalThis 后,你可以在任意上下文,任意时刻都能获取到全局对象。
// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window
也规定了Object.prototype 必须在全局对象的原型链中。下面的代码在最新浏览器中已经会返回 true 了
Object.prototype.isPrototypeOf(globalThis); // true
ES2016-ES2020的更多相关文章
- [ES7] Exploring ES2016 Decorators
Original artial --> link How descorator looks like: @mydecorator function myFun(){ ... } Descorat ...
- ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning?
JavaScript has a strange naming history. For its initial release in 1995 as part of Netscape Navigat ...
- 005.ES2016新特性--装饰器
装饰器在设计阶段可以对类和属性进行注释和修改,在Angular2中装饰器非常常用,可以用来定义组件.指令以及管道,并且可以与框架提供的依赖注入机制配合使用. 从本质上上讲,装饰器的最大作用是修改预定义 ...
- 003.ES2015和ES2016新特性--类.md
JavaScript使用的是基于原型的OO模型,用对象字面量或者函数来实例化对象,用原型链来实现继承. 这样对于数据传统C++.Java的OO范式的开发者来说,会感到比较困惑,于是从ES2015开始逐 ...
- ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事?
原网址:http://huangxuan.me/2015/09/22/js-version/ JavaScript 有着很奇怪的命名史. 1995 年,它作为网景浏览器(Netscape Naviga ...
- [ES2016] Check if an array contains an item using Array.prototype.includes
We often want to check if an array includes a specific item. It's been common to do this with the Ar ...
- ES2020的这些新功能令人期待
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/es2020-has-been-finalized- ...
- ES2020 All in One
ES2020 All in One ES2020 new features / ES11 ES2020 中的10个新功能 1. BigInt BigInt是JavaScript中最令人期待的功能之一, ...
- ES2020新特性链操作符 '?.'和'??'
ES2020新特性,js中的可选链操作符?. 概述 回想一下,我们是如何访问可能含有空值(null或undefined)属性的嵌套对象,比如访问web api 返回结果的user详情,可以使用嵌套的三 ...
- 学习笔记: ES7(ES2016)新功能
ES7添加了两个新功能 : 1. Array.prototype.includes() 2. 指数运算符 1 .Array.prototype,includes() 判断指定的元素是否存在于数组中, ...
随机推荐
- jmeter的阶梯式加压性能测试 jp@gc - Stepping Thread Group (deprecated)
当测试需求要求是阶梯型的压力测试场景时,使用该线程组. 比如测试场景是 从100并发开始,每60s加压50并发,直至达到目的并发数(中途发现问题随时停掉),之后保持每60s停止50并发的速率关闭 ...
- maven-标准目录结构,常用命令,生命周期,概念模型图
maven-标准目录结构 作为一个maven工程,它的src目录和pom.xml是必备的,进入src目录后,我们发现它里面的目录结构如下: src/main/java -- 存放项目的 . java ...
- from pathlib import Path
from pathlib import Path #引入库 P.parent #获取父级目录 P.exists() #判断当前路径是否存在 P.mkdir(parents=Fasle) # 根据路径创 ...
- Mac怎么创建加密文件夹
对于一些使用Mac工作生活有特殊要求以及职业要求有限制的用户来说,加密自己的工作内容以及隐私是非常重要的一件事情.往往用户需要加密的内容项目很多,这个时候我们就需要一个加密文件夹来包含这些内容.那么M ...
- vue验证码倒计时60s
vue3验证码倒计时60s //倒计时60s const timeNum = ref(60); const countDown = ref(); const isShowSend = ref(true ...
- vue 项目打包 遇到问题 npm run build 无法打包
npm run build 打包 直接报错!!! 发现package.json中build的打包后边多了一个:prod 因此打包直接使用 npm run build:prod
- windows根据文件名找到进程,并杀死进程。
背景:最近因为工作原因,装了360杀毒引擎,完了就卸载了.发现一直提示文件正在使用无法删除.文件无法访问等等.经过一系列操作,安全模式下都无法删除,恶心死了... 1.shirt + del 按文件夹 ...
- 【python】第二模块 步骤一 第三课、数据库的基本查询
第三课.数据库的基本查询 一.课程介绍 1.1 课程介绍 学习目标 数据的简单查询 无条件查询记录,字段的计算和字段的别名 数据的高级查询 数据排序.分页.去除重复记录 数据的有条件查询 条件表达式: ...
- VS2019创建WebAPI,本地发布WebAPI
一.创建WebAPI 1.打开VS2019->创建新项目 2.ASP.NET Web应用程序->下一步 3.注意:.NET Framework版本必须高于4.0以上 4.选择"W ...
- 【C++小程序】《我要抽签》b1.0做好了~
也许是的,得横空出世了 如你所见 这款基于\(C++\)能模仿Mrs. Yao抽签系统的cpp终于做完了啦~ 初期功能很少.\(BUG\)极多. 所以为了您的体验:) 请遵守格式 代码: #inclu ...