javaScript ES7 ES8 ES9 ES10 ES12新特性

杨玉前 發表於 2019-8-14 20:01:00

参考文献： https://tuobaye.com/2018/11/27/%E7%BB%86%E8%A7%A3JavaScript-ES7-ES8-ES9-%E6%96%B0%E7%89%B9%E6%80%A7/
http://www.imooc.com/article/291875
https://hijiangtao.github.io/2019/07/05/Diff-ECMAScript-2019/
ES7
1. Array.prototype.includes()方法
<div class="cnblogs_code">
<pre>['a', 'b', 'c', 'd'].includes('b') // true
['a', 'b', 'c', 'd'].includes('b', 1) // true
['a', 'b', 'c', 'd'].includes('b', 2) // false</pre>
</div>
<div class="cnblogs_code">
<pre>var ary1 = ;
console.log(ary1.indexOf(NaN))//-1
console.log(ary1.includes(NaN))//true</pre>
</div>
2. 求幂运算符（**）
用<code>**</code>来替代Math.pow。
<div class="cnblogs_code">
<pre>4 ** 3</pre>
</div>
等价于
<div class="cnblogs_code">
<pre>Math.pow(4,3)</pre>
</div>
<div class="cnblogs_code">
<pre>let n = 4;
n **= 3;</pre>
</div>
ES8
1. Async Functions
Async Functions也就是我们常说的Async/Await。Async/Await是一种用于处理JS异步操作的语法糖，可以帮助我们摆脱回调地狱，编写更加优雅的代码。
通俗的理解，async关键字的作用是告诉编译器对于标定的函数要区别对待。当编译器遇到标定的函数中的await关键字时，要暂时停止运行，带到await标定的函数处理完毕后，再进行相应操作。如果该函数fulfilled了，则返回值是resolve value，否则得到的就是reject value。
拿普通的promise写法来对比:
<div class="cnblogs_code">
<pre>async function asyncFunc() {
const result = await otherAsyncFunc();
console.log(result);
}

// Equivalent to:
function asyncFunc() {
return otherAsyncFunc()
.then(result => {
 console.log(result);
});
}</pre>
</div>
并行处理多个函数：
<div class="cnblogs_code">
<pre>async function asyncFunc() {
const = await Promise.all([
 otherAsyncFunc1(),
 otherAsyncFunc2(),
]);
console.log(result1, result2);
}

// Equivalent to:
function asyncFunc() {
return Promise.all([
 otherAsyncFunc1(),
 otherAsyncFunc2(),
])
.then( => {
 console.log(result1, result2);
});
}</pre>
</div>
处理错误：
<div class="cnblogs_code">
<pre>async function asyncFunc() {
try {
 await otherAsyncFunc();
} catch (err) {
 console.error(err);
}
}

// Equivalent to:
function asyncFunc() {
return otherAsyncFunc()
.catch(err => {
 console.error(err);
});
}</pre>
</div>
2. SharedArrayBuffer和Atomics
SharedArrayBuffer允许在多个 workers 和主线程之间共享 SharedArrayBuffer 对象的字节。这种共享有两个好处：
<ul>
<li>可以更快地在 workers 之间共享数据。</li>
<li>workers 之间的协调变得更简单和更快（与 postMessage() 相比）</li>
</ul>
API：
　　构造函数： new SharedArrayBuffer(length)
　　静态属性： SharedArrayBuffer
　　实例属性： SharedArrayBuffer.prototype.byteLength()
              SharedArrayBuffer.prototype.slice(start, end)
