你该晓得的ES6那些事儿

2023年1月23日 217次阅读 来源: moddx

近来重构了一个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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