ES5、ES6、ES7、ES8特性

myskya

1.JavaScript

• ECMAScript、DOM（文档对象模型）、BOM（浏览器对象模型）
• JavaScript语言的执行环境是“单线程”
  

2.ES5

• strict模式
  
  • 不允许使用未声明的变量
  • 不允许删除变量或对象、函数
  • 不允许变量重名
  • 不允许使用八进制
  • 不允许使用转义字符
  • 不允许对只读属性赋值
  • 不允许对一个使用getter方法读取的属性进行赋值
  • 不允许删除一个不允许删除的属性
  • 变量名不能使用 "eval" 字符串
  • 变量名不能使用 "arguments" 字符串
  • 在作用域 eval() 创建的变量不能被调用
    

1. "use strict";
   
2. eval ("var x = 2");
   
3. alert (x);               // 报错

复制代码

禁止this关键字指向全局对象

1. function f(){
   
2.     return !this;
   
3. }
   
4. // 返回false，因为"this"指向全局对象，"!this"就是false
   
5. 
   
6. function f(){
   
7.     "use strict";
   
8.     return !this;
   
9. }
   
10. // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

复制代码

• 增加多种方法（Array、Object）：every、forEach、Object.getPrototypeOf、Object.create等
  

3.ES6

• 块级作用域 关键字let, 常量const
• 对象属性赋值简写(property value shorthand)
• 赋值解构
• 函数参数 - 默认值、参数打包、 数组展开（Default 、Rest 、Spread）
• 箭头函数 (Arrow functions)
• 字符串模板 Template strings ${}
• 迭代器（Iterators）for (var n of ['a','b','c'])
• 生成器 （Generators）
• class、constructor、extends、super
• Modules（模块）

  • 具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点。

  • 类似AMD，支持异步加载和可配置的模块加载。

    
    

• Map + Set + WeakMap + WeakSet

  • WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉。

    
    

• Math + Number + String + Array + Object APIs

• Proxies：使用代理（Proxy）监听对象的操作

• .Symbols：调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。

• ！！！Promises：处理异步操作的对象，用链式调用组织代码

  
  

1. var promise = new Promise((resolve, reject) => {
   
2.   this.login(resolve)
   
3. }) //链式调用
   
4. .then(() => this.getInfo())
   
5. .catch(() => { console.log("Error") })

复制代码

4.ES7

• 求幂运算符（**）
  

1. 3 ** 2           // 9
   
2. 等价于：
   
3. Math.pow(3, 2)   // 9

复制代码

• Array.prototype.includes()方法:不能比较复杂类型数据，查找一个值在不在数组里，若在，则返回true，反之返回false。
  

1. ['a', 'b', 'c'].includes('a')     // true
   
2. 等价于
   
3. ['a', 'b', 'c'].indexOf('a') > -1      //true

复制代码

• 函数作用域中严格(strict)模式的变更。
• 装饰器(Decorator)：修改类的行为
  
  • 参数：target（所要修饰的目标类）, name（所要修饰的属性名）, descriptor（该属性的描述对象）
  • 使用：npm install core-decorators –save
    

1. // 将某个属性或方法标记为不可写。
   
2. @readonly   
   
3. // 标记一个属性或方法，以便它不能被删除; 也阻止了它通过Object.defineProperty被重新配置
   
4. @nonconfigurable  
   
5. // 立即将提供的函数和参数应用于该方法，允许您使用lodash提供的任意助手来包装方法。 第一个参数是要应用的函数，所有其他参数将传递给该装饰函数。
   
6. @decorate  
   
7. // 如果你没有像Babel 6那样的装饰器语言支持，或者甚至没有编译器的vanilla ES5代码，那么可以使用applyDecorators（）助手。
   
8. @extendDescriptor
   
9. // 将属性标记为不可枚举。
   
10. @nonenumerable
    
11. // 防止属性初始值设定项运行，直到实际查找修饰的属性。
    
12. @lazyInitialize
    
13. // 强制调用此函数始终将此引用到类实例，即使该函数被传递或将失去其上下文。
    
14. @autobind
    
15. // 使用弃用消息调用console.warn（）。 提供自定义消息以覆盖默认消息。
    
16. @deprecate
    
17. // 在调用装饰函数时禁止任何JavaScript console.warn（）调用。
    
18. @suppressWarnings
    
19. // 将属性标记为可枚举。
    
20. @enumerable
    
21. // 检查标记的方法是否确实覆盖了原型链上相同签名的函数。
    
22. @override  
    
23. // 使用console.time和console.timeEnd为函数计时提供唯一标签，其默认前缀为ClassName.method。
    
24. @time
    
25. // 使用console.profile和console.profileEnd提供函数分析，并使用默认前缀为ClassName.method的唯一标签。
    
26. @profile

