【JS重点12】解构赋值-对象解构

程序员微木

已于 2024-06-14 15:15:39 修改

阅读量520

点赞数 11

分类专栏： JS重点文章标签： javascript 前端开发语言

于 2024-06-13 20:21:34 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/139605080

版权

JS重点专栏收录该内容

18 篇文章 0 订阅

订阅专栏

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

一：基本语法

    const obj = {
      uname: '微木',
      age: 10
    }
    const { uname, age } = obj
    console.log(uname, age);

对象解构的变量名要与解构对象中属性名相同，否则就会返回undefined
解构的变量名不能与当前作用域中的变量名冲突

二：对象解构细节：

1 解构对象的变量名修改

解构对象的变量名可以进行修改，语法如下：旧变量名：新变量名

    const obj = {
      uname: '微木',
      age: 10
    }
    const { uname: username, age } = obj
    console.log(username, age);

2 数组对象解构

    const pig = [{
      name: '佩奇', 
      age: 18
    }]
    const [{ name, age }] = pig
    console.log(name, age);

3 多级对象解构

    const pig = {
      name: '佩奇',
      family: {
        mother: '猪妈妈',
        father: '猪爸爸'
      },
      age: 18
    }
    const { name, family: { mother, father }, age } = pig
//解构中，如果不标明是family对象，则会报错

4 对象数组解构

    const msg = { data: [1, 2, 3, 4] }
    const { data } = msg

简单总结，就是一一对应——源数据写大括号解构时就写大括号，源数据填写中括号，解构时就填写中括号；重要的是变量名对应、以及变量名修改问题

三：练习题

练习题的需求在script标签中，同时需求的详要求在代码中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <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
    // 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
    // function render({ data }) {
    //   // 我们只要 data 数据
    //   // 内部处理
    //   console.log(data);
    // }
    // render(msg)
    // 等价于
    function render(arr) {
      const { data } = arr
      console.log(data);
    }
    render(msg)
    //将msg对象作为参数传递给render函数的同时解构了msg中的data属性，从而可以简化代码
    // 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
    function render({ data: myData }) {
      // 要求将 获取过来的 data数据 更名为 myData
      // 内部处理
      console.log(myData);
    }
    render(msg)

  </script>
</body>

</html>