一 什么是解构赋值

解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量

二 解构赋值的原理

1.模式(结构)匹配

[]=[1,2,3]

2.索引值相同的完成赋值

const[a,b,c]=[1,2,3]

不取的,可以直接用逗号跳过

const [a,[,,b],c]=[1,[2,4,5],3]

三 解构赋值的默认值

1.默认值的基本用法

const [a, b] = [];// const [a,b]=[undefined,undefined]

2.默认值的生效条件

只有当一个数组成员严格等于(===)undefined时,对应的默认值才会生效

const [a=1,b=2]=[3,0]
const [a=1,b=2]=[3,null]
const [a=1,b=2]=[3]
console.log(a,b);

3.默认值表达式

如果默认值是表达式,默认值表达式是惰性求值的

const func=()=>{
        console.log("我被执行了");
        return 2;
    }// const [x=func()]=[1]
const [x=func()]=[];
console.log(x);

四 解构赋值的应用

1.常见的类型组的解构赋值

arguments

function func(){
    console.log(arguments);
    // console.log(arguments.push);
    const [a,b]=arguments;
    console.log(a,b);
}
func()
func(1,2)
NodeList
console.log(document.querySelectorAll("p"));

const [p1,p2,p3]=document.querySelectorAll("p")
console.log(p1,p2,p3);

2.函数参数的解构赋值

const array=[1,1]
const add=arr=>arr[0]+arr[1]
console.log(add(array));
const add=([x,y])=>x+y;
const add=([x=0,y=0])=>x+y;
console.log(add([1,2]));

3.交换变量的值

let x=1;
let y=2;
// let tmp=x
// x=y
// y=tmp
// console.log(x,y);
[x,y]=[y,x]
[x,y]=[2,1]
console.log(x,y);