90% 前端都会的 ES6 简化代码技巧，你用过哪些？

缺乏、安全感 2022-10-07 11:55 142阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

> **来自：掘金，作者：雪月**
> 
> **链接：https://juejin.cn/post/6960868793140641799**

## 前言 (介绍 ECMAScript)    ##

最初 `JavaScript` 语言有 2 份标准：

`ECMA-262`：主标准，由 ECMA 国际组织（`Ecma International`）负责管理（为了让最初的`JavaScript` 与最初的 `JScript` 能遵循同一套标准发展而诞生的 `ECMAScript` ，正好排到了作为 `Ecma` 的 `262` 号标准，所以得到 `ECMA-262` 编号。）

`ISO/IEC 16262`：第二标准，由国际标准化组织 `ISO`（`International Standard Organization`）和国际电子技术委员会 `IEC`（`International Electrotechnical Commission`）负责管理

出于商标版权的原因，规范标准中将这门语言称为 `ECMAScript` ，所以原则上 `JavaScript` 与`ECMAScript` 指的是同一个东西，但有时也会加以区分：

*  `JavaScript`：指语言及其实现
 *  `ECMAScript`：指语言标准及语言版本，比如 ES6 表示语言（标准）的第 6 版

## ECMAScript 发展历史 ##

*  ECMAScript 1（1997 年 6 月）：规范第一版
 *  ECMAScript 2（1998 年 6 月）：为了同步 ISO 标准，引入了一些小更新
 *  ECMAScript 3（1999 年 12 月）：增加了正则表达式、字符串处理、控制语句（do-while、switch）、异常处理（try-catch）等众多核心特性
 *  ECMAScript 4（2008 年 7 月废除)：本来是一次大规模升级（静态类型、模块、命名空间等），但跨度过大，出现了分歧，最终没能推广使用
 *  ECMAScript 5（2009 年 12 月）：变化不大，加了一些标准库特性和严格模式
 *  ECMAScript-5.1（2011 年 6 月）：又一次小更新，为了同步 ISO 标准
 *  ECMAScript 6（2015 年 6 月）：一大波更新，实现了当年 ES4 的许多设想，并正式改为按年份命名规范版本
 *  ECMAScript 2016（2016 年 6 月）：第一个年度版本，与 ES6 相比，发布周期较短，新特性也相对少些
 *  ECMAScript 2017（2017 年 6 月）：第二个年度版本...

> 以后的 ECMAScript 版本（ES2018、ES2019、ES2020 等）都在 6 月正式获准生效

## 开始 （聚焦 ES6） ##

这里引用 `阮一峰` 老师的 `ES6标准入门` 一书中的总结：ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版本以后的 `JavaScript` 的下一代标准，涵盖了 `ES2015、ES2016、ES2017`等，而 `ES2015` 则是正式名称，特指当年发布的正式版本的语言标准 市面上提到的 ES6 一般是指 `ES2015` 标准，但有时也是泛指 `下一代 JavaScript`

**本文主要讲解以下内容:**

*  块级作用域（Block scoping，ES2015）
 *  解构（Destructuring，ES2015）
 *  箭头函数（Arrow Functions，ES2015）
 *  模板字符串（template string，ES2015）
 *  剩余参数 / 展开语法（Rest and spread parameters，ES2015）
 *  对象字面量简写语法（Object shorthand，ES2015）
 *  数组实例的 includes() （ES2016）
 *  Async/await 异步语法 (ES2017)

### 块级作用域 ###

为什么需要块级作用域?

ES5 只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。

*  第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date()
    function fn() {
      console.log(tmp)
      if (false) {
        var tmp =  hello world 
      }
    }
    fn() // undefined
    复制代码

以上代码的原意是， if 代码块的外部使用外层的 tmp 变量，内部使用内层的 tmp 变量。但是，函数 `fn` 执行后，输出结果为 `undefined` ，原因在于变量提升导致内层的 tmp 变量覆盖了外层的 tmp 变量。

