es新特性整理

let 用来申明变量的

• js中以前只有全局作用域和函数作用域，es6中新增了块级作用域。
  • 大括号之间的作用域就是块级作用域
  • 块级作用域中使用let申明的变量，块级作用域之外是无法获取的，
  • 使用let申明的变量不会有变量的作用域提升

const 用来申明常量的

• const申明的常量是不允许修改的，这里不允许修改，是不允许修改变量了所指向的内存地址。可以修改内存中的属性。

数组解构

• 获取制定下标的数据，例如：
  let arr = [1,2,3] const [,,third,more] = arr

对象的解构

模版字符串

• 使用反引号， 使用${}加入插值表达式，插入的内容是标准的js语句（变量、表达式、函数返回值）

带标签模版字符串

let name = 'lily'
let sex = true
function stringFunc (string, name, sex) {
  onsole.log(string, name, sex) //["my name is ", ", this is ", "", raw: Array(3)] "lily" true
}
let section = stringFunc`my name is ${name}, this is ${sex}`

可以对变量进行判断，拿到返回值， 比如判断变量中是否有非法字符，做相关的翻译

字符串扩展方法

• includes
• startWith
• endWith

函数参数

• 函数参数默认值，应放在函数参数的最后，形参是从前往后接收的
• 剩余所有参数，以前只能通过arguments获取，现在可以通过 ...args，来拿到后面所有的实参

箭头函数

• 简化了函数的写法
• 不会改变this的指向，或者说箭头函数的this，在申明的时候this就已经确定

Object的方法

• Object.assgin //对象合并，返回目标对象
• Object.is // 数值比较， 可以区分+0 和 -0的区别，平时开发还是建议使用 ===

proxy对象代理基本用法

let person = {
  name: '124',
  age: 123
}
let personProxy = new Proxy(person, {
  get(target, property) {
    return 111
  },
  set(target, property, value) {
    target[property] = value
  }
})

proxy 和defineProperty

• proxy比defineProperty监听的更多，比如delete操作
• proxy 是非侵入式对象进行监听

Reflect 属于静态对象

• 提供了一系列的对象操作方法
• 提供了统一的一套操作对象的方法（价值所在）

const obj = {
  name: 'yl',
  age: 18
}
console.log('name' in obj)
console.log(delete obj.age)
console.log(Object.keys())
console.log(Reflect.has(obj, 'name'))
console.log(Reflect.deleteProperty(obj, 'age'))
console.log(Reflect.ownKeys(obj))

Promise异步编程解决方案

class 新增关键字，用来创建对象

extends 关键字，继承

class Person {
  constructor(name) {
    this.name = name
  }
  say () {
    console.log(`my name is ${this.name}`)
  }
}

class Students extends Person {
  constructor(name, number) {
    super(name)
    this.number = number
  }
  hello() {
    super.say()
    console.log(`my class NO is ${this.number}`)
  }
}

let st = new Students('yuli', 28)
st.hello()

set 集合， 内部成员不允许出现重复

map 键值对集合，对象的键只能是字符串，map的键可以是任意数据类型

symbol类型，独一无二的值，可以为对象添加私有属性。它属于基础数据类型

• 现阶段数据类型一共有7中：number、string、null、undefind、object、array、symbol
• bigInt（用来存储更大的整数）现在处在stage4阶段，预计落地后就有8种数据类型了
• 如果想要symbol的值相同可以使用for方法：
  (需要注意的是这个方法里面维护的是字符串和symbol之间的对应的关系，如果传入的值不是string,方法会自动转换成string，tostring方法)
  console.log(Symbol.for('foo') === Symbol.for('foo')) // true
• 通过symbol为对象添加的属性是无法用for in遍历到的。 也无法用Object.keys()拿到，JSON.stringify()也是会忽略symbol属性，获取方法可以使用Object.getOwnPropertySymbols(obj),这个方法可以获取到所有的symbol属性

for.. of 循环（以后可作为遍历所有数据结构的统一方式）

• for 适合遍历数组
• for .. in 适合遍历对象
• forEach 数组对象的遍历方法
• for...of中可以使用break关键字终止循环（适用对象：数组、伪数组、set、map）
• 内部原理是：可迭代的数据都有一个Iterable接口，Iterable接口有一个Symbol.itrator方法,这个方法返回一个next函数，调用next函数，拿到当前指针下的值和是否结束的done标识,简单实现如下：

const obj = {
  store: ['foo', 'bar', 'baz'],
  [Symbol.iterator]: function() {
    let index = 0;
    const _this = this;
    return {
      next: function() {
        const result ={
          value: _this.store[index],
          done: index > _this.store.length
        }
        index++
        return result
      }
    }
  }
}

迭代器模式

• 构建一个数据结构，给数据结构添加一个对外的迭代器接口，外部不需要关心数据内部的结构是怎么样的，只需要调用迭代器方法就能遍历整个数据内容

生成器函数 Generator函数

function * foo() {
  console.log('11111')
  yield 100
  console.log('22222')
  yield 200
  console.log('33333')
  yield 300
}
const result = foo()
result.next() //{value: 100, done: fasle}
result.next()//{value: 200, done: fasle}
result.next()//{value: 300, done: fasle}
result.next()//{value: undefined, done: true}

一个生成器函数，被调用后返回的是一个生成器对象，调用这个对象的next方法才会让这个函数的函数体开始执行。yield后面的值会作为结果返回，特点为惰性执行，调用一次执行一段

使用生成器来实现迭代器接口

const obj = {
  store: ['foo', 'bar', 'baz'],
  [Symbol.iterator]: function * () {
    const _this = this;
    for(item of _this.store) {
      yield item
    }
  }
}
for (item of obj) {
  console.log(item)
}

es2016 是一个es的小版本，

• 数组的includes方法， 可以用来查找数组中是否包含NaN
• 指数运算符 2 ** 10 等同于 Math.pow(2, 10)

es2017

• Object.values 拿到对象中所有值组成的数组

• Object.entries() 将对象转换成[key, value]形式的数组，转换后可直接使用for...of遍历

• Object.getOwnPropertyDescriptors 获取对象的所有描述信息（主要是用来配合es2015新增的get和set使用）

  const p1 = {
    firstName: "yu",
    laseName: "lei",
    get fullName() {
      return this.firstName + this.laseName
    }
  }
  console.log(p1.fullName) // yulei
  const p2 = Object.assign({}, p1)
  p2.firstName = 'yang'
  console.log(p2.fullName) //yulei
  
  const des = Object.getOwnPropertyDescriptors(p1)
  const p2 = Object.defineProperties({}, des)
  p2.firstName = 'yang'
  console.log(p2.fullName) //yanglei
  

• String.prototype.padStart和 String.prototype.padEnd， 使用给定字符串去填充目标字符串的开始或者结束位置，直到字符串达到指定长度为止

• 在函数参数的最后以为添加一个伪逗号（很小的变化不影响实际开发）

• 标准化了 async 、 await，解决异步编程问题