解构赋值的运用

今天药忘吃喽~ 2023-07-15 11:21 2阅读 0赞

#### 什么是解构赋值 ####

解构赋值是赋值运算符的扩展，左边结构与右边结构一一对应赋值。

let [a, b, c] = [1, 2, 3]
    console.log(a, b, c)
    
    // a => 1
    // b => 2
    // c => 3

除了上面最基本的解构赋值，我们还可以省略

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

还可以配合`...`运算符赋值

let [a, b, ...c] = [1, 2, 3, 4, 5]
    console.log(a, b, c)
    
    // a => 1
    // b => 2
    // c => [3, 4, 5]

还可以设置默认值，当赋值为`undefined`是会赋值默认值。

let [a = 10, b = 20, c = 30] = [1, 2]
    console.log(a, b, c)
    
    // a => 1
    // b => 2
    // c => 30

数组的长度

let arr = [1, 2, 3, 4, 5]
    let { 
        length
    } = arr;
    console.log(length)

--------------------

以上都是在`Array`中的运用，我们来看看在`Object`中的运用。

let { 
        name,
        age
    } = { 
        name: 'robbit',
        age: 20
    };
    console.log(name, age)
    
    // robbit 20

在我们开发中，后台通常返回的数据一个Json对象的，我们可以通过解构赋值部分需要的参数。

let dataset= { 
        name: "robbit",
        age: 18,
        sex: "nan",
        class: 10
    }
    let { 
        name: oName,
        age: oAge,
        sex: oSex
    } = dataset;
    console.log(oName, oAge, oSex)
    
    // oName => robbit
    // oAge => 18
    // oSex => nan

--------------------

当左右解构一致时，`Array`和`Object`也可以解构嵌套。

**数组里嵌套对象**

let arr = [1, 2, 3, { 
        name: 'robbit'
    }];
    let { 
        0: a,
        1: b,
        2: c,
        3: { 
            name: oName
        }
    } = arr;
    console.log(a, b, c, oName)
    
    // a => 1
    // b => 2
    // c => 3
    // oName => robbit

**对象里嵌套对象**

let obj = { 
        name: 'robbit',
        age: 20,
        arr: { 
            data: 1,
        }
    }
    let { 
        name: a,
        age: b,
        arr: { 
            data: c
        }
    } = obj
    console.log(a, b, c)
    
    // a => robbit
    // b => 20
    // c => 1

--------------------

**对象里嵌套数组**

let obj = { 
        name: 'robbit',
        age: 20,
        arr: [1]
    }
    let { 
        name: a,
        age: b,
        arr: [c]
    } = obj
    console.log(a, b, c)
    
    // a => robbit
    // b => 20
    // c => 1

**优点**  
由此看来，左边结构与右边结构一一对应就可以完成赋值，这的确是一种非常简洁的语法。