解构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>