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( ...
随机推荐
- 五分钟秒懂机器学习混淆矩阵、ROC和AUC
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第18篇文章,我们来看看机器学习领域当中,非常重要的其他几个指标. 混淆矩阵 在上一篇文章当中,我们在介绍召回率.准确率 ...
- Makefile 中引用多个 include 路径
LIB=-L/usr/informix/lib/c++ INC=-I/usr/informix/incl/c++ -I/opt/informix/incl/public default: main m ...
- CF1324 --- Maximum White Subtree
CF1324 --- Maximum White Subtree 题干 You are given a tree consisting of \(n\) vertices. A tree is a c ...
- Linux系统介绍与环境搭建准备
1 什么是操作系统? 操作系统,Operating System,简称OS,是计算机系统中必不可少的基础软件,它是应用程序运行以及用户操作必备的基础环境支撑,是计算机系统的核心. 操作系统的作用是 ...
- Linux硬盘分区知识
前言 硬盘使用前,一般要分区,格式化(创建文件系统)<== 存放数据 类比,房子使用前,一般要隔断,装修,买家具,再住人. 分区 一块硬盘: 主分区.扩展分区.逻辑分区 主分区+扩展分区的数量& ...
- Linux中的常用快捷键
tab 命令或路径补全键,linux里面最有用的快捷键,如果tab不到路径或命令,就代表没有这个路径或者命令,还有可能是权限不对 ctrl+c 终止当前任务命令或程序 ctrl+d 退出当前用户环境, ...
- Mac查看与修改系统默认shell
Mac查看与修改系统默认shell 查看所有shell cat /etc/shells 输出: # List of acceptable shells for chpass(1). # Ftpd wi ...
- nginx经验分享
如果我们在使用启动nginx时,遇到这样的提示: nginx: [alert] could not open error log file: open() "/usr/local/var/l ...
- 题目分享J
题意:从一棵树的树根出发,除树根外每个节点都有其能经过的最多次数与经过后会获得的价值(可能为负,最多只能领一次价值),问最终走回树根能获得的最大价值以及有无可达到此价值的多种走法(ps:一开始在树根就 ...
- 说一说Web开发中两种常用的分层架构及其对应的代码模型
昨天妹子让我帮她解决个问题,本以为可以轻松搞定,但是打开他们项目的一瞬间,我头皮发麻.本身功能不多的一个小项目,解决方案里竟然有几十个类库.仅仅搞明白各个类库的作用,代码层次之间的引用关系就花了一个多 ...