对象解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 --- 阮一峰《ECMAScript 6 入门》
具体的对象解构赋值的规则可以参考 对象的解构赋值, 说的很详细。
作为一个前端程序员,对于ES6这个新的语法表达式,肯定是需要熟练使用的,下面是我个人的一些理解。给大家分享一下。
在ES6没有出现以前,我们是这样把对象中的值赋给变量的。
// 第一版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name;
var age = obj.age;
var sex = obj.sex;
var phone = obj.phone // phone => undefined
然后有人说这里,var被使用多次, 不好。 于是修改为下面这样?
// 第二版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name,
age = obj.age,
sex = obj.sex,
phone = obj.phone;
有人说,obj这个对象被多次调用,不好...... 于是ES6来了。被修改为下面这样?
// 第三版
let obj = {name: '小明', age: 12, sex: '男'};
let {name, age, sex, phone} = obj
暂时没有人说不好了。
当我们想把对象中的属性值赋给变量的时候。一般需要考虑两个因素。分别是属性值、变量。而属性是通过属性名决定的,变量是通过变量名决定的。所以,最后决定因素就是属性名,变量名。当我们能够确定属性名和变量名的时候,它们对应的属性值和变量值之间的赋值关系也就确定了。
所以在ES6的解构赋值中,大致可以分为两种情形。属性名与被赋值的变量名一致与不一致
1. 属性名与变量名不一致
当属性名称与变量名称不一致的,需要显式的指定属性名。这样才能把属性值给赋值到变量中。
例如:
let user = {name: '小明', age: 12};
let {name: userName, age: userAge} = user;
console.log(userName); // '小明'
console.log(userAge); // 12
2. 属性名与变量名一致
当属性名称与变量名称一致的,就只需要显示的指定变量名。
let user = {name: '小明', age: 12};
let {name, age} = user;
console.log(name);
console.log(age);
这里的语法结构跟前面也不一样,把变量名和属性名合并在一起。
当然了,上面是常见的赋值情况,还有一些其他条件下也是需要考虑的。
其他关注点
1. 属性不存在,但是依然赋给变量
当要给变量赋值的属性不存在,会给变量提供一个默认值undefined
let user = {name: '小明', age: 12};
let { address: userAddress} = user;
console.log(userAddress); //userAddress的就是undefined
2. 变量赋予默认值
当要给变量赋值的属性不存在的时候,变量是能够被赋予默认值
// 属性不存在
let user = {name: '小明', age: 12};
let {address: userAddress = '上海'} = user;
console.log(userAddress); // 由于user中不存在address属性,所以userAddress的值是默认值 `上海`
// 属性存在
let user = {name: '小明', age: 12};
let {name: userName = '小天'} = user;
console.log(userName); // userName => '小明'
// 因为属性存在,变量无法获取默认值
3. 同一个属性赋给多个变量
对象中的一个属性值是可以同时赋予给多个变量。
let user = {name: '小明', age: 12};
let { name: userName, name: user1Name} = user;
console.log(userName); // '小明'
console.log(user1Name); // '小明'
4. 嵌套赋值
解构赋值是可以嵌套,而且是从对象最外层开始查找
let user = {name: '小明', age: 12, course: {name: '数学', score: 90}};
let {course} = user;
console.log(course); // {name: "数学", score: 90}
let {course: { score }} = user
console.log(score) // 90
5. let 是否必要
前面的例子中,都是是let {xxx} = {xxx} 的形式。于是就会觉得使用解构赋值就一定需要使用let、const、var。 其实不是的。let {xxx} = {xxx} 这只是其中的一种方, 声明完变量后就对其进行赋值。 解构赋值是对变量的赋值,只要是变量都是可以进行赋值的。
例如:
let name;
let user = {name: '小明', age: 12};
{name} = user;
// Uncaught SyntaxError: Unexpected token =
// 程序报错了,还是需要使用let ?。
// 这里程序报的错误是SyntaxError(语法错误),在程序预编译的时候发生的。具体的分析暂时不讨论
解决的方式很简单,把上面的代码块变成一段表达式就OK
let name;
let user = {name: '小明', age: 12};
({name} = user);
console.log(name)
总结
解构赋值是ES6提供一个十分方便的表达式。 在开始的时候,上面那么多的规则,很难记住。于是为了理解。我把ES6代码转变成下面这种方式,于是很快就明白了。
// ES6 的解构赋值
let user = {name: '小明', age: 12};
let {name: userName} = user;
// ES5 的对象赋值
let userName; (这里可以被赋予初始值)
let user = {name: '小明', age: 12};
if (user.name !== undefined) { // 对象的属性不存在
userName = user.name // user.name 能够赋值给多个变量