解构赋值

解构赋值

1.定义

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，该操作即为解构( Destructuring)。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

默认值：

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

注意：默认值可以引用解构赋值的其他变量，但改变量必须已经声明，否则会报错。
eg: let [x = y, y = 1] = []; // 报错,因为x用到默认值y时，y还没有声明

2.分类

解构数组：
用法：

注意：
如果解构不成功，变量的值就等于undefined。
如果等号的右边不是数组（不是可遍历的结构），将会报错。
解构赋值不仅适用于var命令，也适用于let和const命令。

使用场景：
1.变量声明并赋值时的解构

var foo = ["one", "two", "three"];

var [one, two, three] = foo;

2.变量先声明后赋值时的解构

var a, b;

[a, b] = [1, 2];

3.默认值: 为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。

var a, b;

[a=5, b=7] = [1];

4.交换变量

var a = 1;
var b = 3;

[a, b] = [b, a];

5.解析一个从函数返回的数组(取元素)

function f() {
  return [1, 2];
}

var a, b;

6.忽略某些返回值（选择性接受变量）：你也可以忽略全部返回值：

[,,] = f();

7.将剩余数组赋值给一个变量：注意：如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素。

var [a, ...b,] = [1, 2, 3];

解构对象：
变量必须与属性同名，才能取到正确的值，位置顺序没关系。

对象的解构赋值的内部机制：

使用场景：
1.基本赋值

var o = {p: 42, q: true};
var {p, q} = o;

2.无声明赋值：

var a, b;

({a, b} = {a: 1, b: 2});

注意：赋值语句周围的圆括号 ( … ) 在使用对象字面量无声明解构赋值时是必须的。
{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 {a, b} 被认为是一个块而不是对象字面量。
然而，({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}
你的 ( … ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行。

3.给新的变量名赋值

var c = {p: 1, q: true};
var {p: foo, q: bar} = c;

4.默认值

var {a = 1, b = 2} = {a: 3};

5.给新的变量命名并提供默认值

var {a:aa = 1, b:bb = 2} = {a: 3};

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

let [a,b,c]='hello';//a为h,b为e，c为l

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length:name} = 'hello';
//undefined
console.log(name);
//5

数值和布尔值的解构赋值：
解构赋值的原则是，如果等号右边不是对象，则先转换为对象。
如果等号右边无法转换为对象，则会报错，如nu11和undefined

函数参数的解构赋值：
函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此，也可以使用解构赋值。
其规则与数组、对象的解构赋值一致， 关键看参数是采用哪种解构赋值方式。

function add([x,y=1]){return x + y;}let a = add([2]);
//undefined
//a
//3

解构赋值使用场景：

1.交换变量的值：

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

2.方便从函数取值：

function fn(){return [1,2,3];}
var [a,b,c] =fn();

3.函数参数的定义：

function fn({x,y,z}){...};
f({z:1,y:2,x:3});

4.提取JSON数据：

var student = {id:1,name:"a",data:[123,456]};
let{id,name,data:number} = student;

5.函数默认参数值：

function fn({x=1,y=2} = {}){return [x,y];}
fn({x:3});

7.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

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