你该知道的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才能编程，可是掌握部分特性能提升开发效率。何乐而不为呢？这些都是我在项目中的使用心得，本文就当抛砖了。