es7,es8

zoukankan html css js c++ java

es7,es8
ES7新特性

ES7在ES6的基础上添加了三项内容：求幂运算符（**）、Array.prototype.includes()方法、函数作用域中严格模式的变更。

Array.prototype.includes()方法

includes()的作用，是查找一个值在不在数组里，若在，则返回 true，反之返回 false。基本用法：
1. ['a', 'b', 'c'].includes('a') // true
2. ['a', 'b', 'c'].includes('d') // false
Array.prototype.includes()方法接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回 true，否则返回 false。且看下面示例：
1. ['a', 'b', 'c', 'd'].includes('b') // true
2. ['a', 'b', 'c', 'd'].includes('b', 1) // true
3. ['a', 'b', 'c', 'd'].includes('b', 2) // false
那么，我们会联想到ES6里数组的另一个方法indexOf，下面的示例代码是等效的：
1. ['a', 'b', 'c'].includes('a') //true
2. ['a', 'b', 'c'].indexOf('a') > -1 //true
此时，就有必要来比较下两者的优缺点和使用场景了。
- 简便性
从这一点上来说，includes略胜一筹。熟悉indexOf的同学都知道，indexOf返回的是某个元素在数组中的下标值，若想判断某个元素是否在数组里，我们还需要做额外的处理，即判断该返回值是否>-1。而includes则不用，它直接返回的便是Boolean型的结果。
- 精确性
两者使用的都是 === 操作符来做值的比较。但是includes()方法有一点不同，两个NaN被认为是相等的，即使在 NaN===NaN结果是 false的情况下。这一点和 indexOf()的行为不同， indexOf()严格使用 ===判断。请看下面示例代码：
1. et demo = [1, NaN, 2, 3]
2. demo.indexOf(NaN) //-1
3. demo.includes(NaN) //true
上述代码中， indexOf()方法返回-1，即使NaN存在于数组中，而 includes()则返回了true。
提示：由于它对NaN的处理方式与indexOf不同，假如你只想知道某个值是否在数组中而并不关心它的索引位置，建议使用includes()。如果你想获取一个值在数组中的位置，那么你只能使用indexOf方法。
　　includes()还有一个怪异的点需要指出，在判断 +0 与 -0 时，被认为是相同的。
1. [1, +0, 3, 4].includes(-0) //true
2. [1, +0, 3, 4].indexOf(-0) //1
在这一点上， indexOf()与 includes()的处理结果是一样的，前者同样会返回 +0 的索引值。

注意：在这里，需要注意一点， includes()只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些，是无法判断的。

求幂运算符（**）

基本用法

3 ** 2 // 9

效果同：

Math.pow(3, 2) // 9

* 是一个用于求幂的中缀算子，比较可知，中缀符号比函数符号更简洁，这也使得它更为可取。下面让我们扩展下思路，既然说*是一个运算符，那么它就应该能满足类似加等的操作，我们姑且称之为幂等，例如下面的例子，a的值依然是9：
1. let a = 3
2. a **= 2
3. // 9
对比下其他语言的指数运算符：
- Python: x ** y
- CoffeeScript: x ** y
- F#: x ** y
- Ruby: x ** y
- Perl: x ** y
- Lua, Basic, MATLAB: x ^ y
不难发现，ES的这个新特性是从其他语言（Python，Ruby等）模仿而来的。

ES8新特性

异步函数(Async functions)

为什么要引入async

众所周知，JavaScript语言的执行环境是“单线程”的，那么异步编程对JavaScript语言来说就显得尤为重要。以前我们大多数的做法是使用回调函数来实现JavaScript语言的异步编程。回调函数本身没有问题，但如果出现多个回调函数嵌套，例如：进入某个页面，需要先登录，拿到用户信息之后，调取用户商品信息，代码如下：
1. this.$http.jsonp('/login', (res) => {
2. this.$http.jsonp('/getInfo', (info) => {
3. // do something
4. })
5. })
假如上面还有更多的请求操作，就会出现多重嵌套。代码很快就会乱成一团，这种情况就被称为“回调函数地狱”（callback hell）。

于是，我们提出了Promise，它将回调函数的嵌套，改成了链式调用。写法如下：
1. var promise = new Promise((resolve, reject) => {
2. this.login(resolve)
3. })
4. .then(() => this.getInfo())
5. .catch(() => { console.log("Error") })
从上面可以看出，Promise的写法只是回调函数的改进，使用then方法，只是让异步任务的两段执行更清楚而已。Promise的最大问题是代码冗余，请求任务多时，一堆的then，也使得原来的语义变得很不清楚。此时我们引入了另外一种异步编程的机制：Generator。

Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。一个简单的例子用来说明它的用法：
1. function* helloWorldGenerator() {
2. yield 'hello';
3. yield 'world';
4. return 'ending';
5. }
6. var hw = helloWorldGenerator();
上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。上述代码分步执行如下：
1. // { value: 'hello', done: false }
2. hw.next()
3. // { value: 'world', done: false }
4. hw.next()
5. // { value: 'ending', done: true }
6. hw.next()
7. // { value: undefined, done: true }
Generator函数的机制更符合我们理解的异步编程思想。