复制代码

• @noConcurrent 避免并发调用，在上一次操作结果返回之前，不响应重复操作
• @makeMutex 多函数互斥，具有相同互斥标识的函数不会并发执行
• @withErrToast 捕获async函数中的异常，并进行错误提示
• @mixinList 用于分页加载，上拉加载时返回拼接数据及是否还有数据提示
• @typeCheck 检测函数参数类型
  

1. import {noConcurrent} from './decorators';
   
2. methods: {
   
3.   @noConcurrent     //避免并发，点击提交后，在接口返回之前无视后续点击
   
4.   async onSubmit(){
   
5.     let submitRes = await this.$http({...});
   
6.     //...
   
7.     return;
   
8.   }
   
9. }

复制代码

1. methods: {
   
2.   @mixinList({needToast: false})
   
3.   async loadGoods(params = {}){
   
4.     let goodsRes = await this.$http(params);
   
5.     return goodsRes.respData.infos;
   
6.   },
   
7.   async hasMore() {
   
8.     let result = await this.loadgoods(params);
   
9.     if(result.state === 'nomore') this.tipText = '没有更多了';
   
10.     this.goods = result.list;
    
11.   }
    
12. }
    
13. // 上拉加载调用hasMore函数，goods数组就会得到所有拼接数据
    
14. // loadGoods可传三个参数 params函数需要参数 ,startNum开始的页码,clearlist清空数组
    
15. // mixinList可传一个参数 needToast 没有数据是否需要toast提示

复制代码

5.ES8

• 异步函数（Async function）使用形式：
  

函数声明： async function foo() {}

函数表达式： const foo = async function() {}

对象的方式： let obj = { async foo() {} }

箭头函数： const foo = async () => {}

1. this.$http.jsonp('/login', (res) => {
   
2.   this.$http.jsonp('/getInfo', (info) => {
   
3.     // do something
   
4.   })
   
5. })

复制代码

• 异步编程机制：Generator     async/await
  

1. function * 函数名(){
   
2.     yieId 'hello';
   
3.     yieId 'world';
   
4.     return 'ending';
   
5. }
   
6. var hs = 函数名();
   
7. 
   
8. hs.next();
   
9. // { value: 'hello', done: false }
   
10. hs.next();
    
11. // { value: 'world', done: false }
    
12. hs.next();
    
13. // { value: 'ending', done: true }
    
14. hs.next();
    
15. // { value: undefined, done: true }
    
16. 
    
17. //自动执行Generator函数
    
18. async function asyncFunc(params) {
    
19.   const result1 = await this.login()
    
20.   const result2 = await this.getInfo()
    
21. }

复制代码

调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，必须调用遍历器对象的next方法，使得指针移向下一个状态。每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

yieId：(产出),分段执行,yield表达式是暂停执行的标记，而next方法可以恢复执行

• Object.entries()和Object.values()

  
  

（1）Object.entries()：具有键值对的数据结构，则每一个键值对都将会编译成一个具有两个元素的数组，这些数组最终会放到一个数组中，返回一个二维数组，若目标对象是数组时，则会将数组的下标作为键值返回。键值对中，如果键的值是Symbol，编译时将会被忽略

1. Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
   
2. Object.entries([1, 2])                //[['0', 1], ['1', 2]]

复制代码

• 字符串填充：padStart和padEnd

  
  

padStart函数：通过填充字符串的首部来保证字符串达到固定的长度，默认情况下使用空格填充

padEnd：填充字符串的尾部来保证字符串的长度的。

1. 'Vue'.padStart(10)           //'       Vue'
   
2. 'Vue'.padStart(10, '_*')           //'_*_*_*_Vue'
   
3. 
   
4. 'Vue'.padEnd(10, '_*')           //'Vue_*_*_*_'

复制代码

Object.getOwnPropertyDescriptors()：返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的。

• 该方法返回的描述符，会有两种类型：数据描述符、存取器描述符

• 返回结果中包含的键可能的值有：configurable、enumerable、value、writable、get、set。

  
  

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')
    
12. 
    
13. //输出结果为：
    
14. {
    
15.   id: {
    
16.     configurable: true,
    
17.     enumerable: true,
    
18.     value: 1,
    
19.     writable: true
    
20.   }
    
21. }
    
22. 
    
23. 和assign区别
    
24. Object.assign(obj)
    
25. 
    
26. //输出结果为：
    
27. {
    
28.   gender: undefined
    
29.   id: 1,
    
30.   name: 'test'
    
31. }

复制代码

• 共享内存和原子（共享阵列缓冲区，Shared memory and atomics）笔记待完善

  • 新的构造函数SharedArrayBuffer、具有辅助函数的命名空间对象Atomics

  • 多线程并发读写数据

    
    

• 添加尾部逗号而不报错