ES新特性

ES新特性

• let与块级作用域：let定义之前不可使用，具有块级作用域

var elements = [{}, {}, {}]
// 闭包解决i的作用域问题
for (var i = 0; i < elements.length; i++) {
  elements[i].onclick = (function (i) {
    return function () {
      console.log(i)
    }
  })(i)
}
elements[0].onclick()

var elements = [{}, {}, {}]
for (let i = 0; i < elements.length; i++) {
  elements[i].onclick = function () {
    console.log(i)
  }
}
elements[0].onclick()

• const：定义常量 不可修改（地址不可修改  对象的值可以修改）
• 数组的解构：按数组下标解构  const [,, value ] = [1,2,3]  // value = 3
• 对象的解构：按属性名称解构 

const name = 'tom'
const { name: objName } = obj // 别名
console.log(objName)

• 模版字符串：`${变量}`
• 字符串扩展方法：

startWith,endWith,includes   --》 true/false
//es2017 padStart,endStart 位数填充
'1'.padStart(2, '0') // 01
'1'.endsWith('s') // false

• 参数默认值，剩余参数

// ...rest 只能写在参数最后
function getName(name='jack', ...rest) {
  console.log(rest) // [1,34]
}

getName('d', 1,34)

• 展开数组  ...arr
• 箭头函数 （）=> {}  this为当前执行环境
• 对象扩展的方法 Object.assign() 浅拷贝 Object.is() 判断两个值是否相等 （NAN,NAN +0 -0）
• Proxy  对象访问代理器

const person = {
  name: 'ze',
  age: 18
}

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

handler	触发方式
get
set
has	in 操作符
deleteProperty	delete 操作符
getPrototypeOf	Object.getPrototypeOf()
setPrototypeOf	Object.setPrototypeOf()
isExtensible	Object.isExtensible()
defineProperty	Object.defineProperty()
ownKeys	Object.getOwnPropertyNames() Object.getOwnPropertySymbols()
apply	调用函数

 

• Reflect:统一提供一套用于操作对象的API

Reflect.has(obj, 'name')
Reflect.deleteProperty(obj, 'age')
Reflect.getOwnKeys(obj)

• Promise async/await
• class类

• class Person {
    // 构造函数
    constructor(name) {
      this.name = name;
    }
    
    say () {
      console.log(`my name is ${this.name}`)
     }
    // 静态方法
    static create () {}
    }
  
  
  // 静态方法访问
  Person.create()
  
  
  // 继承
  class Student extends Person {
     constructor(name, no) {
      super(name); // 只能写在第一行
      this.no = no;
     }
  
     hello () {
       super.say()
       console.log('my no is' + this.no)
    }
  }

• Set  const s = new Set()   s.add(1)  s.size  s.has(1)  s.delete(1)  s.clear()
• Map WeekMap

// 可以使用任意类型的值作为键
const m = new map();
m.set(tom, 20)
m.has()
m.delete()
m.clear()

m.forEach((value, key) => {})

• Symbol  独一无二的值  Symbol.for(true) === Symbol.for('true')
• for of 循环  for（value of  arr） 可使用break  不可遍历对象
• Symbol.iterator   next(){return {value: 'xxx', done: false}}

// 给对象增加iterator

let obj = {
  store: [1,2,3,4,5],
  [Symbol.iterator]: function() {
    let index = 0;
    let self = this;
    return {
      next: function(){
         index++;
         return {
           value: self.store[index],
           done: index >= self.store.length
        }
      }
    }
  }
}

• Generator yield

functiopn * foo() {
   yield 100;   // yield后的值将作为value的值
   console.log('1000')
   return 120;
}
foo().next() // {value: 100, done: false}

foo().next() // {value: 120, done: true}

es2016 

• arr.includes()
• 指数运算符 **     2**10  == math.pow(2,10)

es2017

• Object.values()  // 对象值的数组
• Object.entries()  [[key,value]]

const obj = {
  foo: 'alue1',
  bar: 'value2'
}

for(const [key, value] of Object.entries(obj)) {
  console.log(key, value)
}


let s = new Map(Object.entries(obj))

• 字符串:  padStart(length, value), padEnd(length, value)
• async/await