JS数组解构、对象结构、参数解构

最新推荐文章于 2024-02-25 19:10:40 发布

记忆怪 bug

最新推荐文章于 2024-02-25 19:10:40 发布

阅读量1.1k

点赞数

分类专栏： js高级文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_66051368/article/details/123513829

版权

js高级专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 数组解构

<!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>
      var nums = [11, 22, 33]
      // 希望: a=11  b=22  c=33
      /* //原始写法
      let a = nums[0]
      let b = nums[1]
      let c = nums[2]   */
      let [a, b, c] = nums
      console.log(a, b, c)   //11 22  33
      // 省略写法:
      let [x, , y] = nums
      console.log(x, y)   //11 33


      // 快捷互换变量的值
      let h = 11
      let k = 22;
      //至少写一个分号 间隔
      [h, k] = [k, h] // var [h,k] = [22,11]
      console.log(h, k)  //22 11
    </script>
  </body>
</html>

2.1 对象解构

<!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>
      //对象解构
      var e = { name: '嗷嗷', age: 11, phone: '10086' }
      let { name, age, phone } = e
      console.log(name, age, phone)
      // let name = e.name
      // let age = e.age
      // let phone = e.phone

      var c1 = {
        kuan: 100,
        gao: 8,
        chang: 33,
        get volume() {
          // 原始写法
          // return this.kuan*this.gao+this.chang
          
          //从当前this对象中, 解构出属性:
          let { kuan, gao, chang } = this
          return kuan * gao * chang
        },
      }

      console.log(c1.volume)
    </script>
  </body>
</html>

2.2 对象解构——起别名的用法

当重复定义变量名，后台会报错 identifier 变量...

<!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>
    let a = 4

    let obj = { a: 33, b: 55 }
    // 解构出属性:
    // 起别名: { 属性名: 别名 } = 对象
    let { a: aa, b: b } = obj
    console.log(aa, b)   //33 55

    // 复杂解构
    var bb = {
      skills: ['html', 'css', 'js'],
      game: {
        gname: 'yoyoyoyoyoy',
        price: 44,
      },
    }

    let {
      skills: [s1, , s2],
      game: { gname, price },
    } = bb

    console.log(s1, s2, gname, price)  //html js yoyoyoyoyoy 44

    ///
    var cc = {
      emp: { name: '纷纷', age: 33 },
      boss: { name: '试试', age: 38 },
      teachers: ['QQ', '偏偏', '零零', '莫玛', '比比'],
    }

    let {
      emp: { name: ename, age: eage },
      boss: { name: bname, age: bage },
      teachers: [t1, t2, , t3],
    } = cc

    console.log(ename, eage, bname, bage, t1, t2, t3)  //纷纷 33 试试 38 QQ 偏偏 莫玛
  </script>
</body>

</html>

3 参数解构

<!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>

   
      // 如果参数是对象类型, 可以利用解构语法 直接解构出对象中的值
      function volume({ chang, kuan, gao }) {
        // let { chang, kuan, gao } = obj

        console.log(chang * kuan * gao)
      }

      let c1 = { chang: 100, kuan: 34, gao: 50 }

      volume(c1) //17000

      var a = { x: 10, y: 5 }

      // bb(a):  相当于 {x,y} = a;
      function bb({ x, y }) {
        //算出 x 和 y 的乘积
        console.log(x * y)
      }

      bb(a)  //50
    </script>
  </body>
</html>

记忆怪 bug

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS数组解构、对象结构、参数解构

1 数组解构<!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" />
复制链接

扫一扫