黑马程序员技术交流社区

标题: 【深圳校区】JavaScript ES6中的简写使用技巧与语法总结 [打印本页]

作者: 卡哇伊伊 时间: 2019-3-8 09:54
标题: 【深圳校区】JavaScript ES6中的简写使用技巧与语法总结
本帖最后由卡哇伊伊于 2019-3-9 17:28 编辑

ES6为一些已有的功能提供了非破坏性更新，这类更新中的大部分我们可以理解为语法糖，称之为语法糖，意味着，这类新语法能做的事情其实用ES5也可以做，只是会稍微复杂一些。本章我们将着重讨论这些语法糖，看完之后，可能你会对一些你很熟悉的ES6新语法有不一样的理解。

JavaScript ES6对象字面量

对象字面量是指以{}形式直接表示的对象，比如下面这样：

[AppleScript] 纯文本查看 复制代码

var book = {

 title: 'Modular ES6',

 author: 'Nicolas',

 publisher: 'O´Reilly'

}

ES6 为对象字面量的语法带来了一些改进：包括属性/方法的简洁表示，可计算的属性名等等，我们逐一来看：

JavaScript ES6中属性的简洁表示法

你有没有遇到过这种场景，一个我们声明的对象中包含若干属性，其属性值由变量表示，且变量名和属性名一样的。比如下面这样，我们想把一个名为 listeners 的数组赋值给events对象中的listeners属性，用ES5我们会这样做：

[AppleScript] 纯文本查看 复制代码

var listeners = []

function listen() {}

var events = {

 listeners: listeners,

 listen: listen

}

ES6则允许我们简写成下面这种形式：

[AppleScript] 纯文本查看 复制代码

var listeners = []

function listen() {}

var events = { listeners, listen }

怎么样，是不是感觉简洁了许多，使用对象字面量的简洁写法让我们在不影响语义的情况下减少了重复代码。
这是ES6带来的好处之一，它提供了众多更简洁，语义更清晰的语法，让我们的代码的可读性，可维护性大大提升。

可计算的属性名

对象字面量的另一个重要更新是允许你使用可计算的属性名，在ES5中我们也可以给对象添加属性名为变量的属性，一般说来，我们要按下面方法这样做，首先声明一个名为expertise的变量，然后通过person[expertise]这种形式把变量添加为对象person的属性：

[AppleScript] 纯文本查看 复制代码

var expertise = 'journalism'

var person = {

 name: 'Sharon',

 age: 27

}

person[expertise] = {

 years: 5,

 interests: ['international', 'politics', 'internet']

}//

1543929514400.png (69.59 KB, 下载次数: 10)

1543935559393.png (55.66 KB, 下载次数: 10)

1543935658203.png (21.13 KB, 下载次数: 18)

1543937721025.png (55.2 KB, 下载次数: 13)

1543938069597.png (46.28 KB, 下载次数: 14)

1543938502713.png (30.83 KB, 下载次数: 11)

1543938526187.png (7.39 KB, 下载次数: 3)

1543940376605.png (71.41 KB, 下载次数: 0)

1543940747085.png (46.14 KB, 下载次数: 3)

1543940767450.png (82.02 KB, 下载次数: 18)

1543940886767.png (8.52 KB, 下载次数: 1)

1543941104340.png (66.59 KB, 下载次数: 5)

1543942013579.png (70.81 KB, 下载次数: 12)

1543942148593.png (38.61 KB, 下载次数: 4)

bubble.gif (81.61 KB, 下载次数: 4)

final.gif (146.25 KB, 下载次数: 9)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2