前端解构赋值

Posted 2021-08-30 唐微港

概念

结构赋值是ES6的一种语法规则，旨在允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这种就称之为结构赋值。

从本质上讲这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

数组结构

完全结构

结构并赋值

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

        var [a,b,c] = [4,5,6]
        console.log(a) //4
        console.log(b) //5
        console.log(c) //6

结构并赋值

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

        var [b,c] = [4,5,6]
        console.log(a)  //1
        console.log(b)  //5
        console.log(c)  //6

结构多于赋值

这种情况下并未进行结构赋值，而是直接将值赋给了最后一个元素

        var a = 1;
        var b = 2;
        var c = 3;
        var d = 4
        [a,b,c,d] = [6,9,2]
        console.log(a) //6
        console.log(b) //9
        console.log(c) //2
        console.log(d) //[6,9,2]

赋值多于结构

这种情况下会按照从左到右的顺序进行结构赋值给对应左边的值

        var a = 1;
        var b = 2;
        var c = 3;
        [a,b,c] = [6,9,2,0]
        console.log(a) //6
        console.log(b) //9
        console.log(c) //2

通过给预留位置的方式也是可行的，如下所示

        var a = 1;
        var b = 2;
        var c = 3;
        [,b,c] = [6,9,2]
        console.log(a) //1
        console.log(b) //9
        console.log(c) //2

新数组+值

        let [a, ...arr] = [1, 2, 3, 4];
        console.log(a) // 1
        console.log(arr) // [2, 3, 4]

新数组+值+undefined

        let [x, y, ...z] = ['a'];
        console.log(x) // a
        console.log(y) // underfine
        console.log(z)  // []

结构空值

        let [a] = [];
        let [b, c] = [1];
        console.log(a) // underfine
        console.log(b) //  1 
        console.log(c)  // underfine

数组中带数组

因为默认是按照从左到右的方式，所以这种数组中带有数组的方式默认是[b]结构出的是2，如果想结构出2，3两个，可以多加入一个变量例如 let [a, [b,d], c] = [1, [2, 3], 4];

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

如果想结构出1，3，4不想解构出2，那么可以使用,占一个位置即可，如下所示

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

解构并赋默认值

这种方式实在解构的时候给某些熟悉赋予默认值，或者在解构的时候将某些熟悉的值进行替换，替换为新的值

        var [x = true] = [];
        console.log(x) // true

        let [y, z = '2'] = ['1'];

        console.log(y) // y='1'
        console.log(z) // z='2'
        
        let [m, n = '4'] = ['3', undefined];

        console.log(m) // m='3'
        console.log(n) // n='4'

SET解构赋值

        let [x, y, z] = new Set(["a", "b", "c"]);
        console.log(x) // x
        console.log(y) // y
        console.log(z) // z

对象结构

对象和数组的解构有一定的区别，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

基本解构

        var { name, age } = { name: "aaa", age: 12 };
        console.log(name) //aaa
        console.log(age) //12

        //因为解构的属性名和待解构的不同，所以无法解析出值
        var { qqw, ryy } = { foo: "aaa", bar: "bbb" };
        console.log(qqw) //undefined
        console.log(ryy) //undefined

解构并赋值给自身

这种方式就是 var { foo, bar } = { foo: “aaa”, bar: “bbb” }; 的复杂写法，最常用的还是简写方式

        var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
        console.log(foo)
        console.log(bar)

解构并赋值给新变量

基本解构的方式是，需要解构和待解构的属性名相同才能获取到正确的值，如果不相同就无法取到值，但是解构并赋值给新变量的这种方式就可以实现将对应的值解构出来然后赋值给新的变量，这样新的变量就具有了对应的值

        //这里就是将foo的值取出来赋值给了qwq
        var { foo: qwq } = { foo: 'aaa', bar: 'bbb' };
        console.log(qwq)
        console.log(foo)//报错未定义，因为上面定义的其实是qwq,foo只是用于解构对应的值
        let obj = { first: 'hello', last: 'world' };
        let { first: f, last: l } = obj;
        console.log(f) // 'hello'
        console.log(l) // 'world'

对象数组嵌套解构

对象中带有对象

下面的这种方式是：先从list中解构出loc在从loc中解构出start在从start中解构出line

var list = {
            loc: {
                start: {
                    line: 1,
                    column: 5
                }
            }
        };

        var { loc: { start: { line } } } = list;
        console.log(line) //1

数组中带有对象

下面的这种方式是：先从obj对象中解构出p数组和name,在从p数组中解构出来Hello,和对象{ y: ‘World’ }，在从对象中解构出来y

var obj = {
            p: ['Hello', { y: 'World' }], name: 'good'};

        var { p: [x, { y }], name } = obj;
        console.log(x) //hello
        console.log(y) //world
        console.log(name) //good