Atomics 方法可以用来与其他 workers 进行同步。以下两个操作可以让你读取和写入数据，并且不会被编译器重新排列：
<ul>
<li>Atomics.load(ta : TypedArray, index)</li>
<li>Atomics.store(ta : TypedArray, index, value : T)</li>
</ul>
这个想法是使用常规操作读取和写入大多数数据，而 Atomics 操作（load ，store 和其他操作）可确保读取和写入安全。通常，要使用自定义同步机制（例如）可以基于Atomics实现。
API： 
Atomic 函数的主要操作数必须是 Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array 或 Uint32Array 的一个实例。它必须包裹一个 SharedArrayBuffer.
<ul>
<ul>
<li>Atomics.load(ta : TypedArray, index) : T 读取和返回 ta 上的元素，返回数组指定位置上的值。</li>
<li>Atomics.store(ta : TypedArray, index, value : T) : T 在 ta 上写入 value，并且返回 value。</li>
<li>Atomics.exchange(ta : TypedArray, index, value : T) : T 将 ta 上的元素设置为 value ，并且返回索引 index 原先的值。</li>
<li>Atomics.compareExchange(ta : TypedArray, index, expectedValue, replacementValue) : T 如果 ta 上的当前元素为 expectedValue , 那么使用 replacementValue 替换。并且返回索引 index 原先（或者未改变）的值。</li>

</ul>

</ul>
<ul>
<ul>
<li>Atomics.add(ta : TypedArray, index, value) : T 执行 ta += value 并返回 ta 的原始值。</li>
<li>Atomics.sub(ta : TypedArray, index, value) : T 执行 ta -= value 并返回 ta 的原始值。</li>
<li>Atomics.and(ta : TypedArray, index, value) : T 执行 ta &= value 并返回 ta 的原始值。</li>
<li>Atomics.or(ta : TypedArray, index, value) : T 执行 ta |= value 并返回 ta 的原始值。</li>
<li>Atomics.xor(ta : TypedArray, index, value) : T 执行 ta ^= value 并返回 ta 的原始值。</li>

</ul>

</ul>
<ul>
<ul>
<li>Atomics.wait(ta: Int32Array, index, value, timeout=Number.POSITIVE_INFINITY) : (‘not-equal’ | ‘ok’ | ‘timed-out’) 如果 ta 的当前值不是 value ，则返回 ‘not-equal’。否则（等于value时）继续等待，直到我们通过 Atomics.wake() 唤醒或直到等待超时。在前一种情况下，返回 ‘ok’。在后一种情况下，返回’timed-out’。timeout 以毫秒为单位。记住此函数执行的操作：“如果 ta 为 value，那么继续等待” 。</li>
<li>Atomics.wake(ta : Int32Array, index, count) 唤醒等待在 ta 上的 count workers。</li>

</ul>

</ul>
3. Object.values and Object.entries
<div class="cnblogs_code">
<pre>const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']

Object.values('es8'); // ['e', 's', '8']</pre>
</div>
<div class="cnblogs_code">
<pre>const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]

Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]</pre>
</div>
4. String padding
为 String 对象增加了 2 个函数：padStart 和 padEnd。填补字符串的首部和尾部，为了使得到的结果字符串的长度能达到给定的长度（targetLength）。你可以通过特定的字符，或者字符串，或者默认的空格填充它。
<pre>str.padStart(targetLength [, padString])</pre>
<pre>str.padEnd(targetLength [, padString]) </pre>
<div class="cnblogs_code">
<pre>'es8'.padStart(2); // 'es8'
'es8'.padStart(5); // 'es8'
'es8'.padStart(6, 'woof');// 'wooes8'
'es8'.padStart(14, 'wow');// 'wowwowwowwoes8'
'es8'.padStart(7, '0'); // '0000es8'

'es8'.padEnd(2); // 'es8'
'es8'.padEnd(5); // 'es8'
'es8'.padEnd(6, 'woof'); // 'es8woo'
'es8'.padEnd(14, 'wow'); // 'es8wowwowwowwo'
'es8'.padEnd(7, '6'); // 'es86666'</pre>
</div>
5. Object.getOwnPropertyDescriptors
<div class="cnblogs_code">
<pre>const obj = {
get es7() { return 777; },
get es8() { return 888; }
};
Object.getOwnPropertyDescriptor(obj);
// {
// es7: {
// configurable: true,
// enumerable: true,
// get: function es7(){}, //the getter function
// set: undefined
// },
// es8: {
// configurable: true,
// enumerable: true,
// get: function es8(){}, //the getter function
// set: undefined
// }
// }</pre>
</div>
6. 结尾逗号
<div class="cnblogs_code">
<pre>// 参数定义时
function foo(
param1,
param2,
) {}

