javaScript ES7 ES8 ES9 ES10新特性
参考文献: 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()方法
['a', 'b', 'c', 'd'].includes('b') // true
['a', 'b', 'c', 'd'].includes('b', 1) // true
['a', 'b', 'c', 'd'].includes('b', 2) // false
var ary1 = [NaN];
console.log(ary1.indexOf(NaN))//-1
console.log(ary1.includes(NaN))//true
2. 求幂运算符(**)
用**
来替代Math.pow。
4 ** 3
等价于
Math.pow(4,3)
let n = 4;
n **= 3;
ES8
1. Async Functions
Async Functions也就是我们常说的Async/Await。Async/Await是一种用于处理JS异步操作的语法糖,可以帮助我们摆脱回调地狱,编写更加优雅的代码。
通俗的理解,async关键字的作用是告诉编译器对于标定的函数要区别对待。当编译器遇到标定的函数中的await关键字时,要暂时停止运行,带到await标定的函数处理完毕后,再进行相应操作。如果该函数fulfilled了,则返回值是resolve value,否则得到的就是reject value。
拿普通的promise写法来对比:
async function asyncFunc() {
const result = await otherAsyncFunc();
console.log(result);
} // Equivalent to:
function asyncFunc() {
return otherAsyncFunc()
.then(result => {
console.log(result);
});
}
并行处理多个函数:
async function asyncFunc() {
const [result1, result2] = await Promise.all([
otherAsyncFunc1(),
otherAsyncFunc2(),
]);
console.log(result1, result2);
} // Equivalent to:
function asyncFunc() {
return Promise.all([
otherAsyncFunc1(),
otherAsyncFunc2(),
])
.then([result1, result2] => {
console.log(result1, result2);
});
}
处理错误:
async function asyncFunc() {
try {
await otherAsyncFunc();
} catch (err) {
console.error(err);
}
} // Equivalent to:
function asyncFunc() {
return otherAsyncFunc()
.catch(err => {
console.error(err);
});
}
2. SharedArrayBuffer和Atomics
SharedArrayBuffer允许在多个 workers 和主线程之间共享 SharedArrayBuffer 对象的字节。这种共享有两个好处:
- 可以更快地在 workers 之间共享数据。
- workers 之间的协调变得更简单和更快(与 postMessage() 相比)
API:
构造函数: new SharedArrayBuffer(length)
静态属性: SharedArrayBuffer[Symbol.species]
实例属性: SharedArrayBuffer.prototype.byteLength()
SharedArrayBuffer.prototype.slice(start, end)
Atomics 方法可以用来与其他 workers 进行同步。以下两个操作可以让你读取和写入数据,并且不会被编译器重新排列:
- Atomics.load(ta : TypedArray, index)
- Atomics.store(ta : TypedArray, index, value : T)
这个想法是使用常规操作读取和写入大多数数据,而 Atomics 操作(load ,store 和其他操作)可确保读取和写入安全。通常,要使用自定义同步机制(例如)可以基于Atomics实现。
API:
Atomic 函数的主要操作数必须是 Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array 或 Uint32Array 的一个实例。它必须包裹一个 SharedArrayBuffer.
- Atomics.load(ta : TypedArray, index) : T
读取和返回 ta[index] 上的元素,返回数组指定位置上的值。 - Atomics.store(ta : TypedArray, index, value : T) : T
在 ta[index] 上写入 value,并且返回 value。 - Atomics.exchange(ta : TypedArray, index, value : T) : T
将 ta[index] 上的元素设置为 value ,并且返回索引 index 原先的值。 - Atomics.compareExchange(ta : TypedArray, index, expectedValue, replacementValue) : T
如果 ta[index] 上的当前元素为 expectedValue , 那么使用 replacementValue 替换。并且返回索引 index 原先(或者未改变)的值。
- Atomics.add(ta : TypedArray, index, value) : T
执行 ta[index] += value 并返回 ta[index] 的原始值。 - Atomics.sub(ta : TypedArray, index, value) : T
执行 ta[index] -= value 并返回 ta[index] 的原始值。 - Atomics.and(ta : TypedArray, index, value) : T
执行 ta[index] &= value 并返回 ta[index] 的原始值。 - Atomics.or(ta : TypedArray, index, value) : T
执行 ta[index] |= value 并返回 ta[index] 的原始值。 - Atomics.xor(ta : TypedArray, index, value) : T
执行 ta[index] ^= value 并返回 ta[index] 的原始值。
- Atomics.wait(ta: Int32Array, index, value, timeout=Number.POSITIVE_INFINITY) : (‘not-equal’ | ‘ok’ | ‘timed-out’)
如果 ta[index] 的当前值不是 value ,则返回 ‘not-equal’。否则(等于value时)继续等待,直到我们通过 Atomics.wake() 唤醒或直到等待超时。 在前一种情况下,返回 ‘ok’。在后一种情况下,返回’timed-out’。timeout 以毫秒为单位。记住此函数执行的操作:“如果 ta[index] 为 value,那么继续等待” 。 - Atomics.wake(ta : Int32Array, index, count)
唤醒等待在 ta[index] 上的 count workers。
3. Object.values and Object.entries
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx'] Object.values('es8'); // ['e', 's', '8']
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']]
4. String padding
为 String 对象增加了 2 个函数:padStart 和 padEnd。填补字符串的首部和尾部,为了使得到的结果字符串的长度能达到给定的长度(targetLength)。你可以通过特定的字符,或者字符串,或者默认的空格填充它。
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
'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'
5. Object.getOwnPropertyDescriptors
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
// }
// }
6. 结尾逗号
// 参数定义时
function foo(
param1,
param2,
) {} // 函数调用时
foo(
'abc',
'def',
); // 对象中
let obj = {
first: 'Jane',
last: 'Doe',
}; // 数组中
let arr = [
'red',
'green',
'blue',
];
ES9新特性
1.异步迭代器:异步迭代器对象的next()方法返回了一个Promise,解析后的值跟普通的迭代器类似。
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}
}
2. Rest/Spread 属性
rest参数和展开运算符,这项特性在ES6中已经引入,但是ES6中仅限于数组。在ES9中,为对象提供了像数组一样的rest参数和扩展运算符。
const obj = {
a: 1,
b: 2,
c: 3
}
const { a, ...param } = obj;
console.log(a) //
console.log(param) //{b: 2, c: 3} function foo({a, ...param}) {
console.log(a); //
console.log(param) //{b: 2, c: 3}
}
3. Promise.prototype.finally()
finally的回调总会被执行。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
4. 命名捕获组
ES9中可以通过名称来识别捕获组:
(?<year>[0-9]{4})
before:
const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/; const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; //
const month = matchObj[2]; //
const day = matchObj[3]; //
after:
const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<date>[0-9]{2})/; const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; //
const month = matchObj.groups.month; //
const day = matchObj.groups.date; // // 使用解构语法更为简便
const {groups: {day, year}} = RE_DATE.exec('1999-12-31');
console.log(year); //
console.log(day); //
ES10新特性
1. 选择性的catch绑定
在使用try catch错误异常处理时,可以选择性的给catch传入参数(可以不给catch传参)
正常使用try catch:
try {
// do something
} catch (err) {
// console.log('err', err);
}
在es10中使用时,可以:
try {
// do something
} catch {
// do something
}
2. JSON.superset
背景: JSON内容可以正常包含 行分隔符(\u2028)和 段落分隔符(\u2029)而ECMAScript却不行。
在ES10中,可以直接使用
eval('\u2029');
而不会在提示错误。
3. Symbol.prototype.description
为Symbol类型增加Symbol.prototype.description的一个访问器属性,用来获取Symbol类型数据的描述信息。
console.log(Symbol('test').description);
// 'test' console.log(Symbol.for('test').description);
// 'test' console.log(Symbol.iterator.description);
// 'Symbol.iterator'
4. Function.prototype.toString
在ES10之后,函数调用toString()方法,将准确返回原有信息,包括空格和注释等。
let funcToString = function () {
//do something
console.log('test');
}
/**
"function () {
//do something
console.log('test');
}"
*/
5. Object.fromEntries()
Object.fromEntries()是Object.entries()的反转。
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}
map转换为object
let map = new Map([['name','alex'], ['age', 18]]);
const obj2 = Object.fromEntries(map);
console.log(obj2);
// object {name: 'alex', age: 18}
6. 更友好的JSON.stringify
正常字符的表示不变:
JSON.stringify('javaScript ES7 ES8 ES9 ES10新特性的更多相关文章
- 细解JavaScript ES7 ES8 ES9 新特性
题记:本文提供了一个在线PPT版本,方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver 本文的大部分内容译自作者Axel Rauschmayer博士的网站,想了解 ...
- ES6、ES7、ES8、ES9、ES10新特性
ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多. 在这里列举几个常 ...
- ES9的新特性:异步遍历Async iteration
ES9的新特性:异步遍历Async iteration 目录 简介 异步遍历 异步iterable的遍历 异步iterable的生成 异步方法和异步生成器 简介 在ES6中,引入了同步iteratio ...
- ES9的新特性:正则表达式RegExp
简介 正则表达式是我们做数据匹配的时候常用的一种工具,虽然正则表达式的语法并不复杂,但是如果多种语法组合起来会给人一种无从下手的感觉. 于是正则表达式成了程序员的噩梦.今天我们来看一下如何在ES9中玩 ...
- ECMAScript 2019(ES10)新特性简介
简介 ES10是ECMA协会在2019年6月发行的一个版本,因为是ECMAScript的第十个版本,所以也称为ES10. 今天我们讲解一下ES10的新特性. ES10引入了2大特性和4个小的特性,我们 ...
- ECMAScript 2018(ES9)新特性简介
目录 简介 异步遍历 Rest/Spread操作符和对象构建 Rest Spread 创建和拷贝对象 Spread和bject.assign() 的区别 正则表达式 promise.finally 模 ...
- ES6:JavaScript 新特性
我相信,在ECMAScript.next到来的时候,我们现在每天都在写的JavaScript代码将会发生巨大的变化.接下来的一年将会是令JavaScript开发者们兴奋的一年,越来越多的特性提案将被最 ...
- ES9新特性
这篇文章主要介绍ES2018(ES9)的新特性, 以及使用方法 JS是一门跨平台的语言, ES6也就是ECMAScript 2015 花费了5年的时间敲定, 是一次非常大的改版, 之后每年都有一个小版 ...
- ES10(2019)有哪些更新和新特性?
ES10新特性(2019) 行分隔符(U + 2028)和段分隔符(U + 2029)符号现在允许在字符串文字中,与JSON匹配 更加友好的 JSON.stringify 新增了Array的flat( ...
随机推荐
- 0day堆(2)堆的调试实验
堆的调试实验 调试态堆管理策略和常态堆管理策略:前者只使用空表不用块表,不真实 使用调试器加载函数会触发前者 __asm int3 调试最真实的栈 未启用块表的堆区信息 堆区起始位置(假设为0x005 ...
- QT 的 parent 该如何理解
对话框是GUI程序和用户进行简短交互的顶层窗口,所谓顶层窗口即始终在主窗口之上显示.QDialog是Qt所有类型的对话框窗口的基类,它继承于QWidget,是一种容器类型组件. QWidget是所有窗 ...
- 设计数据库 ER 图太麻烦?不妨试试这两款工具,自动生成数据库 ER 图!!!
忙,真忙 点赞再看,养成习惯,微信搜索『程序通事』,关注就完事了! 点击查看更多精彩的文章 这两个星期真是巨忙,年前有个项目因为各种莫名原因,一直拖到这个月才开始真正测试.然后上周又接到新需求,马不停 ...
- 徐州H
#include<bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) #defi ...
- Android Room SQLite持久层框架
原文链接 前言 Android中提供了SQLite数据库进行数据的持久化 ,并提供了对应API访问数据库,而Room框架提供了SQLite数据访问抽象层,为高效的数据库访问层带来便捷 APP可以缓存用 ...
- MySQL Change Data Directory
为什么80%的码农都做不了架构师?>>> Stop MySQL using the following command: sudo /etc/init.d/mysql stop ...
- 图论--割边--Tarjan模板
#include<iostream> #include<stdio.h> #include<vector> using namespace std; const i ...
- 你离高薪 offer 只差一个Redis入门,我是认真的
说起来,可能有些小伙伴会不相信,我是第一次用 Redis,真的.因为公司小,业务量小,Redis 根本派不上用场.不过,最近打算把系统升级一下,顺带把当下时髦的技术入个门,"与时俱进&quo ...
- Day_09【常用API】扩展案例3_删除源字符串中的指定字符,并计算指定字符出现的次数
分析以下需求,并用代码实现 1.键盘录入一个源字符串由字符串变量scrStr接收 2.键盘录入一个要删除的字符串由字符串变量delStr接收 3.要求 删除该字scrStr符串中的所有delStr字符 ...
- YOLOV4所用到的一些tricks
原文链接:http://arxiv.org/abs/2004.10934 整体框架 Bag of Freebies(BoF) & Bag of Specials (BoS) B ...