解构赋值（数组解构、对象解构）

最新推荐文章于 2023-10-11 19:46:09 发布

你想要那颗糖

最新推荐文章于 2023-10-11 19:46:09 发布

阅读量178

点赞数 2

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

本文链接：https://blog.csdn.net/qq_50260510/article/details/129927253

版权

JavaScript 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

文章介绍了JavaScript中的解构赋值概念，包括对数组和对象的解构。在数组解构中，通过指定变量对应数组位置进行赋值；在对象解构中，可以直接按属性名提取值并赋给相应变量。示例代码展示了如何使用解构赋值来简化变量的赋值过程。

摘要由CSDN通过智能技术生成

解构：其实就是把一个事物的结构进行拆解

解构赋值：可以将数组中的值或对象的属性取出，赋值给其他变量

一、数组结构

解构赋值基本语法：

（1）右侧数组的值将被赋值给左侧的变量

（2）变量的顺序对应数组值的位置依次进行赋值操作

二、对象解构

案例展示：

<!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 obj = {
    //   name: '淳佳静',
    //   age: 18
    // }
    // let name = obj.name
    // let age = obj.age

    // let arr = [1, 2, 3]
    // let a = arr[0]
    // let b = arr[1]
    // let c = arr[2]
    
    // 数组解构
    // let arr = [1, 2, 3]
    // let [a, b, c] = arr
    // console.log(a, b, c)

    // 对象解构
    let obj = {
      name: '淳佳静',
      age: 18
    }
    // console.log(obj.name, obj.age)
    let { name, age } = obj
    console.log(name, age)
  </script>
</body>
</html>

效果展示：