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

    原文作者:moddx
    原文地址: https://segmentfault.com/a/1190000015634369
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