*  第二种场景，用来计数的循环变量泄露为全局变量。

var s =  hello 
    for (var i = O; i < s.length; i++) {
      console.log(s[i])
    }
    console.log(i) // 5
    复制代码

上面的代码中，变量 `i` 只用来控制循环，但是循环结束后，它并没有消失，而是泄露成了全局变量。

`let` 实际上为 `JavaScript` 新增了块级作用域。

function fl() {
      let n = 5
      if (true) {
        let n = 10
      }
      console.log(n) // 5
    }
    复制代码

上面的函数有两个代码块，都声明了变量 `n`，运行后输出 `5` 。这表示外层代码块不受内层代码块的影响。如果使用 `var` 定义变量 ，最后输出的值就是 `10`

那么我们能利用`块级作用域`做什么呢？

我们先来做道面试题

for (var i = 0; i < 5; i++) {
      setTimeout(() => {
        console.log(i)
      }, 1000)
    }
    // 5 5 5 5 5
    复制代码

改成 `ES6` 中的 let

for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        console.log(i)
      }, 1000)
    }
    // 0 1 2 3 4
    复制代码

看到这，相信聪明的你已经理解块级作用域的好处了 O(∩\_∩)O

那么 `ES5` 能不能实现 `块级作用域` 的效果呢? 可以的，我们可以利用闭包

for (var i = 0; i < 5; i++) {
      ;(function (index) {
        setTimeout(() => {
          console.log(index)
        }, 1000)
      })(i)
    }
    // 0 1 2 3 4
    复制代码

### 解构 ###

> 解构 ：是将一个数据结构分解为更小的部分的过程。ES6 中，从数组和对象中提取值，对变量进行赋值。

那么解构有什么用处呢？

1.      可以大大的简化变量声明操作。

// ES5
    var foo = 1
    var bar = 2
    var baz = 3
    
    // ES6
    let [foo, bar, baz] = [1, 2, 3]
    复制代码

1.      变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的 x。

let x = 1
    let y = 2
    ;[x, y] = [y, x]
    // x = 2, y = 1
    复制代码

1.      对象解构

var obj = { x: 1, y: 2, c: 1 }
    let { x, y } = obj
    // x = 1
    // y = 2
    复制代码

1.      字符串解构

const [a, b, c, d, e] =  hello 
    // a => h
    // b => e
    // c => l
    // d => l
    // e => o
    复制代码

1.      函数参数解构

const xueyue = {
      name:  雪月 ,
      age: 18,
    }
    
    function getAge({ name, age }) {
      return `${name}今年${age}岁`
    }
    
    getAge(xueyue) // 雪月今年18岁
    复制代码

### 箭头函数 ###

`ES6` 允许使用箭头 `=>` 定义函数

var f = v => v
    
    // 等同于 ES5 的
    var f = function (v) {
      return v
    }
    复制代码

如果箭头函数不需要参数或需要多个参数，就使用圆括号代表参数部分。

var f = () => 5
    // 等同于 ES5 的
    var f = function () {
      return 5
    }
    
    var sum = (numl, num2) => numl + num2
    // 等同于 ES5 的
    var sum = function (numl, num2) {
      return numl + num2
    }
    复制代码

箭头函数可以与解构结合使用。

const full = ({ first , last }) => first +     + last;
    // 等同于 ES5 的
    function full(person) {
      return person.first +     + person.last;
    }
    复制代码

箭头函数使得表达更加简洁

const isEven = n => n % 2 === 0
    const square = n => n * n
    
    var result = values.sort((a, b) => a - b)
    // 等同于 ES5 的
    var result = values.sort(function (a, b) {
      return a - b
    })
    复制代码

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。

**箭头函数使用注意点**