// 函数调用时
foo(
'abc',
'def',
);

// 对象中
let obj = {
first: 'Jane',
last: 'Doe',
};

// 数组中
let arr = [
'red',
'green',
'blue',
];</pre>
</div>
<h2 id="ES9新特性（ECMAScript-2018）">ES9新特性</h2>
1.异步迭代器：异步迭代器对象的next()方法返回了一个Promise，解析后的值跟普通的迭代器类似。 
<div class="cnblogs_code">
<pre>async function example() {
// 普通迭代器:
const iterator = createNumberIterator();
iterator.next(); // Object {value: 1, done: false}
iterator.next(); // Object {value: 2, done: false}
iterator.next(); // Object {value: 3, done: false}
iterator.next(); // Object {value: undefined, done: true}

// 异步迭代器:
const asyncIterator = createAsyncNumberIterator();
const p = asyncIterator.next(); // Promise
await p;// Object {value: 1, done: false}
await asyncIterator.next(); // Object {value: 2, done: false}
await asyncIterator.next(); // Object {value: 3, done: false}
await asyncIterator.next(); // Object {value: undefined, done: true}
}</pre>
</div>
2.  Rest/Spread 属性
<pre>rest参数和展开运算符，这项特性在ES6中已经引入，但是ES6中仅限于数组。在ES9中，为对象提供了像数组一样的rest参数和扩展运算符。 </pre>
<div class="cnblogs_code">
<pre>const obj = {
a: 1,
b: 2,
c: 3
}
const { a, ...param } = obj;
console.log(a) //1
console.log(param) //{b: 2, c: 3}

