你该知道的ES6那些事儿

最近重构了一个SPA项目，引入了部分ES6用法，最大的感受是ES6让javascript这门语言变得更加严谨，更加方便。本篇将结合实战经验，对最常用的部分ES6语法进行说明，并对比ES6之前的做法，谈谈使用ES6的好处。

模板字面量

在es6之前，在js中拼接字符串，可以这样：

let name = 'es6'
let str = 'Hello, ' + name + '.'

而在es6中，可以用使用反引号（`）来包裹普通字符串，如下：

let name = 'es6'
let str = `Hello, ${name}.`

用来拼接变量时还是很方便的。

includes() 方法

在数组和字符串中，经常会遇到这样一个问题：判断该数组或字符串中是否存在某个值。
在ES6之前，可以这样做：

let str = 'abcdef'
console.log(str.indexOf('b') > -1)

这当然没有问题，但是语义上显得不够直观，indexOf()方法是获得指定值的索引位置。通过该方法获得位置后还得比较一次才能判断是否存在。
我们再来看看ES6的作法：

let str = 'abcdef'
console.log(str.includes('b'))

显得更加清晰明了。但是，如果判断某个值是否在数组或字符串中存在，那么includes方法是非常方便的，但如果要获得某个值的索引位置，还是indexOf方法更合适。includes方法并不是indexOf方法的替代。
注意：和indexOf()一样，includes()在数组和字符串中都可以使用。

扩展运算符

求最值

求最值是很常见的一个操作，我们先看看在ES6之前是怎么做的：

let arr = [25, 50, 999, 100]
console.log(Math.max.apply(Math, arr))

该方法是可行的，但使用 apply() 让人觉得有一丝困惑，这里使用的额外语法混淆了代码的真实意图。
再看看ES6的写法：

// Math.max() 不允许传入数组
// 所以我们用扩展运算符把数组中的值展开成多个独立的值，再传入
console.log(Math.max(...arr))

这样的代码是不是看起来清晰多了？并且扩展运算符还可以与其他参数混用，比如：

console.log(Math.max(...arr, 1000, 888))

数组去重

这是一个很高频的面试问题，ES6之前，可以这样：

function unique(arr) {
  let temp = []
  for (let i = 0; i < arr.length; i++) {
    if (temp.includes(arr[i]) === false) {
      temp.push(arr[i])
    }
  }
  return temp
}

let numbers = [2, 2, 3, 6, 2, 3, 5]
console.log(unique(numbers))

当然数组去重有多种写法，我这里只列举一个，供大家参考。
再来看看es6的写法：

let arr = [2, 2, 3, 6, 2, 3, 5]
arr = [...new Set(arr)]
console.log(arr)

使用数组来初始化一个Set，Set构造器能确保不重复地使用这些值。很明显，es6的写法更简洁明了。

Vuex中的使用

export default {
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
    ])
  }
}

用过vuex的应该熟悉这样一段代码，这里运用扩展运算符配合mapGetters 辅助函数，会将上面代码解析成如下形式：

export default {
  computed: {
    doneTodosCount () {},
    anotherGetter () {}
  }
}

对象的简写

现有一个对象构造函数，其返回一个对象，对象中包含属性和值，在es6之前，写法如下：

function createPerson (name, age) {
  return {
    name: name,
    age: age
  }
}

es6提供了简写方式，当对象的一个属性名称与本地变量名相同时，你可以简单书写名称而省略冒号与值。可以这样：

function createPerson (name, age) {
  return {
    name,
    age
  }
}

这个特性在vue单文件组件中会常常遇到，比如：

components: {
  otherComponent
}

方法的简写

现有一个对象，对象中有一个方法，在es6之前，方法可以这样写：

var person = {
  name: 'foo',
  sayName: function () {
    console.log(this.name)
  }
}

es6提供了简写方法的写法，通过省略冒号与function关键字，你可以这样：

var person = {
  name: 'foo',
  sayName () {
    console.log(this.name)
  }
}

延伸阅读

本文只列出了部分es6语法，对于有些特性，如promise，箭头函数，await等，在我的项目中也会频繁使用，但网上有很好的文章，就不细说了。下面提供链接，供有兴趣的朋友参考。
大白话讲解Promise
ECMAScript 6 入门
理解 JavaScript 的 async/await

参考资料

ECMAScript 6 入门
Understanding ECMAScript 6

小结

ES6让js这门语言变得更加精细，更加强大。虽然不是非得掌握es6才能编程，但是掌握部分特性能提高开发效率。何乐而不为呢？这些都是我在项目中的使用心得，本文就当抛砖了。