解构赋值

232 阅读1分钟

定义

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

语法

1.变量先声明后赋值的解构

    let {a,b}={a:1,b:2,c:3}
    console.log(a,b)//1 2
//
var a,b;
[a,b]=[1,2,3];
console.log(a,b)//1 2
//
    let obj = {
        name: "zhangsan",
        age: 17,
        active:{
            id:11114,
            sex:'男'
        }
    }
    let {age} = obj;
    let {age:age1}=obj;
    console.log(age) //17
    console.log(age1)//17,解构赋值重命名;

对象的多级解构赋值

    let {active:{id,sex}}=obj;
    console.log(id,sex)//11114 "男"

数组的多级解构赋值

    let arr=[1,2,[3,4],{id:1,sex:'男'}]
    let [,,[num1,num2],{id,sex}]=arr;
    console.log(num1,num2)//3 4
    console.log(id,sex)//1 "男"

2.变量声明并赋值时的解构

({a,b,c}={a:10,b:20,c:30})
console.log(a,b,c)//10 20 30
//这种方式在对象中容易出现变量为声明而报错,并且要注意对象解构最外层有个括号
[a,b,c]=[1,2,3,4,5,6]
console.log(a,b,c)//1 2 3

作用

  • 可以交换变量
var a=4,b=5;
[a,b]=[b,a]
console.log(a,b)//5 4
  • 可以防止从数组中取出一个默认值为undefined的对象
    可以在表达式左边的数组中为任意对象预设默认值。
    var a,b;
    [a=5,b=4]=[1];
    console.log(a,b) //1 4