es6 变量的解构赋值

1. 数组的解构赋值

let [a, b, c] = [1, 2, 3]  // a=1 b=2 c=3

只要等号两边的模式相等，就可以从数组中提取值，对变量进行赋值

let [a, [b], c] = [1, [2], 3]  // a=1 b=2 c=3

let [ , , third] = [1, 2, 3];  // third=3

let [head, ...tail] = [1, 2, 3, 4];  // head=1 tail=[2, 3, 4]

如果值解构不成功，那么等于undefined

let [x, y, ...z] = ['a']  // x='a' y=undefined z=[]

解构不完全，也就是等号左边只匹配右边一部分的数组

let [a, b] = [1, 2, 3]  // a=1 b=2

如果等号左边无法匹配等号右边的数组，那么将会报错

也可以使用set来解构

let [x, y, z] = new Set([1, 2, 3]) // x=1 y=2 z=3

解构赋值允许设置默认值

let [x, y='a'] = ['b']  // x='b' y='a'

如果默认值是函数，那么默认这个值是惰性的，只有在用到的时候才会求值

2. 对象的解构赋值

对象的解构赋值，可以不按次序，但是名字必须相同

let {foo, bar} = {foo: 'a', bar:'b'} // foo='a' bar='b'

let {baz} = {foo:1, bar:2} // baz=undefined

 如果变量名与属性名不一致，要像下面这样写

let {foo: baz} = {foo:1, bar:2}  // baz=1  foo是匹配模式，而baz才是变量名，真正被赋值的变量baz，而不是模式foo

数组也可以嵌套解构赋值

对象解构赋值中，等号左边的对象中，冒号左边的是模式，右边的是变量

let {p: [x, {y}]} = {['hello', {'bb'}]}  // x='hello' y='bb'  这里的p是模式，所以不赋值

对象的解构赋值也可以设置默认值，只有变量全等于undefined时，默认值才生效

3. 字符串的解构赋值

字符串的解构赋值是将字符串转换成了一个类似数组的对象

let [a, v, m] = [1, 2, 3]  // a=1 v=2 m=3

4. 函数参数解构赋值

函数参数解构赋值，其本质就是参数传入的是数组或者对象，是数组和对象的解构赋值

5. 变量解构赋值的用途

交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

从函数返回多个值

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

提取json数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);