在ES6中新增了变量赋值的方式。
数组解构赋值
按照一定的模式,从数组和对象中提取值。
let [a, b, c] = [1, 2, 3]
解构赋值的重点在于和左侧要和右侧有类似的格式,例如上面的中括号[ ]
赋值元素可以是任意可遍历元素
let [a, b, c] = "abc" // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3])
可以跳过赋值元素
如果想跳过数组的某个元素进行赋值,可以使用逗号实现。
let [name, , title] = ['John', 'Jim', 'Sun', 'Moon']
console.log( title ) // Sun
使用rest获取剩下的数组元素
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]
console.log(name1) // Julius
console.log(name2) // Caesar
// Note that type of `rest` is Array.
console.log(rest[0]) // Consul
console.log(rest[1]) // of the Roman Republic
console.log(rest.length) // 2
注意:要保证rest放在最后的位置。
默认值
如果对应位置没有值,则取默认值。
let [name = "Guest", surname = "Anonymous"] = ["Julius"]
console.log(name) // Julius (from array)
console.log(surname) // Anonymous (default used)
对象解构赋值
同样我们在=左侧要有和右侧类似的格式。
let options = {
title: "Menu",
width: 100,
height: 200
}
let {title, width, height} = options
console.log(title) // Menu
console.log(width) // 100
console.log(height) // 200
注:属性的顺序无需一致。
改变获取属性名
对象的属性名: 自定义变量名
let {width: w, height: h, title} = options
注:当我们自定义变量名后,默认的变量名将不可用。
默认值
对应位置没有值时,取默认值。
let options = {
title: "Menu"
}
let {width = 100, height = 200, title} = options
console.log(title) // Menu
console.log(width) // 100
console.log(height) // 200
rest运算符
存储剩余属性,rest为对象。
let options = {
title: "Menu",
height: 200,
width: 100
}
let {title, ...rest} = options
// now title="Menu", rest={height: 200, width: 100}
console.log(rest.height) // 200
console.log(rest.width) // 100
嵌套对象
如果一个Array或者Object比较复杂,嵌套了很多层,那么和之前一样,在=左边与右边的结构一致即可。
let options = {
size: {
width: 100,
height: 200
},
items: ["Cake", "Donut"],
extra: true // something extra that we will not destruct
}
// destructuring assignment on multiple lines for clarity
let {
size: { // put size here
width,
height
},
items: [item1, item2], // assign items here
title = 'Menu' // not present in the object (default value is used)
} = options
console.log(title) // Menu
console.log(width) // 100
console.log(height) // 200
console.log(item1) // Cake
console.log(item2) // Donut
注意:此处的size和items仅为结构,不是变量。若要保存对应的size,可以这样。
let {
size},
items: [item1, item2],
title = 'Menu'
} = options