1、展开操作符
顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。
演示一下**：**
1`let firstHalf = [ one , two ];` 2 3 4 5`let secondHalf = [ three , four , ...firstHalf];` 6
这种写法够优雅，够简洁吧？如果不用展开操作符
我们得这么写：
1`let firstHalf = [ one , two ];` 2 3 4 5`let secondHalf = [ three , four ];` 6 7 8 9`for(var i=0, i <firstHalf.length; i++ ) {` 10 11 12 13` secondHalf.push(firstHalf[i]);` 14 15 16 17`}` 18
展开操作符也适用于合并对象的属性：
1`const hero = {` 2 3 4 5` name: Xena - Warrior Princess ,` 6 7 8 9` realName: Lucy Lawless` 10 11 12 13`}` 14 15 16 17`const heroWithSword = {` 18 19 20 21` ...hero,` 22 23 24 25` weapon: sword` 26 27 28 29`}` 30
不用展开操作符的话，需要遍历对象的属性：
1`let keys = Object.keys(hero);` 2 3 4 5`let obj = {};` 6 7 8 9 10 11 12 13`for(var i=0; i< keys.length; i++) {` 14 15 16 17` obj[keys[i]] = keys[props[i]];` 18 19 20 21`}` 22
2、剩余参数
剩余参数将剩余的参数收入数列。 JavaScript 的特性是参数数目很灵活。通常会有一个 arguments 变量收集参数。
让我们看一个例子：
1`function add(first, second, ...remaining) {` 2 3 4 5` return first + second;` 6 7 8 9`}` 10
上面的一段 代码 仅仅将 first 和 second 加起来，也就是说，调用 add(1, 2) 和 add(1, 2, 3, 4) 会得到相同的结果。
下面我们修正一下：
1`function add(first, second, ...remaining) {` 2 3 4 5` return first + second + remaining.reduce((acc, curr) => acc + curr, 0);` 6 7 8 9`}` 10
如前所述，…remaining 收集了剩余的参数，为我们提供了这些参数的命名，清楚地表明我们打算处理剩余的参数。我记得至迟 ES5 已经有 arguments 了，不过少有人知。
3、字符串插值
见过这样的语句吗？
1`class Product {` 2 3 4 5` constructor(name, description, price) {` 6 7 8 9` this.name = name;` 10 11 12 13` this.description = description;` 14 15 16 17` this.price = price;` 18 19 20 21` }` 22 23 24 25`getDescription() {` 26 27 28 29` return " Full description` 30 31 32 33`" +` 34 35 36 37` " name: " + this.name +` 38 39 40 41` " description: " + this.description` 42 43 44 45` }` 46 47 48 49`}` 50
当然，我指的是 getDescription() 方法中那个可读性不佳的多行长语句。
大多数编程语言中都存在类似现象。一些语言提供了字符串插值，幸运的是， JavaScript 正是其中之一。
我们改写一下 getDescription() 方法：
1`getDescription() {` 2 3 4 5`` return `Full description`` 6 7 8 9`:` 10 11 12 13` name: ${this.name}` 14 15 16 17` description ${this.description}` 18 19 20 21`` `;`` 22 23 24 25`}` 26
一对 包起来的字符串中可以使用 ${} 插值。现在看起来舒服多了。
4、简写属性
在 ES5 中必须这么写：
1`function createCoord(x, y) {` 2 3 4 5` return {` 6 7 8 9` x: x,` 10 11 12 13` y: y` 14 15 16 17` }` 18 19 20 21`}` 22
ES6 以后可以使用简写属性：
1`function createCoord(x, y) {` 2 3 4 5` return {` 6 7 8 9` x,` 10 11 12 13` y` 14 15 16 17` }` 18 19 20 21`}` 22
看起来更清爽了吧？
5、方法属性
方法属性是在对象中定义指向方法的属性。
考虑下面一段 ES5 代码 作为例子：
1`const math = {` 2 3 4 5` add: function(a,b) { return a + b; },` 6 7 8 9` sub: function(a,b) { return a - b; },` 10 11 12 13` multiply: function(a,b) { return a * b; }` 14 15 16 17`}` 18
ES6 以后只需这么写：
1`const math = {` 2 3 4 5` add(a,b) { return a + b; },` 6 7 8 9` sub(a,b) { return a - b; },` 10 11 12 13` multiply(a,b) { return a * b; }` 14 15 16 17`}` 18
6、解构赋值
解构赋值有利于开发者本人的心理健康。
考虑下面的 代码 ：
1`function handle(req, res) {` 2 3 4 5` const name = req.body.name;` 6 7 8 9` const description = req.body.description;` 10 11 12 13` const url = req.url;` 14 15 16 17 18 19 20 21` log( url endpoint , url);` 22 23 24 25 26 27 28 29` // 大量代码逻辑` 30 31 32 33` dbService.createPerson(name, description)` 34 35 36 37`}` 38
不管从什么角度来看，上面的 代码 都不完美，但它确实体现了一种应用场景，我们想要从对象的不同层次获取 数据 。你也许会问，这里有什么问题？好吧，我可以不用声明这么多变量，省下一些敲击键盘的次数。
1`function handle(req, res) {` 2 3 4 5` const { body: { name, description }, url } = req;` 6 7 8 9 10 11 12 13` log( url endpoint , url);` 14 15 16 17 18 19 20 21` // 大量代码逻辑` 22 23 24 25` dbService.createPerson(name, description)` 26
看，我们上面的 代码 将三行压缩成了一行。
解构赋值并不仅仅局限于对象。它同样适用于数组。
考虑下面的 代码 ：
1`const array = [1,2,3,4,5,6];` 2 3 4 5`const a = array[0];` 6 7 8 9`const c = array[2];` 10
上面的 代码 可以用更优雅的方式改写：
1`const array = [1,2,3,4,5,6];` 2 3 4 5`const [a, ,c, ...remaining] = arr;` 6 7 8 9 10 11 12 13`// remaining = [4,5,6]` 14
我们可以使用上面的模式匹配分解数组的值。我们使用 , , 跳过某些值。上面提到过的剩余参数这里也能用，在这里我们通过剩余参数捕获了剩余的数组成员。
解构赋值还可以用于 函数 和参数。 函数 有不止 2-3 个参数时，使用一个对象收集所有参数是 JavaScript 的事实标准。
例如，下面一个 函数 ：
1`function doSomething(config) {` 2 3 4 5` if(config.a) { ... }` 6 7 8 9` if(config.b) { ... }` 10 11 12 13` if(config.c) { ... }` 14 15 16 17`}` 18
有更好的写法：
1`function doSomething({ a, b, c }) {` 2 3 4 5` if(a) { ... }` 6 7 8 9` if(b) { ... }` 10 11 12 13` if(c) { ... }` 14 15 16 17`}` 18
7、数组方法
ES6 引入了许多有用的数组方法，例如：
-
find()，查找列表中的成员，返回 null 表示没找到
-
findIndex()，查找列表成员的索引
-
some()，检查某个断言是否至少在列表的一个成员上为真
-
includes，列表是否包含某项
下面的 代码 有助于你理解它们的用法：
1`const array = [{ id: 1, checked: true }, { id: 2 }];` 2 3 4 5`arr.find(item => item.id === 2) // { id: 2 }` 6 7 8 9`arr.findIndex(item => item.id === 2) // 1` 10 11 12 13`arr.some(item => item.checked) // true` 14 15 16 17 18 19 20 21`const numberArray = [1,2,3,4];` 22 23 24 25`numberArray.includes(2) // true` 26 27 28 29`Promises + Async/Await` 30
8、异步方案
如果你在这个圈子里呆了些年头，也许会记得曾经有一个时期我们只有回调
就像这样：
1`function doSomething(cb) {` 2 3 4 5` setTimeout(() => {` 6 7 8 9` cb( done )` 10 11 12 13` }, 3000)` 14 15 16 17`}` 18 19 20 21 22 23 24 25`doSomething((arg) => {` 26 27 28 29` console.log( done here , arg);` 30 31 32 33`})` 34
我们使用回调是因为有些操作是异步的，需要时间来完成。后来我们有了 promise 库，人们开始使用它。然后 JavaScript 逐渐加入了对 promise 的原生支持。
1`function doSomething() {` 2 3 4 5` return new Promise((resolve, reject) => {` 6 7 8 9` setTimeout(() => {` 10 11 12 13` resolve( done )` 14 15 16 17` }, 3000)` 18 19 20 21` })` 22 23 24 25`}` 26 27 28 29 30 31 32 33`doSomething().then(arg => {` 34 35 36 37` console.log( done here , arg);` 38 39 40 41`})` 42
我们甚至可以这样调用，将 promise 串起来：
1`getUser()` 2 3 4 5` .then(getOrderByUser)` 6 7 8 9` .then(getOrderItemsByOrder)` 10 11 12 13` .then(orderItems => {` 14 15 16 17` // 处理排序后的成员` 18 19 20 21` })` 22
后来生活更加美好，我们有了 async/await
上面一段代码可以这样写：
1`async function getItems() {` 2 3 4 5` try {` 6 7 8 9` const user = await getUser();` 10 11 12 13` const order = await getOrderByUser(user);` 14 15 16 17` const items = await getOrderItemsByOrder(order);` 18 19 20 21` return items;` 22 23 24 25` } catch(err) {` 26 27 28 29` // 在这里处理错误，建议返回某个值或者重新抛出错误` 30 31 32 33` }` 34 35 36 37`}` 38 39 40 41 42 43 44 45`getItems().then(items => {` 46 47 48 49` // 处理排序后的成员` 50 51 52 53`}` 54
9、模块
差不多任何编程语言都支持模块这一概念，也就是将代码分为多个文件，每个文件是一个自我包含的单元（模块）。
考虑下面的代码：
1`// math.js` 2 3 4 5 6 7 8 9`export function add(a,b) { return a + b; }` 10 11 12 13`export function sub(a,b) { return a - b; }` 14 15 16 17 18 19 20 21`export default mult(a,b) => a * b;` 22 23 24 25 26 27 28 29`// main.js` 30 31 32 33`import mult, { add, sub } from ./math ;` 34 35 36 37 38 39 40 41`mult(2, 4) // 8` 42 43 44 45`add(1,1) // 2` 46 47 48 49`sub(1,2) // -1` 50
我们在上面用 export 关键字注明了 add 和 sub 这两个结构对任何引入该模块的模块都公开可见。
export default 关键字则注明仅仅 import 模块时得到的结构。
在 main. js 中，我们将导入的 default 命名为 mult，同时指明我们引入 add() 和 sub() 这两个方法。箭头 函数 和字典作用域 this。
本文分享自微信公众号 - web前端开发（web_qdkf）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。