变量的解构赋值

变量的解构赋值

• 数组的解构赋值

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

本质：这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值；如果解构不成功值为undefined；
不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。

	let [foo, [[bar], baz]] = [1, [[2], 3]];
	foo // 1
	bar // 2
	baz // 3

	let [ , , third] = ["foo", "bar", "baz"];
	third // "baz"

	let [x, , y] = [1, 2, 3];
	x // 1
	y // 3

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

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

1. 默认值：如果一个数组成员不是严格等于undefined，默认值不会生效

    let [foo = true] = [];
    foo // true
    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
    let [x = 1] = [undefined];
    x // 1
    let [x = 1] = [null];
    x // null
   

• 对象的解构赋值

1. 注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

    let { bar, foo } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
   
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz // undefined
   

2. 对象解构赋值的本质形式

    let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
   

本质:对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
3. 嵌套结构的对象解构

	var node = {
	  loc: {
	    start: {
	      line: 1,
	      column: 5
	    }
	  }
	};

	var { loc, loc: { start }, loc: { start: { line }} } = node;
	line // 1
	loc  // Object {start: Object}
	start // Object {line: 1, column: 5}

4. 对象解构的默认值；严格等于undefined时，默认值生效

    var {x = 3} = {};
    x // 3
    var {x, y = 5} = {x: 1};
    x // 1
    y // 5
    var {x: y = 3} = {};
    y // 3
    var {x: y = 3} = {x: 5};
    y // 5
    var { message: msg = 'Something went wrong' } = {};
    msg // "Something went wrong"
    var {x = 3} = {x: undefined};
    x // 3
    var {x = 3} = {x: null};
    x // null
   

• 字符串的解构赋值：此时，字符串被转换成了一个类似数组的对象。

    const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"
    //还可以对属性进行解构赋值
    let {length : len} = 'hello';
    len // 5
  

• 数值和布尔值的解构赋值：如果等号右边是数值和布尔值，则会先转为对象。

    let {toString: s} = 123;
    s === Number.prototype.toString // true
    let {toString: s} = true;
    s === Boolean.prototype.toString // true
  

解构的规则只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

	let { prop: x } = undefined; // TypeError
	let { prop: y } = null; // TypeError

• 函数参数的解构赋值及默认值

    function move({x = 0, y = 0} = {}) {
      return [x, y];
    }
  
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, 0]
    move({}); // [0, 0]
    move(); // [0, 0]  
  

另一种写法，结果不一样：

	function move({x, y} = { x: 0, y: 0 }) {
	  return [x, y];
	}

	move({x: 3, y: 8}); // [3, 8]
	move({x: 3}); // [3, undefined]
	move({}); // [undefined, undefined]
	move(); // [0, 0]

原因：上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

• 变量解构赋值的用途

1. 交换变量的值

    let x = 1;
    let y = 2;
   
    [x, y] = [y, x];
   

2. 从函数返回多个值

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

3. 提取JSON数据

    let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
   
    let { id, status, data: number } = jsonData;
   
    console.log(id, status, number);
    // 42, "OK", [867, 5309]