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

    • 多线程并发读写数据

  • 添加尾部逗号而不报错

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试