解构赋值

给出如下对象

1
2
3
4
5
6
7
8
9
10
<script>
    const Obj1 = {
        name:'张三',
        age:14,
        hobby:{
            title:'羽毛球',
            en:'badminton'
        }
    }
</script>

  • 获取name和age属性

    • 正常写法

      1
      2
      3
      const name = Obj1.name
      const age = Obj1.age

    • 解构赋值写法

      1
      2
      //解构赋值name,age
      const {name,age} = Obj1

  • 多级解构赋值

    • 获取hobby中的title和en属性

      1
      2
      //获取hobby中的title和en属性
      const {hobby:{title,en}} = Obj1

  • 函数中的应用

    • 普通写法

      1
      2
      3
      4
      5
      function func(Obj) {
          console.log('title值为(普通写法)：',Obj.hobby.title)
      }
      //传入上面的Obj1对象
      func(Obj1)

    • 解构写法

      1
      2
      3
      4
      5
      function func1({hobby:{title}}) {
          console.log('title值为(解构赋值写法)：',title)
      }
      //同样传入上面的Obj1对象
      func1(Obj1)