用户登录的例子，我们用Generator来写，如下：
1. var gen = function* () {
2. const f1 = yield this.login()
3. const f2 = yield this.getInfo()
4. };
虽然Generator将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。此时，我们便希望能出现一种能自动执行Generator函数的方法。我们的主角来了：async/await。

ES8引入了async函数，使得异步操作变得更加方便。简单说来，它就是Generator函数的语法糖。
1. async function asyncFunc(params) {
2. const result1 = await this.login()
3. const result2 = await this.getInfo()
4. }
是不是更加简洁易懂呢？

变体

异步函数存在以下四种使用形式：
- 函数声明： asyncfunctionfoo(){}
- 函数表达式： constfoo=asyncfunction(){}
- 对象的方式： letobj={asyncfoo(){}}
- 箭头函数： constfoo=async()=>{}
常见用法汇总

处理单个异步结果：
1. async function asyncFunc() {
2. const result = await otherAsyncFunc();
3. console.log(result);
4. }
顺序处理多个异步结果：
1. async function asyncFunc() {
2. const result1 = await otherAsyncFunc1();
3. console.log(result1);
4. const result2 = await otherAsyncFunc2();
5. console.log(result2);
6. }
并行处理多个异步结果：
1. async function asyncFunc() {
2. const [result1, result2] = await Promise.all([
3. otherAsyncFunc1(),
4. otherAsyncFunc2()
5. ]);
6. console.log(result1, result2);
7. }
处理错误：
1. async function asyncFunc() {
2. try {
3. await otherAsyncFunc();
4. } catch (err) {
5. console.error(err);
6. }
7. }
若想进一步了解async的具体实践，可参见阮一峰的博客文章，链接奉上：http://es6.ruanyifeng.com/#docs/async

Object.entries()和Object.values()

Object.entries()

如果一个对象是具有键值对的数据结构，则每一个键值对都将会编译成一个具有两个元素的数组，这些数组最终会放到一个数组中，返回一个二维数组。简言之，该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。若目标对象是数组时，则会将数组的下标作为键值返回。例如：
1. Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
2. Object.entries([1, 2]) //[['0', 1], ['1', 2]]
注意：键值对中，如果键的值是Symbol，编译时将会被忽略。例如：
1. Object.entries({ [Symbol()]: 1, two: 2 }) //[['two', 2]]
Object.entries()返回的数组的顺序与for-in循环保持一致，即如果对象的key值是数字，则返回值会对key值进行排序，返回的是排序后的结果。例如：
1. Object.entries({ 3: 'a', 4: 'b', 1: 'c' }) //[['1', 'c'], ['3', 'a'], ['4', 'b']]
使用 Object.entries()，我们还可以进行对象属性的遍历。例如：
1. let obj = { one: 1, two: 2 };
2. for (let [k,v] of Object.entries(obj)) {
3. console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
4. }
6. //输出结果如下：
7. 'one': 1
8. 'two': 2
Object.values()

它的工作原理跟 Object.entries()很像，顾名思义，它只返回自己的键值对中属性的值。它返回的数组顺序，也跟 Object.entries()保持一致。
1. Object.values({ one: 1, two: 2 }) //[1, 2]
2. Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']
字符串填充：padStart和padEnd

ES8提供了新的字符串方法-padStart和padEnd。 padStart函数通过填充字符串的首部来保证字符串达到固定的长度，反之， padEnd是填充字符串的尾部来保证字符串的长度的。该方法提供了两个参数：字符串目标长度和填充字段，其中第二个参数可以不填，默认情况下使用空格填充。
1. 'Vue'.padStart(10) //' Vue'
2. 'React'.padStart(10) //' React'
3. 'JavaScript'.padStart(10) //'JavaScript'
可以看出，多个数据如果都采用同样长度的padStart，相当于将呈现内容右对齐。

上面示例中我们只定义了第一个参数，那么我们现在来看看第二个参数，我们可以指定字符串来代替空字符串。
1. 'Vue'.padStart(10, '_*') //'_*_*_*_Vue'
2. 'React'.padStart(10, 'Hello') //'HelloReact'
3. 'JavaScript'.padStart(10, 'Hi') //'JavaScript'
4. 'JavaScript'.padStart(8, 'Hi') //'JavaScript'
从上面结果来看，填充函数只有在字符长度小于目标长度时才有效，若字符长度已经等于或小于目标长度时，填充字符不会起作用，而且目标长度如果小于字符串本身长度时，字符串也不会做截断处理，只会原样输出。

