ECMA-Script6之Destructuring 解构-优快云博客

本文详细介绍了JavaScript中的解构赋值技术，包括基本语法、特殊用例、对象解构及实际应用场景，如变量交换、函数多值返回和参数顺序调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Destructuring 解构是一种赋值语法。
1.以前的书写形式：

let a = 1;
let b = 2;
let c = 3;

使用结构赋值可以直接写成

let[a,b,c] = [1,2,3];
let[a[b,c],d] = [1,[2,3],4];//其中[b,c]传递的是数组

2.注意：这里的[1,2,3]并不是数组，而是为了和前面的[a,b,c]相互对应。使1，2，3分别赋值给a，b，c。左右两边的括号要对应，不能一个是中括号，一个是大括号。
特殊情况：

let[a,b,c] = [1,2];
let[a,b,c] = [1,2,3,4];

这两种情况是不会报错的。但是第一种中，c的值为undefined，因为没有值传给他，第二种中的 4 会自动被忽略掉
3.使用对象进行赋值

let {name,age,id} = {name:"fish",age:11,id:110};

将对象{name:"fish",age:11,id:110}赋值给 {name,age,id} 这个对象
4.应用
1.交换变量的值

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

使用这种方法，可以保证在不引入第三个参数的情况下交换两个变量的值。这是面试官经常会问到的问题
2.函数可以返回多个值

function name(){
    let q = 1;
    let w = 2;
    let e = 3;
    return [q,w,e];
}
var [a,b,c] = name();

这是相对于传统的函数而言是不能做到的。同时返回多个变量的值。
3.改变函数的参数定义顺序

function chan({var1,var2,var3}){
    console.log(var1,var2,var3);
}
//chan({var1:10,var3:5, var2:1 });
chan({var1:10,var3:5});

形参与实参的顺序无关，相关的是参数名。当少形参时，对应的实参为undefined。也可以给实参默认值，像：function chan({var1=10,var2=20,var3=30}){}。当形参有值时会覆盖实参的默认值。