美文网首页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-解构赋值 全解

  • ES6变量的解构赋值

    目录 1、数组的解构赋值 2、对象的解构赋值 3、字符串的解构赋值 4、函数参数的解构赋值 5、用途 1、数组的解...

  • es6-解构赋值

    什么是解构赋值 左右一一对应进行赋值。 解构赋值的分类 数组解构赋值,左右都是数组 对象解构赋值,左右都是对象 字...

  • ES6-解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 要点: 1、左右两边结构必须一样;2...

  • ES6-解构赋值

    语法 可以将值从数组或属性从对象提取到不同的变量中。 表达式左边定义了要从原变量中取出什么变量。 解构数组 数组解...

  • ES6-解构赋值

    ES6为对象和数组提供了解构功能,允许按照一定模式从对象和数组中提取值,并对变量进行赋值。 对象解构对象解构的语法...

  • ES6 2.解构赋值

    解构赋值 解构赋值的分类 数组解构赋值 对象解构赋值 字符串解构赋值 布尔值解构赋值 函数参数解构赋值 数值解构赋...

  • ES6 语法(解构赋值)

    什么是解构赋值及用法 解构赋值分类:数组解构赋值对象解构赋值字符串解构赋值布尔值解构赋值函数参数解构赋值数值解构赋...

  • ES6解构赋值、交换两个变量的值、设置函数默认值、模板字符串、箭

    1,解构赋值 解构赋值主要包括数组的解构赋值、对象的解构赋值、字符串的解构赋值、函数参数的解构赋值。 (1)数组的...

  • 解构赋值,设置函数默认值,箭头函数

    1,解构赋值 解构赋值主要包括数组的解构赋值、对象的解构赋值、字符串的解构赋值、函数参数的解构赋值。 (1)数组的...

网友评论

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

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