padEnd函数作用同 padStart，只不过它是从字符串尾部做填充。来看个小例子：
1. 'Vue'.padEnd(10, '_*') //'Vue_*_*_*_'
2. 'React'.padEnd(10, 'Hello') //'ReactHello'
3. 'JavaScript'.padEnd(10, 'Hi') //'JavaScript'
4. 'JavaScript'.padEnd(8, 'Hi') //'JavaScript'
Object.getOwnPropertyDescriptors()

顾名思义，该方法会返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的。先来看个它的基本用法：
1. let obj = {
2. id: 1,
3. name: 'test',
4. get gender() {
5. console.log('gender')
6. },
7. set grade(g) {
8. console.log(g)
9. }
10. }
11. Object.getOwnPropertyDescriptors(obj)
13. //输出结果为：
14. {
15. gender: {
16. configurable: true,
17. enumerable: true,
18. get: f gender(),
19. set: undefined
20. },
21. grade: {
22. configurable: true,
23. enumerable: true,
24. get: undefined,
25. set: f grade(g)
26. },
27. id: {
28. configurable: true,
29. enumerable: true,
30. value: 1,
31. writable: true
32. },
33. name: {
34. configurable: true,
35. enumerable: true,
36. value: 'test',
37. writable: true
38. }
39. }
方法还提供了第二个参数，用来获取指定属性的属性描述符。
1. let obj = {
2. id: 1,
3. name: 'test',
4. get gender() {
5. console.log('gender')
6. },
7. set grade(g) {
8. console.log(g)
9. }
10. }
11. Object.getOwnPropertyDescriptors(obj, 'id')
13. //输出结果为：
14. {
15. id: {
16. configurable: true,
17. enumerable: true,
18. value: 1,
19. writable: true
20. }
21. }
由上述例子可知，该方法返回的描述符，会有两种类型：数据描述符、存取器描述符。返回结果中包含的键可能的值有：configurable、enumerable、value、writable、get、set。

使用过 Object.assign()的同学都知道，assign方法只能拷贝一个属性的值，而不会拷贝它背后的复制方法和取值方法。 Object.getOwnPropertyDescriptors()主要是为了解决 Object.assign()无法正确拷贝 get属性和 set属性的问题。
1. let obj = {
2. id: 1,
3. name: 'test',
4. get gender() {
5. console.log('gender')
6. }
7. }
8. Object.assign(obj)
10. //输出结果为：
11. {
12. gender: undefined
13. id: 1,
14. name: 'test'
15. }
此时， Object.getOwnPropertyDescriptors方法配合 Object.defineProperties方法，就可以实现正确拷贝。
1. let obj = {
2. id: 1,
3. name: 'test',
4. get gender() {
5. console.log('gender')
6. }
7. }
8. let obj1 = {}
9. Object.defineProperties(obj1, Object.getOwnPropertyDescriptors(obj))
10. Object.getOwnPropertyDescriptors(obj1)
12. //输出结果为：
13. {
14. gender: {
15. configurable: true,
16. enumerable: true,
17. get: f gender(),
18. set: undefined
19. },
20. id: {
21. configurable: true,
22. enumerable: true,
23. value: 1,
24. writable: true
25. },
26. name: {
27. configurable: true,
28. enumerable: true,
29. value: 'test',
30. writable: true
31. }
32. }
上述代码演示了，我们如何来拷贝一个属性值为赋值方法或者取值方法的对象。更多 Object.getOwnPropertyDescriptors的使用细则，可参见阮一峰的博客文章，链接奉上：http://es6.ruanyifeng.com/#docs/object#Object-getOwnPropertyDescriptors

共享内存和原子（Shared memory and atomics）

ES8引入了两部分内容：新的构造函数 SharedArrayBuffer、具有辅助函数的命名空间对象 Atomics。共享内存允许多个线程并发读写数据，而原子操作则能够进行并发控制，确保多个存在竞争关系的线程顺序执行。

共享内存和原子也称为共享阵列缓冲区，它是更高级的并发抽象的基本构建块。它允许在多个工作者和主线程之间共享 SharedArrayBuffer对象的字节（缓冲区是共享的，用以访问字节，将其包装在类型化的数组中）。这种共享有两个好处：
- 可以更快地在web worker之间共享数据
- web worker之间的协调变得更加简单和快速
那么，我们为什么要引入共享内存和原子的概念呢？以及 SharedArrayBuffer的竞争条件是什么， Atomics又是如何解决这种竞争的？推荐下面的文章，文章讲解很详细，图文并茂，带你深入了解 SharedArrayBuffer和 Atomics。

内存管理碰撞课程：https://segmentfault.com/a/1190000009878588

图解 ArrayBuffers 和 SharedArrayBuffers：https://segmentfault.com/a/1190000009878632

