前言
ES6（ECMAScript6）是于2015年6月正式发布的 JavaScript 语言的标准，而不是你现在在搜索引擎中搜出来的蔚来 ES6 汽车型号。相信对于所有前端开发者来说已经很熟悉了，ES6 的内容非常多，本文就不一一介绍了。我将主要介绍一些在前端开发中使用到的 ES6 初级语法，本文针对初级前端开发，大佬们可以略过。如果发现文中有不准确的地方欢迎各位指出，同时也欢迎在评论区探讨。那话不多说，我们开始。
let 和 const 命令
let 和 const 大家用的已经很多了，毕竟现在很少看到还有人使用 var 去定义变量。let 和 const 的块级作用域、不存在变量提升、不允许重复声明等特点这里就略过了。下面先来两个思考题，看看两个 for 循环会以怎样的时间间隔在控制到打印出什么值。
还有一个暂时性死区的概念，暂时性死区是指在代码块内如果存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域，不可以在声明之前使用这些变量。
需要注意的是，const 命令声明的复合类型数据（数组和对象）本质上是变量指向的内存地址不能改变，这个指针指向的数据结构是可以改变的。所以我们在声明变量时能用 const 的就一定不使用 let。
解构赋值
解构赋值的使用场景非常多，字符串、数组、对象以及函数的参数都可以进行解构。这里就不过多赘述解构的语法了，下面将直接列举一些案例，文中出现的扩展运算符（...），其实就是取出参数对象中的所有可遍历属性，拷贝到当前对象之中。
数组的解构赋值
数组的结构赋值很简单，你只要在使用时注意一些细节就行。
对象的解构赋值
需要注意的是，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者。
所以当服务端接口返回的字段名不是我们前端想要的，傲娇的你又不想改自己的代码（或者本身这个字段名你已经在很多地方使用了），那么这个时候就可以使用别名来解构。最后你会看到下图中我们尝试打印 node 也报错了，这也符合对象解构赋值的机制。
函数参数的解构赋值
函数参数的解构无非就是把数组或者对象当作函数的参数传入，然后就是跟数组和对象一样是机制进行解构，下面以传入对象为例，同样也可以使用默认值，重命名。
字符串的扩展
ES6 中字符串还是新增了很多 API ，比如 includes()， startsWith()， endsWith()，repeat()， padStart()，padEnd() 等，我觉得使用频率都不是很高，你只要知道就行，如果有不清楚的可以自行查阅。那这里我就重点介绍一下模版字符串了。
模版字符串
模板字符串(template string)是增强版的字符串，用反引号(`)标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入JavaScript 表达式。
模板字符串中的换行和空格都是会被保留的。
数组的扩展
ES6 中新增了一些数组的 API ，有些使用频率也是非常高的。
find()和findIndex()
find() 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
findIndex( ) 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
两个方法其实几乎一样，区别在于 find() 返回的是符合条件的元素，如果没有符合条件的元素，则返回undefined。而 findIndex( ) 返回的是符合条件的元素索引，如果没有符合条件的元素，则返回 -1。这两个方法被前端经常用来判断一组数据中是否有符合条件的值，要注意与数组的 indexOf() 和 some() 方法的区别。
find() 和 findIndex( ) 方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组，这里就不介绍了。这两个方法都可以接受第二个参数，用来绑定回调函数 this 对象。另外，这两个方法都可以发现 NaN ，弥补了数组的 indexOf 方法的不足。上面我提到了 some() 方法，其实如果想要判断数组是否包含某个指定的值 ES6 提出了 includes() 方法，这将更加简洁明了。
所以当你发现很多数组的方法都能实现你的某一个需求，但是怎么快速的敲出最好的那个 API ，这就要我们对每个 API 都足够了解，平时多总结，毕竟让自己的代码变得优雅是每位程序员的追求。
includes()
该方法返回一个布尔值，表示某个数组是否包含给定的值。方法支持两个参数，第一个参数表示搜索的值；第二个参表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
数组的扩展其实还有其他的内容，我这里就不介绍了，你可以自己查阅教程。
对象的扩展
属性简写和属性名表达式
ES6 中对象的属性简写和属性名表达式大家应该都知道。在上面讲到的对象解构赋值其实就是一个属性简写。
在开发中一定要注意简写的地方，当你在使用某些组件的 API 或者改别人代码时，要知道哪里他是使用了简写，如果你的变量名有改变就一定要改过来，不然当你看到控制台的报错你就匪夷所思了，这代码为什么之前可以跑？现在为什么又跑不了？
assign()
ES6新增了一个操作 Object.assign() ， 下面列举三个常见用途。
函数的扩展
函数参数的默认值
ES6 可以直接在参数上设置默认值，这比 ES5 只能在函数内为参数设置默认值友好得多。具体用法我们其实在上面讲 函数参数的解构赋值时已经有介绍了。这里就拿官方的例子列举一下。
箭头函数
箭头函数因其写法而得名，我们可以用 '=>'去定义函数。
当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。同样这里的 return 简写你也要注意，当你函数的代码块不止一行时，你就该补上 return 了。
官方给出了几个使用箭头函数的注意点：
(1)函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
(2)不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
(3)不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
(4)不可以使用yield命令，因此箭头函数不能用作Generator函数。
箭头函数中this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数根本没有自己的 this ，导致内部的 this 就是外层代码块的 this 。正是因为它没有 this ，所以也就不能用作构造函数。
Set 和 Map 数据解构
Set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。它的一些 API 我就直接通过下面的例子说明了
Map
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。Map 对象在日常的开发中使用的也是非常多，因为 Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构， Map 比 Object 更合适。
有使用过乐高、低代码平台的同学知道，在低代码项目的开发中我们会经常处理复杂的数据，Map 对象基本是必不可少。下面举个简单的例子：
这样我们就将对象中的某个字段值和这个对象本身给联系起来了，方便我们快速去匹配。
最后
那么关于 ES6 的基...基...基础就先到这里了，前面的内容也不是很全面，包括 ES6 的 Class 类、模块、Promise对象、Generator函数以及 async 函数等这里就先不介绍了。一方面是我的水平还不足以和大家分享这方面知识，另一方面也是因为每个知识点的内容都很多，适合做专题分享。这里贴两个 ES6 教程的链接：
https://es6.ruanyifeng.com/ 阮一峰《ECMAScript 6 教程》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。
https://www.runoob.com/w3cnote/es6-tutorial.html ES6教程 ｜ 菜鸟教程
当然你要是想要阮一峰老师的《ECMAScript 6 教程》第三版的pdf版电子书，你可以直接钉钉私信我（月杋） 。
