解构赋值给我们一种新的变量赋值方式，主要可以利用数组解构赋值和对象解构赋值。它的用途包括：交换变量值，提取函数返回值，函数参数定义，默认值设定等等，给我们编程带来便利。

解构赋值的用途

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({});

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

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

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

3).赋值不成功，变量的值为undefined
var [a,b,c] = [1,2];
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为undefined

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

5).覆盖默认值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的时候，是不会覆盖默认值的。


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":2};
console.log(a);//结果：a的值为undefined

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


1)对象解构赋值也可以嵌套
var {a:{b}} = {"a":{"b":1}};
console.log(b);//结果：b的值为1

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

3.字符串的解构赋值
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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/4136