你该知道的ES6那些事儿

CoffeX 发布于2019-08-22 18:42 / 3454人阅读

摘要：最近重构了一个项目，引入了部分用法，最大的感受是让这门语言变得更加严谨，更加方便。通过该方法获得位置后还得比较一次才能判断是否存在。再来看看的写法使用数组来初始化一个，构造器能确保不重复地使用这些值。下面提供链接，供有兴趣的朋友参考。

最近重构了一个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才能编程，但是掌握部分特性能提高开发效率。何乐而不为呢？这些都是我在项目中的使用心得，本文就当抛砖了。

云服务器 GPU云服务器回事儿你不知道的你不知道的javascript 知道别人的ip怎么攻击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96114.html

2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

JeOam 2019-08-02 14:28 评论0 收藏0
2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

QLQ 2019-08-26 13:33 评论0 收藏0
【回顾九月份第二周】前端你该知道的事儿

摘要：顺便一说，这首歌的原唱是秋田，中岛当年嗓子坏了，才有这歌。中文是直接翻译来的，作曲是秋田。一部电影春夏秋冬又一春春夏秋冬又一春是由金基德执导，金英民吴英秀金基德主演的一部韩国电影。年月日于韩国上映。原链接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

sixgo 2019-08-21 16:50 评论0 收藏0
【回顾九月份第二周】前端你该知道的事儿

摘要：顺便一说，这首歌的原唱是秋田，中岛当年嗓子坏了，才有这歌。中文是直接翻译来的，作曲是秋田。一部电影春夏秋冬又一春春夏秋冬又一春是由金基德执导，金英民吴英秀金基德主演的一部韩国电影。年月日于韩国上映。原链接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

levius 2019-08-30 15:53 评论0 收藏0