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

以后的 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 中，从数组和对象中提取值，对变量进行赋值。

关于解构推荐：汇总JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

那么解构有什么用处呢？

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

// ES5

var foo = 1

var bar = 2

var baz = 3

// ES6

let [foo, bar, baz] = [1, 2, 3]

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

let x = 1

let y = 2

;[x, y] = [y, x]

// x = 2, y = 1

对象解构

var obj = { x: 1, y: 2, c: 1 }

let { x, y } = obj

// x = 1

// y = 2

字符串解构

const [a, b, c, d, e] =  hello

// a => h

// b => e

// c => l

// d => l

// e => o

函数参数解构

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

// 普通字符串拼接

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-rdNGNc4E-1710586760294)]
[外链图片转存中…(img-iDtuW4A4-1710586760295)]
[外链图片转存中…(img-Yfu4Hwwe-1710586760295)]
[外链图片转存中…(img-7B2RwaVC-1710586760296)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-7J3dZSUA-1710586760296)]

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-DSIgei5k-1710586760297)]