ES6的解构赋值

一、解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

解构赋值使用了相同的语法，不同的是在表达式左边定义了要从原变量中取出什么变量。 

如代码1：

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

说明：解构赋值重点是在赋值，赋值的元素是要拷贝出来赋值给变量，赋值的元素本身是不会被改变的。

 二、数组解构

1.可以跳过赋值元素

代码1：

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

说明：如果想忽略数组的某个元素对变量进行赋值，可以使用逗号来处理。

2.赋值元素可以是任意可遍历的对象

代码1：

function fn () {
  return 'hello'
}

let [a, b, c, d, e] = fn()
console.log(a, b, c, d, e)//h e l l o

说明：从一个函数返回一个数组是十分常见的情况。解构使得处理返回值为数组时更加方便。

代码2：

let [one, two, three, four, five] = new Set([1, 2, 3, 4, 5]);
console.log(one, two, three, four, five)//1 2 3 4 5

说明：赋值的元素不仅是数组，它可以是任意可遍历的对象如set，map数据解构，或者是字符串等等。

3.左边的变量

let user = {};
[user.name, user.surname, user.sayHi] = "hello world heihei".split(' ');

console.log(user.name, user.surname, user.sayHi);//hello world heihei

说明：被赋值的变量还可以是对象的属性，不局限于单纯的变量。

4.循环体

let user = {
  name: "John",
  age: 30
};

console.log(Object.entries(user))
// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
  console.log(`${key}:${value}`); // name:John, then age:30
}

结果：

5.rest 参数

let [p1, p2, ...rest] = ["浙江", "江苏", "福建", "广东", "山东"]
console.log(p1)//浙江
console.log(p2)//江苏
console.log(rest)//["福建", "广东", "山东"]
// 因为rest出来也是数组，我们也可以直接对rest去改变
rest[0] = "湖南"
rest[1] = "湖北"
console.log(rest)//["湖南", "湖北", "山东"]

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

 如果剩余元素右侧有逗号，会抛出 SyntaxError: rest element may not have a trailing comma，因为剩余元素必须是数组的最后一个元素。

 6.默认值

let [firstName, surname] = [];

console.log(firstName); // undefined
console.log(surname); // undefined

说明：如果数组的内容少于变量的个数，并不会报错，没有分配到内容的变量会是 undefined。

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

let [name = "Hansen", surname="pipi"] = ["liwei"];
console.log(name) // liwei(from array)
console.log(surname)// pipi (default used)

7.交换两个数值

代码如下：

let a = 3;
let b = 4;
[a, b] = [b, a]
console.log(a, b)//4 3

ES6通过这个可以直接交换数据，而ES5要通过新建一个变量给他代替才行。

三、对象（Object）解构

1.基本用法

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

代码如下：

let options = {
  title: "list",
  privince: "浙江",
  width: 100
}
let {title, width, privince} = options
console.log(title, privince, width)//list 浙江 100
let {title:title1, width:width1, privince:privince1} = options
console.log(title1, privince1, width1)// list 浙江 100

说明：

①在这个结构赋值的过程中，左侧的“模板”结构要与右侧的 Object 一致，但是属性的顺序无需一致。

② 解构赋值中属性值可以用其他名称代替，如上面代码的title1，privince1，width1

2.默认值

let options1 = {
  title: "Menu"
}
let {width = 200, height = 250, title} = options1
console.log(width, height, title)//200 250 "Menu"

说明:为了防止解构赋值出现undefined，可以在里面写上默认值

3.rest 运算符

let options = {
  title: "list",
  name: "zhangsan",
  privince: "浙江",
  width: 100
}
let {title, name, ...rest} = options
console.log(title, name, rest)//list zhangsan {privince: "浙江", width: 100}

说明：如果我们想象操作数组一样，只关心指定的属性，其他可以暂存到一个变量下，这就要用到 rest 运算符了

4.嵌套属性

let options = [{
  privince: "浙江",
  size: {
    width: 3000,
    height: 4000
  },
  cities: ['杭州','宁波', '温州'],
  extra: true
}]
let {
  privince,
  size:{
    width,
    height
  },
  cities: [city1, city2, city3],
  extra
} = options
// 浙江 3000 4000 杭州 宁波 温州 true
console.log(privince, width, height, city1, city2, city3, extra)

解释的原理图见下边

 

说明：如果一个 Array 或者 Object 比较复杂，它嵌套了 Array 或者 Object，那只要被赋值的结构和右侧赋值的元素一致就好了。

5.for of解构赋值

let options = [{
  privince: "浙江",
  size: {
    width: 3000,
    height: 4000
  },
  cities: ['杭州','宁波', '温州'],
  extra: true
}, {
  privince: "江苏",
  size: {
    width: 3000,
    height: 4000
  },
  cities: ['南京', '无锡', '苏州'],
  extra: true
}];

for (let {privince: privince1, cities: [city1, city2]} of options) {
  console.log(`省：${privince1},城市1：${city1},城市2：${city2}`)
}
// 省：浙江,城市1：杭州,城市2：宁波
// 省：江苏,城市1：南京,城市2：无锡

说明：这种比较适合重复的数据解构，然后通过解构赋值，可以快速的得到里面的值

 

参考文章

1. 解构值赋