ES6

ES6-解构赋值 全解

2022-05-02  本文已影响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
上一篇 下一篇

猜你喜欢

热点阅读