解构赋值

解构赋值
什么是解构赋值：按照一定的模式从数组或者对象中提取值，然后对变量进行赋值，这被称为解构赋值。
数组解构赋值
基本用法
下标对下标。
let [a,b,c]=[1,2,3];
let [a,[[b],c]=[1,[[2],3]];

结果: 同时声明三个变量a，b和c，a拿到值1， b拿到值2，c拿到值3。这种写法属于"模式匹配"，只要模式相同左边的变量就会被赋予相对应的值。
let [,,third] = ["foo","bar","baz"]   //third="baz"(解构部分)
let [a,,b] = [1,2,3]   //a=1,b=3(解构部分)
let [x,y] = [1,2,3]   //x=1,y=2(不完全解构)

但是如果解构不成功变量的值就等于undefined
let [a,b,...c] = ["1"]   //a=1,b=undefined,c=[]

如果等号右边不是数组（或是可遍历的结构）就会报错。
默认值
数组的解构赋值允许指定默认值
let [a = 1] = []; //a = 1


注意：


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


注意null！== undefined，当数组成员等于null时，默认值是不会生效的。


默认值也可以引用解构赋值的其他变量，但是该变量必须已经声明。



对象解构赋值
基本用法
属性名对属性名。
let { foo:foo ,bar:bar } = { foo:"aaa",bar:"bbb" };
//foo="aaa",bar="bbb"

对象的解构赋值和数组有一个重要的不同。数组的元素是按次序排列的，变量的取值是由他的下标决定的；而对象的属性没有次序，变量必须与属性同名才能取到正确的值。
简写（语法糖）:
通常原对象中的属性名起的挺好，简洁又见名知意，所以没必要再另外起一个变量名，所以:
	let { foo:foo,bar:bar } = { foo:"aaa",bar:"bbb"};
	可简写为:
	let { foo,bar } = { foo:"aaa",bar:"bbb"};
一个名两个用途:既当做配对的属性名，又当做将来单独使用的变量名

注意：


等号左边要把变量装扮成和要解构的数组或者对象相同的结构


于数组一样，对象解构赋值也可以用于嵌套的解构的对象


看对象解构面试题时，一定要先把简写写成最开始的写法看清楚谁是模式谁是变量再进行判断



//如果属性名不一样，必须写成如下例子中一样
let { foo:baz } = { foo:"aaa",bar:"bbb"};
//baz="aaa"，实际上被赋值的是foo属性的baz变量

默认值
对象的解构赋值也允许指定默认值
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"


注意

默认值生效的条件是，对象的属性值严格等于undefined
注意null不严格等于undefined会使默认值不生效
解构失败，变量的值等于undefined


字符串解构赋值
字符串也可以解构赋值，这是因为此时字符串被转换成了一个类数组对象。
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

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。
由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
由上的代码可以看出，左边写成let {toString: s} = 123;是可以把Number.prototype.toString方法的地址值复制一份出来给左边对象结构中的s，那么以后我们想调用别的父类型（原型对象）上的方法也是不是可以这样做？
eg：查看一个数据是什么类型的：
let { toString:objToString } = {};
objToString.call(1) === "[object Number]"  //true
objToString.call("") === "[object String]"  //true
objToString.call([]) === "[object Array]"  //true

可以看到我从{}.toString处拿到了Object顶级父对象toString的地址值然后解构赋值给了objToString找到了这个方法是可行的。
函数参数解构赋值
以数组或对象形式传递多个参数，调用时，所有实参值必须也放在一个数组或对象中传入。
function fun([a,b]){
    console.log(a+b)
}
fun([1,2]);//3

function fun({a:a,b:b}){
    console.log(a+b)
}
fun({a:1,b:2});//3

简写: 语法糖: 如果形参名与属性名没必要区分，是相同的名字，也可以只写一个。
function fun({a,b}){
    console.log(a+b)
}
fun({a:1,b:2});//3

函数参数的定义和函数参数的默认值
当一个函数内需要多个参数，但调用时不能确定参数有没有，而又要求参数值与函数内变量有对应关系这时就要用到参数解构；指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
function order(
{zhushi: zs = "香辣鸡腿堡",xiaochi: xc = "薯条薯条",yinliao: yl = "可口可乐"}={})
{
  console.log(`您本次点的是:
  主食:${zs},
  小吃:${xc},
  饮料:${yl}
`)
}
order()


实际应用
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]

4 输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
import { queryMicroInfoShopPost } from "@/api/sysmgr"


ps： 学习阮一峰 ES6入门 个人理解心得总结(2)-解构赋值  个人理解难免有错误，欢迎大家指正
收起
解构赋值

ES6解构赋值 数组解构赋值 对象解构赋值 函数参数解构赋值 解构 参数解构

解构赋值

数组解构赋值

基本用法

默认值

对象解构赋值

基本用法

简写（语法糖）:

默认值

字符串解构赋值

数值和布尔值的解构赋值

函数参数解构赋值

函数参数的定义和函数参数的默认值

实际应用

1 交换变量的值

2 函数返回值

3 提取JSON数据

4 输入模块的指定方法

解构赋值

ES6解构赋值数组解构赋值对象解构赋值函数参数解构赋值解构参数解构
