什么是解构赋值？解构赋值的用途有哪些？

什么是解构赋值？解构赋值的用途有哪些？

1.什么是解构赋值？

①定义： 解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

②解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配，而后对其中的变量进行赋值解构赋值，左右结构必须同样，使用左边定义的值，快速的取出数据中对应的数据值，并且 定义和赋值必须放到一块，否则的话就会报错，取不出来数据值；并且左边也必须是一个 js 存在数据结构 。否则的话也会报错，解构赋值的主要作用：在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

2.引入背景

在ES5中，开发者们为了从对象和数组中获取特定数据并赋值给变量，编写了许多看起来同质化的代码

let options = {
    repeat: true,
    save: false
};
// 从对象中提取数据
let repeat = options.repeat,
save = options.save;

这段代码从options对象中提取repeat和save的值，并将其存储为同名局部变量，提取的过程极为相似

如果要提取更多变量，则必须依次编写类似的代码来为变量赋值，如果其中还包含嵌套结构，只靠遍历是找不到真实信息的，必须要深入挖掘整个数据结构才能找到所需数据

所以ES6添加了解构功能，将数据结构打散的过程变得更加简单，可以从打散后更小的部分中获取所需信息

3.解构赋值的用途

1.数组的解构赋值

var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量；
console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3

①.结构赋值可以嵌套的

var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];
console.log(c1);//结果：c1的值为3.1
console.log(c2);//结果：c2的值为3.2

②.不完全解构

var [a,b,c] = [1,2];
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2

③.赋值不成功，变量的值为undefined

var [a,b,c] = [1,2];
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为undefined

④.允许设定默认值

var [a,b,c=3] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3

⑤.覆盖默认值3

var [a,b,c=3] =[1,2,4];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为4

注意：当新的值为undefined的时候，是不会覆盖默认值的。

⑥剩余运算符

let [a,b,..rest]=[1,2,3,d]
console.log(a)//1
console.log(b)//2
console.log(rest)//[3,4]

2.对象的解构赋值

var { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为3

①对象解构赋值也可以嵌套

var {a:{b}} = {"a":{"b":1}};
console.log(b);//结果：b的值为1

②可以指定默认值

var {a,b=2} = {"a":1};
console.log(b);//结果：b的值为默认值2

③.字符串的解构赋值

var [a,b,c,d,e,f] = "123456";
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d);//4
console.log(e);//5
console.log(f);//6

④剩余运算符

let {a,b,...rest}={a:1,b:2,c:3,d:4}
console.log(a)//1
console.log(b)//2
console.log(rest)//{c:3,d:4}

4.其他情况的解构赋值

1.交换变量的值

var x = 1;
var y = 2;
[x,y] = [y,x];//成功交换x，y的值。

2.提取函数返回的多个值(实现快速的提取对应的值)

function demo(){
    return {"name":"张三","age":21}
}
var {name,age} = demo();
console.log(name);//结果：张三
console.log(age);//结果：21

3.定义函数参数(方便提取JSON对象中想要的参数)

function demo({a,b,c}){
    console.log("姓名："+ a);
    console.log("身高："+ b);
    console.log("体重："+ c);
}
demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});

4.函数参数的默认值

function demo({name="张三"}){
    console.log("姓名："+name);//结果：姓名：张三
}
demo({});