用 Atomics 避免 SharedArrayBuffers 竞争条件：https://segmentfault.com/a/1190000009878699

Atomics对象提供了许多静态方法，配合 SharedArrayBuffer对象一起使用，可以帮助我们去构建一个内存共享的多线程编程环境。Atomic操作安装在 Atomics模块上。与其他全局对象不同， Atomics不是构造函数。您不能使用new操作符或 Atomics作为函数调用该对象。所有的属性和方法 Atomics都是静态的，这一点跟Math类似。下面链接贴出了 Atomics提供的一些基本方法：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics

关于共享内存和原子的深入研究，也可以参考Axel Rauschmayer博士的《Exploring ES2016 and ES2017》一书中的内容。具体章节链接如下：

http://exploringjs.com/es2016-es2017/ch_shared-array-buffer.html

函数参数列表与调用中的尾部逗号

该特性允许我们在定义或者调用函数时添加尾部逗号而不报错。
1. let foo = function (
2. a,
3. b,
4. c,
5. ) {
6. console.log('a:', a)
7. console.log('b:', b)
8. console.log('c:', c)
9. }
10. foo(1, 3, 4, )
12. //输出结果为：
13. a: 1
14. b: 3
15. c: 4
上面这种方式调用是没有问题的。函数的这种尾逗号也是向数组和字面量对象中尾逗号看齐，它适用于那种多行参数并且参数名很长的情况，开发过程中，如果忘记删除尾部逗号也没关系，ES8已经支持这种写法。

这么用有什么好处呢？

首先，当我们调整结构时，不会因为最后一行代码的位置变动，而去添加或者删除逗号。

其次，在版本管理上，不会出现因为一个逗号，而使本来只有一行的修改，变成两行。例如下面：

从
1. (
2. 'abc'
3. )
到
1. (
2. 'abc',
3. 'def'
4. )
在我们版本管理系统里，它会监测到你有两处更改，但是如果我们不必去关心逗号的存在，每一行都有逗号时，新加一行，也只会监测到一行的修改。

建议的ES9功能

回想一下，每个ECMAScript功能提案都经过了几个阶段：
- 阶段4意味着功能将在下一个版本中（或之后的版本）。
- 阶段3意味着功能仍然有机会被包含在下一个版本中。
第4阶段和部分ECMAScript规范草案

以下功能目前在第4阶段：
- Template Literal Revision：模板文字修订（蒂姆·迪士尼）
候选功能（第3阶段）

以下功能目前在第3阶段：
- Function.prototype.toString 修订版（Michael Ficarra）
- global（Jordan Harband）
- Rest/Spread Properties：Rest/Spread属性（SebastianMarkbåge）
- Asynchronous Iteration：异步迭代（Domenic Denicola）
- import() （Domenic Denicola）
- RegExp Lookbehind Assertions：RegExp Lookbehind断言（Daniel Ehrenberg）
- RegExp Unicode Property Escapes：RegExp Unicode属性转义（Brian Terlson，Daniel Ehrenberg，Mathias Bynens）
- RegExp named capture groups：RegExp命名捕获组（Daniel Ehrenberg，Brian Terlson）
- s (dotAll) flag for regular expressions：s（dotAll）标志为正则表达式（Mathias Bynens，Brian Terlson）
- Promise.prototype.finally() （Jordan Harband）
- BigInt - 任意精度整数（Daniel Ehrenberg）
- Class fields（Daniel Ehrenberg，Jeff Morrison）
- Optional catch binding（Michael Ficarra）
下面贴出了解和学习ES的官方链接，供大家查阅：
- ES6：http://www.ecma-international.org/ecma-262/6.0/index.html
- ES7：http://www.ecma-international.org/ecma-262/7.0/index.html
- ES8：http://www.ecma-international.org/ecma-262/8.0/index.html
- TC39提案：https://github.com/tc39/ecma262
查看全文

相关阅读:
web前端防治重复提交
 layabox笔记
 fixfff
laybax
小游戏初始化，资源加载异常处理，黑屏处理
 微信小游戏资源加载页与云存储
 前端唠嗑
 css 的一些样式笔记
 小游戏虚拟手柄
 VUE最佳实践

原文地址：https://www.cnblogs.com/cina33blogs/p/9544021.html

ES7新特性

Array.prototype.includes()方法

求幂运算符（**）

ES8新特性

异步函数(Async functions)

为什么要引入async

变体

常见用法汇总

Object.entries()和Object.values()

Object.entries()

Object.values()

字符串填充：padStart和padEnd

Object.getOwnPropertyDescriptors()

共享内存和原子（Shared memory and atomics）

函数参数列表与调用中的尾部逗号

建议的ES9功能

第4阶段和部分ECMAScript规范草案

候选功能（第3阶段）

下面贴出了解和学习ES的官方链接，供大家查阅：