详细讲解JS的解构赋值(Es6

举报
码喽的自我修养 发表于 2024/07/26 23:33:10 2024/07/26
【摘要】 大家好,我是码喽的自我修养!今天给大家详细讲解【JS的解构赋值(Es6)】!并提供具体代码帮助大家深入理解,彻底掌握!如果能帮助到带大家,欢迎收藏+关注哦 💕

哈喽,大家好,我是码喽的自我修养!今天给大家详细讲解【JS的解构赋值(Es6)】!并提供具体代码帮助大家深入理解,彻底掌握!如果能帮助到带大家,欢迎收藏+关注哦 💕

解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构对象解构两大类型。 

一、数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>
  // 普通的数组
  let arr = [1, 2, 3]
  // 批量声明变量 a b c 
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  let [a, b, c] = arr
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
 
 
  // 应用:交换2个变量的值
    let a = 1
    let b = 2;                 
    [b, a] = [a, b]
    console.log(a, b) //2,1
</script>

总结:

  • 赋值运算符 = 左侧的 [ ] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
  • 变量的顺序对应数组单元值的位置依次进行赋值操作
  • 变量的数量大于单元值数量时,多余的变量将被赋值为 undefined
  • 变量的数量小于单元值数量时,可以通过 ... 获取剩余单元值,但只能置于最末位
  • 允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效

注:支持多维解构赋值,比较复杂后续有应用需求时再进一步分析

    // const arr = [1, 2, [3, 4]]
    // console.log(arr[0])  // 1
    // console.log(arr[1])  // 2
    // console.log(arr[2])  // [3,4]
    // console.log(arr[2][0])  // 3
 
    // 多维数组解构
    // const arr = [1, 2, [3, 4]]
    // const [a, b, c] = [1, 2, [3, 4]]
    // console.log(a) // 1
    // console.log(b) // 2
    // console.log(c) // [3,4]
 
 
    const [a, b, [c, d]] = [1, 2, [3, 4]]
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(d) // 4

二、对象解构

象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>
 
  // 普通对象
  const user = {
    name: "小明",
    age: 18
  };
 
//对象解构
  // 批量声明变量 name age
  // 同时将数组单元值 小明  18 依次赋值给变量 name  age
  const {name, age} = user
   //相当于 const name=user.name  const age=user.age
   //变量名必须和属性名相同
 
  console.log(name) // 小明
  console.log(age) // 18
 
//如果遇到变量名和原有的变量名冲突时,可以修改变量名
// 对象解构的变量名 可以重新改名  旧变量名: 新变量名
    // const { uname: username, age } = { uname: '小明', age: 18 }
 
    // console.log(username) // 小明
    // console.log(age)  // 18
</script> 

总结:

  • 赋值运算符 = 左侧的 { } 用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
  • 对象属性的值将被赋值给与属性名相同的变量
  • 可以从一个对象中提取变量并同时修改新的变量名 (变量:新变量名)
  • 对象中找不到与变量名一致的属性时变量值为 undefined
  • 允许初始化变量的默认值,属性不存在或单元值为 undefined 时默认值才会生效

多级对象结构

<script>
    // const pig = {
    //   name: '佩奇',
    //   family: {
    //     mother: '猪妈妈',
    //     father: '猪爸爸',
    //     sister: '乔治'
    //   },
    //   age: 6
    // }
    // // 多级对象解构
    // const { name, family: { mother, father, sister } } = pig
    // console.log(name)
    // console.log(mother)
    // console.log(father)
    // console.log(sister)
 
    const person = [
      {
        name: '佩奇',
        family: {
          mother: '猪妈妈',
          father: '猪爸爸',
          sister: '乔治'
        },
        age: 6
      }
    ]
    const [{ name, family: { mother, father, sister } }] = person
    console.log(name)
    console.log(mother)
    console.log(father)
    console.log(sister)
  </script>

应用:对象解构时,我们可以只选取自己想要的

 <script>
    // 1. 这是后台传递过来的数据
    const msg = {
      "code": 200,
      "msg": "获取新闻列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己,三大运用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "国际媒体头条速览",
          "count": 56
        },
        {
          "id": 3,
          "title": "乌克兰和俄罗斯持续冲突",
          "count": 1669
        },
 
      ]
    }
 
    // 需求1: 请将以上msg对象  采用对象解构的方式 只选出  data 方便后面使用渲染页面
     const { data } = msg  //这样就只选出了data
     console.log(data)
</script>

好了,本文就到这里吧,点个关注再走嘛~ 

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。