JavaScript基础之ES6对象解构赋值

sutaking 发布于2019-08-22 15:31 / 1532人阅读

摘要：具体的分析暂时不讨论解决的方式很简单，把上面的代码块变成一段表达式就小明总结解构赋值是提供一个十分方便的表达式。的解构赋值小明的对象赋值这里可以被赋予初始值小明对象的属性不存在能够赋值给多个变量

对象解构赋值

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 能够赋值给多个变量

云服务器 GPU云服务器解构赋值对象解构之基础篇匿名对象赋值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93504.html

ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ES6学习（二）之解构赋值及其原理

摘要：基本原理解构是提供的语法糖，其实内在是针对可迭代对象的接口，通过遍历器按顺序获取对应的值进行赋值。属性值返回一个对象的无参函数，被返回对象符合迭代器协议。迭代器协议定义了标准的方式来产生一个有限或无限序列值。更多系列文章请看 1、基本语法 1.1、数组 // 基础类型解构 let [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1, 2, ...

chunquedong 2019-08-23 16:19 评论0 收藏0
ES6之解构赋值

摘要：解构赋值允许指定默认值内部使用严格相等运算符，判断一个位置是否有值。默认值可以引用解构赋值的其他变量，但该变量必须已经声明。注意，对象的解构赋值可以取到继承的属性。解构赋值使得输入语句非常清晰。数组解构只要等号两边的模式相同，左边的变量就会被赋予对应的值。 let [a, b, c] = [1, 2, 3]; 如果解构不成功，变量的值就等于 undefined。 let [foo,...

Simon 2019-08-26 10:40 评论0 收藏0
带你入门 JavaScript ES6 (一)

摘要：是国际组织于年月日发布的第六版，正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。本文同步带你入门 JavaScript ES6 (一)，转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 评论0 收藏0
javascript基础之模块

摘要：两者对比就像下面这样通过对象把函数向外开放而使用的模块就像下面通过导出方法当然了，的模块肯定是比匿名函数自执行更加高级的一种封装了。相比于匿名函数，模块具有下面几种特点。什么是ES6模块? 在ES6中，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。在看到这里的时候感觉很熟悉，这不就是匿名函数自执行，然后一个个匿名函数放在一个个...

keithyau 2019-08-22 15:43 评论0 收藏0