function foo({a, ...param}) {
console.log(a); //1
console.log(param) //{b: 2, c: 3}
}</pre>
</div>
3.  Promise.prototype.finally()
finally的回调总会被执行。
<div class="cnblogs_code">
<pre>promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});</pre>
</div>
4. 命名捕获组
ES9中可以通过名称来识别捕获组：
<div class="cnblogs_code">
<pre>(?<year>{4})</pre>
</div>
before:
<div class="cnblogs_code">
<pre>const RE_DATE = /({4})-({2})-({2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj; // 1999
const month = matchObj; // 12
const day = matchObj; // 31</pre>
</div>
after:
<div class="cnblogs_code">
<pre>const RE_DATE = /(?<year>{4})-(?<month>{2})-(?<date>{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.date; // 31

// 使用解构语法更为简便
const {groups: {day, year}} = RE_DATE.exec('1999-12-31');
console.log(year); // 1999
console.log(day); // 31</pre>
</div>
 
 ES10新特性
1. 选择性的catch绑定
在使用try catch错误异常处理时，可以选择性的给catch传入参数（可以不给catch传参）
正常使用try catch:
 
<div class="cnblogs_code">
<pre>try {
// do something
} catch (err) {
// console.log('err', err);
}</pre>
</div>
 
在es10中使用时，可以：
<div class="cnblogs_code">
<pre>try {
// do something
} catch {
// do something</pre>
<pre>}</pre>
</div>
2. JSON.superset
背景： JSON内容可以正常包含 行分隔符（\u2028）和 段落分隔符（\u2029）而ECMAScript却不行。
在ES10中，可以直接使用
<div class="cnblogs_code">
<pre>eval('\u2029');</pre>
</div>
 
而不会在提示错误。
3. Symbol.prototype.description 
为Symbol类型增加Symbol.prototype.description的一个访问器属性，用来获取Symbol类型数据的描述信息。
 
<div class="cnblogs_code">
<pre>console.log(Symbol('test').description);
// 'test'

console.log(Symbol.for('test').description);
// 'test'

console.log(Symbol.iterator.description);
// 'Symbol.iterator'</pre>
</div>
 
4. Function.prototype.toString
在ES10之后，函数调用toString()方法，将准确返回原有信息，包括空格和注释等。
 
<div class="cnblogs_code">
<pre>let funcToString = function () {
//do something
console.log('test');
}
/**
"function () {
//do something
console.log('test');
}"
*/</pre>
</div>
 
5. Object.fromEntries()
Object.fromEntries()是Object.entries()的反转。
 
<div class="cnblogs_code">
<pre>const obj = { foo: 'bar', baz: 42}
let res1 = Object.entries(obj);
console.log(res1);
// [['foo', 'bar'], ['baz', 42]]
let obj1= Object.fromEntries(res1);
console.log(obj1);
// {foo: 'bar', baz: 42}</pre>
</div>
 
map转换为object
<div class="cnblogs_code">
<pre>let map = new Map([['name','alex'], ['age', 18]]);
const obj2 = Object.fromEntries(map);
console.log(obj2);
// object {name: 'alex', age: 18}</pre>
</div>
6. 更友好的JSON.stringify
正常字符的表示不变：
 
<div class="cnblogs_code">
<pre>JSON.stringify('𝌆')
// → '"𝌆"'
JSON.stringify('\uD834\uDF06')
// → '"𝌆"'</pre>
</div>
 
而无法用 UTF-8 编码表示的字符会被序列化为转移序列：
<div class="cnblogs_code">
<pre>JSON.stringify('\uDF06\uD834')
// → '"\\udf06\\ud834"'
JSON.stringify('\uDEAD')
// → '"\\udead"'</pre>
</div>
7. String.prototype.{trimStart, trimEnd} 
trimStart()从字符串开头删除空格，返回一个新的字符串，不会修改原字符串。
 
<div class="cnblogs_code">
<pre>let str = ' hello, miss cecelia!';
console.log(str.trimStart());
// 'hello, miss cecelia!'</pre>
</div>
 
trimEnd()从字符串右端开始移除空白字符，返回一个新的字符串，不会修改原字符串。
 
<div class="cnblogs_code">
<pre>let str = ' hello, miss cecelia! ';
console.log(str.trimEnd());
// ' hello, miss cecelia!'</pre>
</div>
 
8. Array.prototype.{flat, flatMap} 
Array.prototype.flat()可显式地传入参数，表示打平的层级。不传参数，表示只打平第一级。 
 
<div class="cnblogs_code">
<pre>let arr = ]]];
console.log(arr.flat());
// ]]
console.log(arr.flat(2));
// ]</pre>
</div>
 
flatMap()方法：可以看作flat和map组合在一起的结果：
 
<div class="cnblogs_code">
<pre>['My dog', 'is awesome'].map(words => words.split(' '))
// [ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]
['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]</pre>
</div>
 ES 12 新特性
1. String.propotype.replaceAll
看到replaceAll这个词，相比很容易联想到replace。在JavaScript中，replace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换。
<div class="cnblogs_code">
<pre>let string = ' I like apple. And I also like peach.'

// 使用replace替换一次
let replaceStr = string.replace('like', 'dislike');
console.log(replaceStr);// I dislike apple. And I also like peach.

// 使用replace替换全部
let replaceStr2 = string.replace(/like/g, 'dislike');
console.log(replaceStr2);// I dislike apple. And I also dislike peach.

// 使用replaceAll 替换全部
let replaceStr3 = string.replaceAll('like', 'dislike');
console.log(replaceStr3);// I dislike apple. And I also dislike peach. </pre>
<pre>// 使用replaceAll +正则全局(g)替换全部</pre>
　　let replaceStr4 = string.replaceAll(/like/g, 'dislike'); 　　console.log(replaceStr4);
<pre>// 注意，在replaceAll 中使用正则表达式，必须要加/g, 否则会报错TypeError</pre>
</div>
2. Promise.any() 
当Promise数组中至少有一个返回了resolved Promise，就返回第一resolved Promise. 如果全部是rejected Promise, 则返回一个rejected Promise.(与Promise race比较，要等到第一resolved才返回结果，而不是第一有结果的Promise就返回） 
<div class="cnblogs_code">
<pre>Promise.any([
new Promise((resolve, reject) => setTimeout(reject, 500, 'jujue1')),
new Promise((resolve, reject) => setTimeout(resolve, 1000, 'jieshou2')),
new Promise((resolve, reject) => setTimeout(resolve, 1200, 'jieshou3')),
]).then(value => console.log('输出结果:', value))
.catch(err => console.log(err))// 输出结果: jieshou2</pre>
</div>
<div class="cnblogs_code">
<pre>Promise.any([
new Promise((resolve, reject) => setTimeout(reject, 500, 'jujue1')),
new Promise((resolve, reject) => setTimeout(reject, 1000, 'jieshou2')),
new Promise((resolve, reject) => setTimeout(reject, 200, 'jieshou3')),
]).then(value => console.log('输出结果:', value)).catch(err => console.log('全部reject',err)) // 全部reject AggregateError: All promises were rejected</pre>
</div>
对比Promise.race()
<div class="cnblogs_code">
<pre>Promise.race([
new Promise((resolve, reject) => setTimeout(reject, 500, 'jujue1')),
new Promise((resolve, reject) => setTimeout(resolve, 1000, 'jieshou2')),
new Promise((resolve, reject) => setTimeout(resolve, 1200, 'jieshou3')),
]).then(value => console.log('输出结果:', value)).catch(err => console.log('reject结果',err))// reject结果 jujue1</pre>
</div>
<div class="cnblogs_code">
<pre>Promise.race([
new Promise((resolve, reject) => setTimeout(reject, 500, 'jujue1')),
new Promise((resolve, reject) => setTimeout(reject, 1000, 'jieshou2')),
new Promise((resolve, reject) => setTimeout(reject, 200, 'jieshou3')),
]).then(value => console.log('输出结果:', value)).catch(err => console.log('reject结果',err)) //reject结果 jieshou3</pre>
</div>
3. WeakRef: 使用WeakRef的class类创建对对象的弱引用(当不存在对对象的其他引用时，不会阻止GC的回收行为)。具体的函数WeakSet() ,  WeakMap()
WeakRef用在何处？如使用map实现许多个需要大量内存的键值缓存，在这种情况下最方便的就是尽快释放键值对占用的内存。
例如：使用方法追踪特定对象调用某个方法的次数，超过1000次提示.
<div class="cnblogs_code">
<pre>let map = new Map();
function doSomething() {
...
}

function count(obj) {
doSomething(obj);
let num = map.get(obj) || 0;
num++;
if ( num > 1000) {
 console.log('当前对象调用次数超过1000次');
}
map.set(obj, num)
}</pre>
</div>
上述代码使用map, 虽然能够实现既定的功能，但是有可能会存在内容溢出（每个调用count的对象都会被永久保存在map中，这份引用一直存在，不会被GC回收）。
我们可以使用WeakMap
<div class="cnblogs_code">
<pre>let wmap = new WeakMap();
function doSomething() {
...
}

function count(obj) {
doSomething();
let num = wmap.get(obj) || 0;
num ++ ;
if ( num > 1000) {
 console.log('当前对象调用次数超过1000次');
}
wmap.set(obj, num);
}</pre>
</div>
使用WeakMap的优势：弱引用，如果没有其他引用，那么就可以被GC回收。
注意：WeakSet和WeakMap都是不可迭代的。
 
4. 逻辑运算符和赋值表达式
<div class="cnblogs_code">
<pre>a ||= b
// 等价于
a = a || (a = b);

a &&= b
// 等价于
a = a && (a = b);

a ??= b
// 等价于
a = a ?? (a = b);</pre>
</div>
小结：
<ul class="list-paddingleft-2">
<li>
a ||= b：当a值不存在时，将b变量赋值给a
</li>
<li>
a &&= b：当a值存在时，将b变量赋值给a
</li>
<li>
a ??= b：当a值为null或者undefined时，将b变量赋值给a
</li>
</ul>
  
来源：https://www.cnblogs.com/ceceliahappycoding/p/11354353.html

頁: [1]

琼殿技术论坛's Archiver

javaScript ES7 ES8 ES9 ES10 ES12新特性