所谓数组解构,就是获取数组中一部分有用的数据,例子:
let arr = ['first', 'second', 'rqz']
let [x, y, z] = arr //解构操作
console.log(x, y) //first second
console.log(z) //rqz
数组解构还可以和split
函数配合使用,优雅又高端:
let [x, y] = 'hello world'.split(' ')
console.log(x) //hello
console.log(y) //world
解构也可以叫做“解构赋值”,其本质就是把数组的元素复制给变量,所以原数组没有发生任何的变化
在使用解构赋值的时候,希望得到数组的第1
、3
个元素,但是不要第2
个元素
let [x, , z] = ['first', 'second', 'third']
console.log(x, z) //first third
解构赋值不一定用在数组上,在任何可迭代对象上都是可以使用的
let [x, y, z] = 'xyz'
let [a, b, c] = new Set(['a', 'b', 'c'])
console.log(x, y, z) //x y z
console.log(a, b, c) //a b c
// 解构赋值会对右侧的值进行迭代,然后对左侧的变量进行赋值
在解构赋值的=
右侧可以是任何和迭代的对象,而左侧则可以是任何可以赋值的变量,并不局限于简单的变量
let country = {};
[country.name, country.desc] = 'China Beautiful'.split(' ')
console.log(country.name, country.desc) //China Beautiful
注意:代码第一行的分号必须要加,否则将遇到错误!
Object.entries(obj)
方法会返回对象obj
的属性列表,可以将解构语法用在这里:
let country = {
name: 'China',
desc: 'a beautiful country'
}
for (let [k, v] of Object.entries(country)) {
console.log(k, v)
}
// name China
// desc a beautiful country
由于Map
对象本身就是可迭代的,所以可以直接使用for...of
语法结合解构语法:
let map = new Map()
map.set('name', 'China')
map.set('desc', 'Beautiful Country')
for (let [k, v] of map) {
console.log(k, v)
}
// name China
// desc a beautiful country
解构赋值有一个著名技巧,交换两个变量的值:
let a = 1;
let b = 2;
[a, b] = [b, a]
console.log(`a=${a},b=${b}`) //a=2,b=1
在执行解构赋值的过程中,存在两种情况:
undefined
填充;...
收集;左侧多于右侧:
let [a, b, c] = 'ab'
console.log(a, b, c) //a b undefined
// 可见最后一个变量c被赋值undefined
也可以为多余的左侧变量赋予默认值
let [a = 0, b = 0, c = 0] = 'ab'
console.log(c) //0
右侧多于左侧:
let [a, b] = 'abcd'
console.log(a, b) //a b
如果需要获得其他元素
let [a, b, ...others] = 'abcdefg'
console.log(others) //[ 'c', 'd', 'e', 'f', 'g' ]
// 这里的变量others就将所有剩余选项全部都收集了起来,others可以是任何合法的变量名,不局限于others本身
解构语法同样使用于对象,只不过语法上稍有不同
let {var1, var2} = {...}
例子:
let country = {
name: 'China',
desc: 'Beautiful'
};
let { name, desc } = country;
console.log(name, desc) //China Beautiful
可以指定变量和属性的映射,例如:
let country = {
name: 'China',
desc: 'Beautiful'
}
//对应的规则:{对象属性:目标变量}
let { name: desc, desc: name } = country;
console.log(`name:${name},desc:${desc}`) //name:Beautiful,desc:China
和数组一样,我们也可以使用=
为变量指定默认值
let obj = {
name: 'xiaoming',
age: 18
}
let { name = 'xiaohong', age = 19, height = 180 } = obj
console.log(height) //180
// 可以使用...将剩余的属性重新打包为一个新对象
let obj = {
x: 'x',
y: 'y',
z: 'z'
}
let { x, ...others } = obj
console.log(others) //{ y: 'y', z: 'z' }
如果对象出现了嵌套,相应的也可以使用对应的嵌套层次进行解析
let People = {
head:{
leftEye:'le',
rightEye:'re'
},
hands:['left-hand','right-hand'],
others:'others'
}
let {
head:{
leftEye,
rightEye
},
hands:[left_hand,right_hand],
others
} = People;
console.log(leftEye,right_hand) //le right-hand