对象-数组-解构Destructuring

解构Destructuring

  ◼ ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。
      解构赋值是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中。
  ◼ 我们可以划分为：数组的解构和对象的解构。
  ◼ 数组的解构：
      基本解构过程
      顺序解构
      解构出数组：…语法
      默认值
  ◼ 对象的解构：
      基本解构过程
      任意顺序
      重命名
      默认值
案例:
  <script>
      var names = ["abc","cba",undefined,"nba","aaa"]
      var obj = {name:"hdc",age:21,height:1.88}
      // 1. 数组的解构
      // var name1 = names[0]
      // var name2 = names[1]
      // var name3 = names[2]
      // var name4 = names[3]
      // 1.1 基本使用
      // var [name1,name2,name3] = names
      // console.log(name1,name2,name3) // abc cba nba
      // 1.2 顺序问题:数组具有严格的顺序
      var [name1,,name3] = names
      console.log(name1,name3) // abc nba
      // 1.3 解构出数组
      var [name1,name2,...newNames] = names
      console.log(newNames) // (2) ['nba', 'aaa']
      // 1.4 解构的默认值
      var [name1,name2,name3 = "default"] = names
      console.log(name3)// default
      // 2. 对象的解构
      // var  name = obj.name
      // var age = obj.age
      // var height = obj.height
      //2.1 基本使用
      var {name,age,height} = obj
      console.log(name,age,height) // hdc 21 1.88
      // 2.2 顺序问题:对象的解构是没有顺序问题的,是根据key解构
      var {height,name,age} = obj
      console.log(name,age,height) // hdc 21 1.88
      // 2.3 重命名
      var {height:h,name:n,age:a} = obj
      console.log(n,a,h) // hdc 21 1.88
      // 2.4 默认值
      var { 
        height:h,
        name:n,
        age:a,
        address:ars = "天津"
        }=obj
      console.log(n,a,h,ars) // hdc 21 1.88 天津
      // 2.5 对象的剩余内容
      var {
        name,
        age,
        ...newObj
      }=obj
      console.log(newObj)// {height: 1.88}
      // 应用:在函数中(其他类似的地方)
      function getPosition({x,y}){
          console.log(x,y) // 10 20
      }
      getPosition({x:10,y:20})
  </script>