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(ES11) 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 对象。 

Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 它不会进行短路, 也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态, 而不管是否处理成功。
4.String.prototype.matchAll
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll
5.Dynamic import
import(module) 函数可以在任何地方调用。它返回一个解析为模块对象的 promise
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

javascript 在 Math 上一直很糟糕的原因之一是只能安全的表示-(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

 

 

 

 

 

 

 

 
posted on 2021-01-11 10:32  翻页工  阅读(218)  评论(0)  编辑  收藏  举报
Copyright © 2024 翻页工
Powered by .NET 9.0 on Kubernetes Powered by: 博客园