创建项目

1. 初始化项目

npm init

2. 安装babel依赖

npm install -D babel-core babel-preset-2015 babel-preset-latest

3. 创建.babelrc的文件

{
  "presets":["2015","latest"],
  "plugins": []
}

4. 在项目中安装webpack和解析webpack的插件babel-loader

npm install -D webpack babel-loader

模块化

ES模块化如何使用，开发环境如何打包?

Class和普通构造函数的区别

let、const、var 的区别有哪些？

1. let/const不会出现变量提升，var会发生变量提升
2. let/const会出现暂时性死区
3. 同一个作用域中，let/const不能重复声明，var可以
4. let/const可以和{ }配合创建块级作用域，var不可以
5. const声明的变量必须初始化，let、var可以先声明后初始化
6. let、var声明的变量可以修改，const声明的基本类型不可修改，const声明的引用类型在不改变引用的情况下可以修改。

Set

Set集合常被用于检查对象中是否存在某个键名

创建Set集合

var list = new Set()
list // Set {}

add( )

list.add(1)
list.add(2)
list // Set {1, 2}

var key1 = {}
var key2 = {}
list.add(key1)
list.add(key2)
list // Set {1, 2, Object {}, Object {}}

size

let arr = [1,2,3,4]
let list = new Set(arr)
list.size // 4

has()

let arr = ['add','delete','clear','has']
let newlist = new Set(arr)
newlist.has('add') // true

delete()

var set = new Set([1,2])
set.delete(2)
set // Set {1}

Set集合的forEach()方法

var set = new Set(['a','b','c'])
set.forEach((value,key,setOwn)=>{
    value === key // true
    setOwn === set // true
})

set的作用

1. 数组去重

var arr = [1,2,2,3,4,5,4]
var newArr = [...new Set(arr)]
newArr // [1, 2, 3, 4, 5]

2. 判断集合中是否有某一个元素 has()

let arr = ['add','delete','clear','has']
let newlist = new Set(arr)
newlist.has('add') // true

将Set集合转换为数组

var set = new Set([1,2,3,4,5,3])
var array = [...set]

WeakSet

1. WeakSet的元素只能是对象

var weakList = new WeakSet()
var key1 = {}
weakList.add(key1)

2. WeakSet保存的是值的弱引用

var weakSet = new WeakSet()
var key = {}
weakSet.add(key)
weakSet.has(key) //true
key = null //weakSet中的引用也被自动移除

Map

Map集合常被用于获取已存在的信息

创建Map集合

var map = new Map()

使用数组初始化Map集合

var map = new Map([['aaa',1],['bbb',2]])
map // Map {"aaa" => 1, "bbb" => 2}

set()

var arr = [1,2,3]
map.set(arr,123)
var key1 = {}
var key2 = {}
map.set(key1, 'obj1')
map.set(key2, 'obj2')
map // Map {[1, 2, 3] => 123, Object {} => "obj1", Object {} => "obj2"}

has()

map.has(arr) // true

get()

map.get(arr) // 123

size

map.size // 3

delete

map.delete(arr) 
map // Map {Object {} => "obj1", Object {} => "obj2"}
map.size // 2

clear

map.clear()
map.size // 0

Map的forEach()方法

var map = new Map([['aaa',1],['bbb',2]])
map.forEach((value,key,ownMap)=>{
    
})

WeakMap

WeakMap的key值必须是对象

WeakMap

Iterator

generator

generator返回的就是一个迭代器接口

1. 用generator实现一个状态机

  {
    let state = function* () {
      while (1) {
        yield 'A';
        yield 'B';
        yield 'C';
      }
    }
    let status = state()
    console.log(status.next())
    console.log(status.next())
    console.log(status.next())
    console.log(status.next())
    console.log(status.next())

  }

generator和async await的关系

async await 是generator的语法糖

    let state = async function () {
      while (1) {
        await  'A';
        await 'B';
        await 'C';
      }
    }
    let status = state()
    console.log(status.next())
    console.log(status.next())
    console.log(status.next())
    console.log(status.next())
    console.log(status.next())

抽奖的应用

    //抽奖
    let draw = function (count) {
      console.info(`剩余${count}次`)
    }
    let residue = function* (count) {
      while (count > 0) {
        count--;
        yield draw(count)
      }
    }
    let star = residue(3)
    let btn = document.createElement('button')
    btn.id = 'start'
    btn.textContent = '抽奖'
    document.body.appendChild(btn)
    document.getElementById('start').addEventListener('click', function () {
      star.next()
    }, false)

长轮询

  //长轮询
  {

    let ajax = function* () {
      yield new Promise(function (resolve, reject) {
        setTimeout(() => {
          resolve({
            code: 1
          })
        }, 200)
      })
    }
    let pull = function () {
      let generator = ajax()
      let step = generator.next()
      step.value.then(function (d) {
        if (d.code !== 0) {
          setTimeout(() => {
            console.log('wait')
            pull()
          }, 1000);
        } else {
          console.log(d)
        }
      })
    }
    pull()
  }

Proxy

1. 基本用法

       let obj = {
        time: '2017-0311',
        name: 'net',
        _r: 123
      }
      //中间值
      let monitor = new Proxy(obj, {
        //代理对象属性
        get(target, key) {
          return target[key].replace('2017', '2018')
        },
        set(target, key, value) {
          if (key === 'name') {
            return target[key] = value
          } else {
            return target[key]
          }
        },
        //判断当前对象中是否有某个属性
        has(target, key) {
          if (key === 'name') {
            return target[key]
          } else {
            return false
          }
        },
        //拦截delete
        deleteProperty(target, key) {
          if (key.indexOf('_') > -1) {
            delete target[key]
            return true
          } else {
            return false
          }
        },
        //拦截Object.keys 
        //Object.getOwnPropertySymbols Object.getOwnPropertyNames
        ownKeys(target) {
          return Object.keys(target).filter(item => item != 'time')
        }
      })
      console.log(monitor.time)
      monitor.name = '333'
      monitor._r = 123333
      console.log(monitor)
      console.log('name' in monitor, 'time' in monitor)
      //删除
      delete monitor.time
      console.log(monitor)
      delete monitor._r
      console.log(monitor)
      console.log('onwKeys', Object.keys(monitor))

Proxy

1. 基本用法

      let obj = {
        time: '2017-0311',
        name: 'net',
        _r: 123
      }
      let r1 = Reflect.get(obj, 'time')
      Reflect.set(obj, 'name', 'zhangsan')
      console.log(obj)
      console.log(Reflect.has(obj, 'time'))