美文网首页ES6
ES6-解构赋值 全解

ES6-解构赋值 全解

作者: 果汁凉茶丶 | 来源:发表于2022-05-02 10:43 被阅读0次
       /**
         * @func 字符串也可以解构赋值
         * @desc 结构后时一个类数组格式,需要用数组解构规则
         */
        let str = 'abc'
        const [x, y, z] = str
        console.log(x, y, z)
    
    
    
        /**
         * @func 数组的解构赋值,顺序解构
         * @desc 数组变量的取值由他的位置、顺序决定
         * @desc 模式相同,变量名任意取
         */
        let sourceArr = [[12, 30], [49, 91], 7]
        const [[a0, b0], [c0, d0], e0] = sourceArr
        console.log(a0, c0)
    
        /**
         * @func 数组解构的特殊用法
         * @desc 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构
         */
        let arr1 = [1, 2, 3, 4, 5,  6];
        let {0 : first, [arr.length - 1] : last} = arr1;
        first // 1
        last // 6
    
    
        
    
        /**
         * @func 对象的解构赋值,模式匹配
         * @desc 对象属性没有次序,变量必须与属性同名,才能取到正确的值,这个叫模式匹配
         * @desc 格式:{模式名:变量名},如果变量名和模式名相同,则可省略变量名。
         * @desc 注意:模式名并不会被赋值,只有变量才会被赋值,当省略变量名时,本质上也是有JS引擎给变量赋值而非模式。
         * @desc 结构赋值可以指定默认值,在变量后面添加等号即可。{ a = 1 } = obj
         */
        let obj1 = { foo: 1, bar: 2 }
        const { foo, bar } = obj1
        console.log(foo) // 1
    
        let obj2 = { noobivariable: 110, bar2: 21 }
        const { noobivariable: noob, bar2 } = obj2
        console.log(noob) // 110
        // console.log(noobivariable) // 报错
        
    
        /**
         * @func 完整的对象解构赋值
         * @desc 也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
         */
        let { fob: fob, bap: bap } = { fob: 'aaa', bap: 'bbb' };
        console.log(fob, bap)
    
    
    
        /**
         * @func 对象的深层解构
         * @desc 深层解构的模式名必须标注,因为JS引擎需要顺着模式名去原对象查找值,同样,模式名不会被赋值如需赋值,可将某一项当做一个整体,进行单独解构,如out1。
         */
        let sourceObj = {
            out1: {
                a2: 13,
                b2: 22
            },
            out2: {
                h2: 20,
                g2: 18
            },
            out3: 73
        }
        
    
        const { out1, out1: {a2, b2}, out2: {h2, g2}, out3 } = sourceObj
        console.log(out1, a2)
        // 三层的同理
        let sourceObj2 = {
            outer1: {
                cet1: {
                    innerA1: 130,
                    innerB1: 210
                },
                cet2: {
                    innerA2: 135,
                    innerB2: 215
                }
            }
        }
        const { outer1, outer1: { cet1, cet1: {innerA1}} } = sourceObj2
        console.log(outer1, cet1, innerA1)
    
    
        // 给对象解构赋值增加默认值
        let smObj = { s1: 1, s2: 2 }
    
        const { s1, s2, s3 = 10 } = smObj
        console.log(s1, s2, s3) // 1 2 10
    

    相关文章

      网友评论

        本文标题:ES6-解构赋值 全解

        本文链接:https://www.haomeiwen.com/subject/txgmyrtx.html