ECMAScript新特性

2021-04-07  本文已影响0人  lowpoint

ECMAScript通常看作JavaScipt的标准化规范,实际上JavaScipt是ECMAScript的扩展语言,ECMAScript只提供了最基本的语法,JavaScipt实现了ECMAScript标准并在此基础上进行扩展。

ES2015

ES作用域

let
具有块级作用域
变量声明不会提升

const 恒量/常量 (let基础上多了只读,变量声明之后不允许再被修改)
只是不能修改它指向的内存地址,可以修改其中的属性

数组的解构

const arr = [1,2,3]
const [a,b,c] = arr //a:1,b:2,c:3
const [a,...bc] = arr //...只能在数组最后使用 bc=[2,3]

对象的解构

const obj = {name:'aa',age:18}
const { name } = obj //name = 'aa'
const {name:newName} = obj //重命名newName = 'aa'

模板字符串
传统字符串不支持换行 需要\n实现
模板字符串可以直接换行

const text = 'world'
const str = `hello ${text}`

//带标签的模板字符串
const name = 'jay'
const gender = true
const result = tagFn`hey,${name} is a ${gender}.`

function tagFn(strings,name,gender){
  console.log(strings) //['hey,','is a','.']
//name  'jay'
//gender true
return '123' //此时所对应的模板字符串的值为 '123'
}

字符串的扩展方法

Proxy 代理对象
监视某个对象属性的读写,可以使用Object.defineProperty
Proxy 专门为对象设置访问代理器的

const person = {
  name:'jay',
  age:20
}

const personProxy = new Proxy(person,{
  get(target,property){
    return property in target ? target[property] : undefined
  },
  set(target,property,value){
  },
  deleteProperty(target,property){
  }
})

defineProperty只能监视属性的读写
proxy 能够监视到更多的对象操作 如:delete操作 对象中方法调用等
proxy 更好的支持数组对象的监视
之前操作都是重写数组的操作方法

一个简写Promise

// (1)Promise就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
// (2)Promise中有三种状态 等待pending 成功fulfiled 失败rejected 状态不可逆
// (3)Resolve与rejected函数用来更改状态的
// (4)Then方法内部做的事情就是判断状态  成功:调用成功回调 失败:调用失败回调
// (5)Then成功回调有一个参数 表示成功之后的值 失败有一个参数表示失败后的原因

const PENDING = 'pending' //等待
const FULFILED = 'fulfiled' //成功
const REJECTED = 'rejected' //失败

class MyPromise {
  constructor(excutor) {
    excutor(this.resolve, this.resolve)
  }
  status = PENDING
  value = undefined
  reason = undefined
  resolve = (value) => {
    //将状态更改为成功
    if (this.status !== PENDING) return
    this.status = FULFILED
    //保存成功的值
    this.value = value
  }
  reject = (reason) => {
    //将状态更改为失败
    if (this.status !== PENDING) return
    this.status = REJECTED
    //保存失败原因
    this.reason = reason
  }
  //调用then方法 要判断状态如果是成功调用第一个回调,如果失败调用第二个
  then(successCb, failCb) {
    //判断状态
    if (this.status === FULFILED) {
      successCb(this.value)
    } else if (this.status === REJECTED) {
      failCb(this.reason)
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读