ES5、ES6、ES7、ES8特性

1.JavaScript

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

2.ES5

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

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

     

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

    function f(){
        return !this;
    } 
    // 返回false，因为"this"指向全局对象，"!this"就是false
    
    function f(){ 
        "use strict";
        return !this;
    } 
    // 返回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：处理异步操作的对象，用链式调用组织代码

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

4.ES7

• 求幂运算符（**）

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

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

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

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

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

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

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

 

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

 

5.ES8

 

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

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

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

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

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

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

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

function * 函数名(){ 
    yieId 'hello';
    yieId 'world';
    return 'ending';
}
var hs = 函数名();

hs.next();
// { value: 'hello', done: false }
hs.next();
// { value: 'world', done: false }
hs.next();
// { value: 'ending', done: true }
hs.next();
// { value: undefined, done: true }

//自动执行Generator函数
async function asyncFunc(params) {
  const result1 = await this.login()
  const result2 = await this.getInfo()
}

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

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

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

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

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

如果对象的key值是数字，则返回值会对key值进行排序，返回的是排序后的结果。

Object.entries({ 3: 'a', 4: 'b', 1: 'c' })    //[['1', 'c'], ['3', 'a'], ['4', 'b']]

//对象属性的遍历
let obj = { one: 1, two: 2 };
for (let [k,v] of Object.entries(obj)) {
  console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}

//输出结果如下：
'one': 1
'two': 2

（2）Object.values()：只返回自己的键值对中属性的值

Object.values({ one: 1, two: 2 })            //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' })    //['c', 'a', 'b']

• 字符串填充：padStart和padEnd

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

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

'Vue'.padStart(10)           //'       Vue'
'Vue'.padStart(10, '_*')           //'_*_*_*_Vue'

'Vue'.padEnd(10, '_*')           //'Vue_*_*_*_'

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

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

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

let obj = {
  id: 1,
  name: 'test',
  get gender() {
    console.log('gender')
  },
  set grade(g) {
    console.log(g)
  }
}
Object.getOwnPropertyDescriptors(obj, 'id')

//输出结果为：
{
  id: {
    configurable: true,
    enumerable: true,
    value: 1,
    writable: true
  }
}

和assign区别
Object.assign(obj)

//输出结果为：
{
  gender: undefined
  id: 1,
  name: 'test'
}

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

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

  • 多线程并发读写数据

• 添加尾部逗号而不报错