ES6 解构赋值详解：对象解构赋值、数组解构赋值

迈不过友情╰ 2021-12-05 15:09 544阅读 0赞

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。

对象的解构赋值

对象是通过属性名进行解构（是用的最多的解构赋值）

  • 基本使用

    1. // 创建一个对象
    2. let obj = { username: '妲己', age: 18, gender: 'girl'}
    3. // 进行解构赋值
    4. let { age, username, gender} = obj
    5. // 通过解构赋值后左侧表达式中的变量已经申明可以直接使用
    6. username = username +','+ age
    7. console.log(username) // 输出结果：妲己,18

  • 属性名必须相同

    等号左侧中的名称必须是右侧对象中已有的属性名

    1. let obj = { username: '妲己', age: 18, gender: 'girl'}
    2. // obj 中没有 hobby 属性；相当于只声明了变量，没有进行赋值
    3. let { gender, hobby, username} = obj
    4. console.log(hobby)

    执行结果：

    1. undefined

  • 等号两侧的类型必须保持一致

    1. let obj = { username: '妲己', age: 18, gender: 'girl'}
    2. // 等号左侧为 “数组” 右侧是 “对象”
    3. let [gender, username, age] = obj
    4. console.log(username)

    执行结果：

    1. # 报错
    2. Uncaught TypeError: obj is not iterable

  • 灵活使用

    需要哪个属性值就结构赋值哪个属性，等号左侧名称的个数与右侧对象中的属性个数可以不一致。

    1. let obj = { username: '妲己', age: 18, gender: 'girl'}
    2. // 只获取对象中的 age 
    3. let { age} = obj
    4. console.log(age) // 执行结果：18

    作为参数使用

    1. let obj = { username: '妲己', age: 18, gender: 'girl'}
    3. function fun({ username, age} = obj) { 
    4.     console.log(username, age)
    5. }
    7. fun()

    执行结果：

    1. 妲己 18
数组的解构赋值

通过数组下标进行解构赋值

  • 基本使用

    1. let arr = ["潘金莲", 26, "Sexy married women"]
    2. let [name, age, MaritalStatus] = arr
    3. console.log(MaritalStatus)

    输出结果：

    1. Sexy married women

  • 等号左右两侧的结构必须保持一致

    1. let arr = ["潘金莲", 26, ["Sexy married women", "萧、古筝、琵琶"]]
    2. let [name, age, MaritalStatus] = arr
    3. console.log(name, age, MaritalStatus)

    执行结果：

    1. # 变量 MatitalStatus 拿到的是一个数组，获取其中的值还需要下标索引
    2. 潘金莲 26 ["Sexy married women", "萧、古筝、琵琶"]数

  • 被解构的数组为空时，可以给等号左侧中的变量初始化一个默认值

    1. let arr = []
    2. let [name = "貂蝉", age = 16, gender = "女"] = arr
    3. console.log(name, age, gender)

    执行结果：

    1. 貂蝉 16 女

  • 灵活使用

    获取数组指定下标的值，通过 “,” ；一个 “,” 占一个下标

    1. let arr = ["潘金莲", 26, "Sexy married women", "萧、古筝、琵琶"]
    2. // 获取 arr 下标为 2 的值
    3. let [,,MatitalStatus] = arr
    4. // 输出结果
    5. console.log(MatitalStatus)

    执行结果：

    1. Sexy married women

发表评论

表情：
评论列表 （有 0 条评论，544人围观）

还没有评论，来说两句吧...

相关阅读

    相关 es6解构赋值

    一、定义 ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构 二、详情讲解 1、数组解构：数组解构时数组的元素是按次序排列的，变量的取

    浅浅的花香味﹌浅浅的花香味﹌/ 0 赞/ 356 阅读

    相关 ES6解构赋值

    ES6 解构赋值 概述 解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明

    迷南。迷南。/ 0 赞/ 396 阅读

    相关 es6 解构赋值

    ES6解构赋值 传统的变量赋值： 变量的解构赋值： 数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

    短命女短命女/ 0 赞/ 524 阅读

    相关 ES6——解构赋值

    原文链接：[小邵教你玩转ES6][ES6] 解构赋值 解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

    迷南。迷南。/ 0 赞/ 651 阅读

    相关 ES6解构赋值详解

    ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。这种赋值语法极为简洁，同时还比传统的属性访问方法更为清晰 1：数组的解构赋值，可以从数组中提取值，

    柔情只为你懂柔情只为你懂/ 0 赞/ 470 阅读