变量的解构赋值

1.数组的解构赋值

数组解构赋值从数组中提取值，按照对应的位置，对变量进行赋值，是一种匹配模式，只要等号两边的值的模式或者说是结构相同，左边的变量会赋予对应位置的值，例如：

let [a,b,c] = [1,2,3]; // a=>1,b=>2,c=>3
let [textOne,textTwo,textThree = '1',textFour = '2'] = ['hello',,undefined,null];
/* textOne => 'hello', textTwo => undefined 解构不成功其值为undefined,textThree = '1',
textFour = null,如果数组成员有一个值是null,设置的默认值是不会生效的，
因为null不严格等于undefined*/
let [numOne, ...others]  =  [1,2,3,4]; // numOne = 1,others = [ 2, 3, 4 ]
let [x,,z] = [1,2,3]; //x=1,z=3
let [o,[[p],q]] = [1,[[2],3]]; //o=>1,p=>2,q=>3

数组解构运用,数值交换，接收函数返回的多个值。

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

2.对象的解构赋值

对象解构与数组不同，数组的元素是按照次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量名必须与属性名相同才可以赋值。对象解构赋值是先找到同名属性，然后在赋值给对应的变量。被赋值的是后面的变量。例如：

let {valueA, valueB:valueC} = {valueA:'aaa',valueB:'bbb'};
// valueA => 'aaa' ,变量valueA与属性同名;valueC => 'bbb', valueC与属性名不同

嵌套解构的对象，例如

 let obj = {
    param:[
        'hello',
        {y:'world'}
    ]
 };
let {param, param:[x,{y}]} = obj;
// param => [ 'hello', { y: 'world' } ] ; x => hello; y => world

对象解构也可以指定默认值，例如

let {x = 1} = {}; // x => 1
let {x,y=2} = {x:1}; // x => 1;y=>2
let{x:y=3} = {x:4}; // y => 4
let {x = 5} = {x: undefined}; // x => 5
let {x = 6} = {x: null}; // x => null

对象解构常用运用，删除不需要的属性可以将不需要的参数赋给变量剩余的部分保留下来。

let {el1,el2,...otherEls} = {el1:1,el2:2,el3:3,el4:4}; // otherEls => {el3:3,el4:4}

3.字符串解构

let [a,b,c,d] = 'happy'; // a => 'h';b => 'a'.......
let {length:len} = 'happy'; // len => 5 字符串对象有一个length属性，因此可以将这个属性解构出来

4.函数参数解构

[[1,2],[4,5]].map(([a,b]) => a + b); // [3,9] 数组形式的参数
// 对象参数，含有默认值，如果解构失败等于默认值
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]
//undefined就会触发函数参数的默认值
[1, undefined, 3].map((x = 'yes') => x);// [ 1, 'yes', 3 ]

5.解构运用

• 从函数返回多个值
  函数只能返回一个，如果想要返回多个值，只能将他们放在数组或者对象里返回。有了解构赋值，取出这些值就非常的方便。

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