对象的结构赋值和数组的结构赋值

最新推荐文章于 2024-07-02 08:55:42 发布

FGGIT

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量195

点赞数

分类专栏： vue学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_47888212/article/details/128659596

版权

vue学习笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

对象的结构赋值：

<!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: 'zs',
    //   age: 18
    // }
    // // 对象的结构赋值
    // // let {变量名，变量名} = obj
    // // 注意：对象解构时，变量名要求和对象的属性名一致，顺序随便写
    // let {a,b} = obj
    // console.log(a,b) //undefined,undefined
    // let {name,age} = obj
    // console.log(name,age)// zs,18


    // let a = 1, b = 2
    // console.log({a:a,b:b}) //{a: 1, b: 2}
    // //简写
    // console.log({a,b}) //{a: 1, b: 2}
    
    // //注意：对象中的属性叫什么，解构出来的变量必须叫什么，如果想自定义变量名，可以使用下面这种形式
    // //a和b就是新的变量名，foo和hoo这两个变量名没有定义
    // let {foo:a,hoo:b} = {foo:1,hoo:2}
    // console.log(a,b) // 1,2
    // console.log(foo,hoo) // 报错foo is not defined 

    // let {x, y = 10} = {x:1}
    // console.log(x,y)

    // let obj = {a:1,b:[2,3,4]}
    // let{
    //   a,
    //   b:[b1,b2,b3]
    // } = obj
    // console.log(a,b1,b2,b3) //1,2,3,4


    //由于数组本质是特殊的对象，因此可以对数组进行对象属性的结构
    //由于数组也是对象，所以数组也可以使用对象的结构语法
    //0在数组中是下标，但是如果把数组看作对象，下标其实就是对象中的键
    //0:first就是将0这个键对应的值赋值给变量first
    // let arr = [1,2,3]
    // let {0:first,[arr.length - 1]:last} = arr
    // console.log(first,last) //1,3

    // let console = {
    //   log: function(){
    //     alert("11111")
    //   }
    // }
    // let {log} = console
    // log()

    // let {log} = console
    // log(1)

    // function fun1([x,y,z]){
    //   console.log(x,y,z)
    // }
    // fun1([1,2,3])

    // function fun1({x,y,z}){
    //   console.log(x,y,z)
    // }
    // fun1({y:1,x:2,z:3})

    let json = {
      "name": "zs",
      "sex": "女",
      "age": 18
    }
    let {name,sex,age} = json
    console.log(name,sex,age)

  </script>
</body>
</html>

数组的结构赋值：

<!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>
    //需求：将数组中的值，分别赋值给变量a,b,c,d
    //这行代码的作用：首先在全局中定义了4个变量，然后按照数组的顺序，将数组中的值，依次赋值给4个变量
    // let arr = [1,2,3,4]
    // let [a,b,c,d] = arr
    // console.log(a,b,c,d) //1,2,3,4

    //数组的结构赋值
    // let [c,d] = [1]
    // console.log(c,d)  //1 undefined

    // let [a] = [1,2]
    // console.log(a)  //1

    // let [a = 1,b = 2] = [3]
    // console.log(a,b)  //3,2

    // ...变量名 接收后面的所有值
    // let[a, b, ...c]= [1,2,3,4,5,6,7,8,9]
    // console.log(a,b,c) //1 2 [3,4,5,6,7,8,9]

    // let [a,b,[c,d],e] = [1,2,[3,4],5]
    // console.log(a,b,c,d,e) //1,2,3,4,5

    // let a = 1
    // let b = 2
    // //这里不加;会变为let b = 2[a,b] = [b,a]先执行=右边所以会提升b未定义，大部分时候不用加；分开语句，但有时候还是要加；的
    // ;[a,b] = [b,a]
    // console.log(a,b)

    //注意：这样会报错，报错的内容是hoo没有被初始化，因为数组从左往右执行，hoo=2后执行
    // let [foo = hoo, hoo = 2] = []
    // console.log(foo,hoo)
</script>
</body>
</html>