ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
# 1. 数组的解构
只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值
let a = 1; //以前,为变量赋值,只能直接指定值
let b = 2;
let c = 3;
// ES6等价写法 可以从数组中提取值,按照对应位置,对变量赋值
let [a, b, c] = [1, 2, 3];
# 一个小例子
cosnt F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao); // 小沈阳
console.log(liu); // 刘能
console.log(zhao); // 赵四
console.log(song); // 宋小宝
# 使用嵌套数组进行解构
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined // 如果解构不成功,变量的值就等于undefined
z // []
# 不完全解构
等号左边的模式,只匹配一部分的等号右边的数组
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
# 2. 对象的解构
有一个对象
let person = {
name: 'YK',
age: 18
};
不使用对象解构需要这样
let personName = person.name;
let personAge = person.age;
console.log(personName, personAge); // YK 18
使用完整的对象解构
let {name: personName, age:personAge} = person;
console.log(personName, personAge); // YK 18
使用简写的对象解构
let {name, age} = person;
console.log(name, age); // YK 18
变量必须与属性同名,才能取到正确的值
两种情况
// 1. 不匹配的情况
let {name, job} = person;
console.log(name, job); // YK undefined
// 2. 赋默认值
let {name, job='student'} = person;
console.log(name, job); // YK student
一个小例子
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function(){
console.log("我可以演小品");
}
};
let {name, age, xiaopin} = zhao;
console.log(name); // 赵本山
console.log(age); // 不详
console.log(xiaopin); // f(){console.log("我可以演小品");}
xiaopin(); // 我可以演小品
# 3. 解构的用途
# 1. 交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
# 2. 从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
# 3. 函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
# 4. 解构内部
- 解构在内部使用函数
ToObject()
把源数据解构转换成对象 - 原始值会被当成对象,而
null
与undefined
不能解构
# 5. 几个注意点
- 嵌套解构——浅赋值
- 部分解构——无“回滚”
# 参考资料
- 尚硅谷ES6教程 (opens new window) https://www.bilibili.com/video/BV1uK411H7on?p=6
- 阮一峰ES6教程 (opens new window) https://es6.ruanyifeng.com/#docs/destructuring
- JavaScript高级程序设计(第四版) (opens new window)P216 -220 https://www.ituring.com.cn/book/2472