1.  函数体内的 `this` 对象，就是定义时所在的对象，而不是使用时所在的对象。
2.  不可以当作构造函数，也就是说，不可以使用 `new` 命令，否则会抛出一个错误。
3.  不可以使用 `arguments` 对象，该对象在函数体内不存在。如果要用，可以用 `rest` 参数代替。
4.  不可以使用 `yield` 命令，因此箭头函数不能用作 `Generator` 函数。

上面四点中，第一点尤其值得注意。`this` 对象的指向是可变的，但是在箭头函数中，它是固定的。

// ES6
    function foo() {
      setTimeout(() => {
        console.log( id: , this.id)
      }, 100)
    }
    
    // 转换成ES5
    function foo() {
      var _this = this
    
      setTimeout(function () {
        console.log( id: , _this.id)
      }, 100)
    }
    复制代码

上面代码中，转换后的 `ES5` 版本清楚地说明了，箭头函数里面根本没有自己的 `this`，而是引用外层的 `this`。

### 模板字符串 ###

> 模板字符串（ template string ）是增强版的字符串 ，用反引号 ```(``)``` 标识 。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

const { log } = console
    const name =  雪月 
    const age = 18
    
    // 普通字符串拼接
    const result = name +  今年  + age +  岁 
    // 使用模板字符串
    const result2 = `${name}今年${age}岁`
    log(result) // 雪月今年18岁
    log(result2) // 雪月今年18岁
    
    // ${} 大括号可以放入任意的 JavaScript 表达式，可以进行运算
    const result3 = `${name}今年${age * 2}岁`
    log(result3) // 雪月今年36岁
    复制代码

### 剩余参数 / 展开语法 ###

ES6 引入了 rest 参数（形式为`...变量名`），用于获取函数的多余参数，这样就不需要使用 `arguments` 对象了。`rest` 参数搭配的变量是一个数组，该变量将多余的参数放入其中。

function sortNumbers() {
      return Array.prototype.slice.call(arguments).sort()
    }
    // 使用 rest
    const sortNumbers = (...numbers) => numbers.sort()
    复制代码

比较上面的两种写法可以发现， `rest` 参数的写法更自然也更简洁。

扩展运算符（ `spread` ）是三个点（...） 如同 `rest` 参数的逆运算 将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3])
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    复制代码

下面是扩展运算符取代 `apply` 方法的一个实际例子 应用 `Math.max` 方法简化求出数组中的最大元素。

// ESS 的写法
    Math.max.apply(null, [14, 3, 77])
    // ES6 的写法
    Math.max(...[14, 3, 77])
    // 等同于
    Math.max(14, 3, 77)
    复制代码

扩展运算符提供了数组合并的新写法。

//  ESS
    ;[1, 2].concat(more)
    // ES6
    ;[1, 2, ...more]
    复制代码

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = { a: 3, b:  bb  }
    let n = { ...z }
    n // { a: 3, b:  bb  }
    n === z // false
    复制代码

**特别注意：** `...`扩展对象，只能做到当对象属性是 `基本数据类型` 才是 `深拷贝`，如果是 `引用数据类型`，那就是`浅拷贝`。

let z = { a: 3, b:  bb , c: { name:  ccc  } }
    let n = { ...z }
    
    n // { a: 3, b:  bb , c: { name:  ccc  } }
    n === z // false
    n.c === z.c // true
    // n.c 跟 z.c 是同一个引用地址
    复制代码

### 对象字面量简写语法 ###

const name =  雪月 
    
    // ES5写法
    const obj = {
      name: name,
      f: function () {
        console.log(this.name)
      },
    }
    
    // ES6简写
    const obj2 = {
      name,
      f() {
        console.log(this.name)
      },
    }
    
    obj.f() // 雪月
    obj2.f() // 雪月
    复制代码

使用 `vue` 的同学是不是感到很熟悉

new Vue({
      el:  #app ,
      data() {
        return {
          list: [],
        }
      },
    })
    复制代码

### 数组实例的 includes() ###

Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。ES2016 引入了该方法。

