es6 精炼

let 和 const

• let有块作用域
  • 在同一个作用域内，let声明的变量不能重复
  • var 定义的变量会提升
  • let 定义的变量不提升，不能在声明前使用
• const 有块级作用域
  • 一旦赋值不能改变
  • 声明必赋值
  • let user = {}
    • const PERSON = user
    • user改变，PERSON不会报错，因为PERSON的值是个指针

解构赋值

• 左右两边结构必须一样

• 右边必须是个东西

• 声明和赋值不能分开

• 解构数组（按照顺序赋值）

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  let [a, b, c] = [1, 2, 3] console.log(a, b, c) //1, 2, 3 let [a, b, c] = [1, 2] console.log(a, b, c) //1, 2, undefined let [a, b, c] = [1, 2, null] console.log(a, b, c) //1, 2, null let [a, b, c = 'default'] = [1, 2] console.log(a, b, c) //1, 2, 'default' let [a, , c] = [1, 2, 3] console.log(a, b, c) //1, b is not defined, 3

• 解构对象 （按照属性名赋值）

  1 2 3 4 5 6 7 8 9 10 11

  var obj = { a: 1, b: 2 } let {c, b} = obj //c: undefined //b: 2 let a ({a, b} = obj) //先定义了a， 如果不加（）就会认为{}形成块级作用域

  内置对象解构

  1 2	import {mapState, mapGetters, mapMutations} from 'vuex' let {random, floor} = Math

• 解构字符串

  1 2 3

  let [a, b, c] = 'yo.' //a: y b: o c: . let [d, e] = 'yo.' //d: y e: o let {length} = 'yo.' // 用对象的方式length: 3

字符串方法

• ‘string’.includes(‘g’，3) //true 从第3个开始匹配
• ‘string’.startsWidth(‘s’) //true
• ‘string’.endsWidth(‘g’) //true
• ‘string’.repeat(3) //‘stringstringstring’

模板字符串

• 1 2 3 4 5 6 7

  let title = '模板字符串' let nb = '模板大法好' let tpl = ` <div> <span>${title + `<span>${nb}</span>`}</span> </div> `

Symbol类型

• 基本数据类型

  • Number
  • String
  • Boolean
  • undefined
  • null
  • object
  • Symbol

• 用处：防止对象属性被覆盖

  • 1 2 3 4 5 6 7 8 9 10 11 12 13 14

    let name = Symbol() { var person = { name: 'wang' } } //此时有第二个人去操作person { let name = Symbol() person[name] = 'lee' console.log(person.name) //'lee' } //操作完后上面的person的name属性没变 console.log(person.name) //'wang'

Proxy

• 定义一个对象时可以对其取值get和赋值set做一些操作

  1 2 3 4 5 6 7 8 9 10

  var user = new Proxy({}, { get: function (obj, prop) { switch (prop) { case 'fullName' : return obj.firstName + ' ' + obj.lastName } }, set: function (obj, prop) { } })

Set

• 自动去重的数组
• 一些方法

1
2
3
4
5
6
7
8

var s = new Set([1, 2, 3, 3])
console.log(s) //[1, 2, 3] 自动去重
console.log(s.size) //3
console.log(s.add(4)) //[1,2,3,4]
console.log(s.delete(2)) //[1,3,4]
console.log(s.has(1)) //true
s.clear()
console.log(s) //[]

函数扩展

• 参数默认值

  • 1 2 3

    function (a = 'default') { console.log(a) }

• 参数解构赋值

  • 1 2 3 4

    function foo ({a='123', b='456'} = {}) { } foo({a: 'demo1', b: 'demo2'})

• rest参数

  • 1 2 3 4

    function foo (a, ...args) { console.log(args) //[2, 3] } foo(1,2,3)

• … 扩展运算符

  • 1 2 3 4 5 6

    function foo (a, b, c) { console.log(a+b+c) } let arr = [1, 2, 3] //foo.apply(null, arr) foo(...arr) //6

  • 合并数组

    1 2 3

    let arr1 = [1, 2] let arr2 = [3, 4] let arr3 = [...arr1, ...arr2] //[1, 2, 3, 4]

• 箭头函数

  • 1	- ```a => a

  • 不能new

  • 不能通过arguments获取参数列表，但可以通过…args获得

新版面向对象

• class关键字、构造器和类分开了

• class里面直接加方法

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  class User { constructor (name, pass) { this.name = name this.pass = pass } showName () { alert(this.name) } showPass () { alert(this.pass) } } //继承 class VipUser extends User { constructor (name, pass, level) { super(name, pass) //此处继承了User的属性和方法 this.level = level } showLevel () { console.log(this.level) } }

JSON

• json对象
• JSON.stringify(json)
• JSON.parse(str)
• 标准写法
  • 只能用双引号
  • 所有名字用双引号引起来

Promise 像同步一样写异步代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

let p1 = new Promise((resolve, reject) => {
  $.ajax({
    url: 'demo1.txt',
    dataType: 'json',
    success (demo1) {
      resolve(demo1)
    },
    error (err) {
      reject(err)
    }
  })
})

let p2 = new Promise((resolve, reject) => {
  $.ajax({
    url: 'demo2.txt',
    dataType: 'json',
    success (demo2) {
      resolve(demo2)
    },
    error (err) {
      reject(err)
    }
  })
})

Promise.all([p1, p2]).then(function () {
  //成功回调
}, function () {
  //失败回调
})

generator函数

• 普通函数——一路执行到底不能停

• generator函数——中间能停

  1 2 3 4 5 6 7 8 9

  function *show () { alert('a') yield alert('b') } let genObj = show() genObj.next() genObj.next()

• yield 可以传参

  • 1 2 3 4 5 6 7 8 9 10

    function *show () { alert('a') let param = yield alert('b') console.log(param) //5 } let genObj = show() genObj.next(12) //实际上第一个next传的参数没用 genObj.next(5) //5传给param

• yield 可以返回

  • 1 2 3 4 5 6 7 8 9 10 11

    function *show () { alert('a') let param = yield 100 //可以把yield看作是每一步的return alert('b') console.log(param) //5 return 120 } let genObj = show() let result1 = genObj.next(12) //接收返回来的 100 let result2 = genObj.next(5) //return 120

async await推翻generator

• 不再依赖runner

• 支持 =>

• 1 2 3

  let show = async () => { let data = await $.ajax({..........}) }

  在generator里yield的后面异步请求的数据想要给下面代码得依靠runner插件（genObj.next()）