1.解构赋值

在ES6中新增了变量赋值的方式：解构赋值。想从数组中找出有意义的项在ES6中可以这样写：

let [firstName, surname] = ['Ilya', 'Kantor']
console.log(firstName)
console.log(surname)

解构赋值重点是在赋值，赋值的元素是要拷贝出来赋值给变量，赋值的元素本身不会被改变。
在解构赋值里面用的最多的就是Object和Array。

2.数组解构赋值

  • 可以跳过赋值元素
    如果想忽略数组的某个元素对变量进行赋值，可以使用逗号来处理。
let [firstName, , title] = ["aaa", 'bbb', 'cccc', 'ddd']
console.log(title) //cccc
  • 赋值元素可以是任意可遍历的对象
    赋值元素不仅是数组，也可以是任意可遍历的对象
let [a, b, c] = 'abc' //['a', 'b', 'c']
let [one, two, three] = new Set([1, 2, 3])
  • 左边的变量
    被赋值的变量还可以是对象的属性，不局限于单纯的变量。
let user = {}
[user.name, user.surname] = 'Ilya Kantor'.split(' ')
console.log(user.name) //Ilya
  • 循环体
    解构赋值在循环体中的应用，可以配合entries使用。
let user = {
  name: 'Tom',
  age: 18
}
for (let [key, value] of Object.entries(user)) {
  console.log(`${key}:${value}`) // name: 'Tom'  age: 18
}

当然，对于map对象依然使用

let user = new Map()
user.set('name', 'Tom')
user.set('age', 18)
for (let [key, value] of user.entries()) {
  console.log(`${key}:${value}`) // name: 'Tom'  age: 18
}
  • rest参数
let [name1, name2, ...rest] = ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
console.log(name1)  //aaa
console.log(name2)  //bbb
console.log(rest[0]) //ccc
console.log(rest[1]) //ddd
console.log(rest.length) //3

我们可以使用rest来接受赋值数组的剩余元素，不过要确保这个rest参数放在被赋值变量的最后一个位置上。

  • 默认值
    如果数组的内容少于变量的个数，并不会报错，没有分配到内容的变量会是undefined
let [firstName, surname] = []
console.log(firstName)//undefined
console.log(surname)//undefined

也可以给变量赋予默认值，防止undefined的情况出现：

let [name='Tom', surname = 'Anonymous'] = ['aaaa']
console.log(name)  //aaaa
console.log(surname) //Anonymous

对象解构赋值

  • 基本用法
    解构赋值除了可以应用在Array，也可以应用在Object。基本的语法如下:
let {var1, vae2} = {var1..., var2...}

大致的意思是有一个Object想把里面的属性分别拿出来而无需通过调用属性的方式赋值给指定的变量。具体的做法是在赋值的左侧声明一个和Object结构等同的模板，然后把关心属性的value指定为新的变量即可。

let options = {
  title: 'Menu',
  width: 100,
  height: 200
}

let {title, width, height} = options
console.log(title)  //Menu
console.log(width)  //100
console.log(height) //200

在这个解构赋值的过程中，左侧的“模板”结构要与右侧的Object一致，但是属性的顺序无需一致。
上述的赋值左侧采用了对象简写的方式，类似于：

let { width: width, height: height, title: title } = options

如果不想这么写或者想使用其他的变量名，可以自定义的，如下：

let {width: w, height: h, title} = options
  • 默认值
    当然，这个赋值的过程中也是可以指定默认值的：
let options = {
  title: "Menu"
}
let { width = 100, height = 200, title } = options
console.log(title) //Menu
console.log(width) //100
console.log(height) //200
  • rest运算符
    如果我们想像操作数组一样，只关心指定的属性，其他可以暂存到一个变量下，这就要用到rest运算符：
let options = {
  title: "Menu",
  height: 200,
  width: 100
}
let { title, ...rest } = options
console.log(rest.height) //200
console.log(rest.width) //100
  • 嵌套对象
    如果一个Array或者Object比较复杂，它嵌套了Array或者Object，那么只要被赋值的结构和右侧赋值的元素一致就好了。
let options = {
  size: {
    width: 100,
    height: 200
  },
  item: ['Cake', 'Donut'],
  extra: true
}
let {
  size: {
    width,
    height
  },
  item: [item1, item2],
  title = 'Menu'
} = options
console.log(title) //Menu
console.log(width) //100
console.log(height) //200