;[1, 2, 3].includes(2) // true
    ;[1, 2, 3].includes(4) // false
    ;[1, 2, NaN].includes(NaN) // true
    复制代码

没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。

// ES5
    if (arr.indexOf(el) !== -1) {
      // ...
    }
    
    // ES6
    if (arr.includes(el)) {
      // ...
    }
    
    // 那么 indexOf 能不能做到类似于 includes 的写法呢？ 我们可以利用 ~ 位运算符
    if (~arr.indexOf(el)) {
      // ...
    }
    复制代码

`indexOf` 方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对 `NaN` 的误判。

;[NaN].indexOf(NaN)
    // -1
    复制代码

`includes` 使用的是不一样的判断算法，就没有这个问题

;[NaN].includes(NaN)
    // true
    复制代码

### Async/await 异步语法 ###

`ES2017` 标准引入了 `async` 函数，使得异步操作变得更加方便。

`async` 函数是什么？一句话，它就是 `Generator` 函数的语法糖。

async function getTitle(url) {
      let response = await fetch(url)
      let html = await response.text()
      return html.match(/<title>([sS]+)</title>/i)[1]
    }
    
    getTitle( https://tc39.github.io/ecma262/ ).then((res) => console.log(res))
    复制代码

上面代码中，函数 `getTitle` 内部有三个操作：`抓取网页`、`取出文本`、`匹配页面标题`。只有这三个操作全部完成，才会执行 `then` 方法里面的 `console.log`

## 结束（意犹未尽） ##

文章介绍了 `ES6` 常用的一些语法以及使用场景; 但是 `ES6` 内容远不止于此，感兴趣的同学可以去 `阮一峰老师的` ES6 入门教程 一书中查看详细内容。如果您认可这本书，也可以去正版渠道购买书籍。这样可以使出版社不因出版开源书籍而亏钱，进而鼓励更多的作者开源自己的书籍。

## 后记（列举API） ##

还有很多 `ES6` 实用的 `API` 我就简单提及一下，朋友们看看平时是否有用到

;[1, 4, -5, 10].find(n => n < 0)
    // -5
    
    ;[1, 5, 10, 15].findIndex((value, index, arr) => value > 9) 
    // 2
    
    ;[1, 2, [3, [4, 5]]].flat()
    // [1, 2, 3, [4, 5]]
    
    ;[1, 2, [3, [4, 5]]].flat(2)
    // [1, 2, 3, 4, 5]
    
    ;[3, 8, 54, 8, 3, NaN, NaN,  NaN ,  NaN ].filter((number, index, arr) => arr.indexOf(number) === index)
    // [3, 8, 54, "NaN"] 利用filter过滤去重，注意会漏掉NaN
    
    ;[1, 2, 3, 4].map((item) => item * 2)
    // [2, 4, 6, 8] 利用map返回一个新数组，不改变原数组
    
    // 使用 reduce 求和; reduce功能极其强大 ! yyds
    ;[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
      return accumulator + currentValue;
    }); 
    // 10
    
    // ES2017 引入了跟 Object.keys 配套的 Object.values 和 Object.entries，作为遍历一个对象的补充手段，
    // 供 for...of 循环使用。
    let { keys, values, entries } = Object;
    let obj = { a: 1, b: 2, c: 3 };
    
    for (let key of keys(obj)) {
      console.log(key); //  a ,  b ,  c 
    }
    
    for (let value of values(obj)) {
      console.log(value); // 1, 2, 3
    }
    
    for (let [key, value] of entries(obj)) {
      console.log([key, value]); // [ a , 1], [ b , 2], [ c , 3]
    }
    复制代码

内推社群

我组建了一个氛围特别好的腾讯内推社群，如果你对加入腾讯感兴趣的话（后续有计划也可以），我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 winty 好友回复「面试」即可。

![cff146e70e860782ed28b5cbf65c3792.png][]

[cff146e70e860782ed28b5cbf65c3792.png]: /images/20221005/cf826c5801394209b348a0c8363c612c.png