在早期的 Web 项目当中，后端的语言和前端的语言混合在一起，比如在 jsp 和 php 的代码中能看到大篇幅的 HTML 代码。后来逐步的发展到有了“模板语言”，使得后端语言和前端语言进行了部分的分离，虽然前端中调用模板的方法，但是前端还需要后端来进行渲染。到现在，前后端语言完全分离，前端做交互，后端写接口，各司其职。在移动互联网的飞速发展，前端也日益重要，尤其是出现了所谓的“大前端”。
作为一个后端程序员对前端知识不用懂太多，能看懂、或够用就行。为了弥补自己不懂前端的短板，周末对前端进行了简单的了解，就有了这份笔记。
ECMAScript 6
什么是 ES 6 呢，我这里引用了网上给出的说明，引用如下：
JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。这也有利于这门语言的开放和中立。
我这里整理了 ES 6 的几个特性，当然 ES 6 的特性不只有这些，这些是最基本的部分。
一、变量定义
在 ES 6 中增加了 let 关键字用于定义变量，let 的用法与之前的关键字 var 有所不同。
let 关键字有作用域、不能重复声明和不存在变量提升。
这里演示一下作用域、不能重复声明和变量提升。
// 定义变量{ vara=1; letb=2; } console.log(a); console.log(b); // b is not defined
在 { } 中使用 let 定义的变量，在 { } 外进行输出时，提示变量未定义，这是 let 的作用域的特性。
varm=1; varm=2; letn=10; letn=20; // Identifier 'n' has already been declared
当在同一作用域使用 let 定义同一变量时，会提示该标识符已经被定义。
console.log(x) // Cannot access 'x' before initializationletx=100; console.log(y) // undefinedvary=200;
从上面的代码可以看到，在未定义 y 在前面输出 y 时，y 已经存在，由于未赋值，因此输出 undefined，而在 x 前面输出 x 时，则会提示不能在 x 初始化之前访问 x。
二、常量定义
常量的定义使用 const 关键字，常量在定义时必须赋值，且之后值不可以改变。
// 定义常量constPI=3.1415926PI=3// Assignment to constant variable.
当对 const 定义的常量赋值时，会提示“在给常量赋值”。
constMY// Missing initializer in const declaration
当定义常量没有赋值时，会提示“定义常量时没有指定值”。
三、解构赋值
解构赋值时对赋值运算的扩展，来看一下最基本的解构使用方法。
leta=1, b=2, c=3console.log(a, b, c)
之前的赋值需要逐个赋值，对于 ES 6 可以使用新的方法进行赋值，方法如下：
// ES6let [x, y, z] = [1, 2, 3] console.log(x, y, z)
上面的方式为数组模型的解构，除了对数组进行解构外，还可以对对象进行解构，方法如下：
// 对象解构letuser= {name: 'Helen', age: 18} // ES6let {name, age} =user// 解构的变量必须是user中的属性console.log(name, age)
解构的变量需要和 user 中的属性相同。
上面是解构的基本用法，除了基本用法外，还可以使用可嵌套可忽略、不完全解构、剩余运算符、结构默认值等方法。
四、字符串
在 ES 6 中对字符串提供了很多拓展方法，比如子串识别、字符串重复、字符串补全等。这里简单的介绍一下字符串模板的使用。
字符串模板使用反引号（`）进行标识，模板字符串具备普通字符串的用法，可以使用 ${} 将变量放入字符串中等功能。
<script>letname='lucy'letage=20// 其中的换行在输出是也进行输出letinfo=`My name is ${name},i am ${age+1}years old`console.log(info) </script>
通过浏览器的 console 窗口来查看它的输出，输出如下：
Mynameislucy, iam21yearsold
可以看到，在输出中将变量 name 进行了输出，将变量 age 进行加 1 后输出，在代码中的字符串模板中使用了换行，在控制台中字符串的输出也进行了换行。
五、对象
在 ES 6 中定义对象、对象拷贝、对象合并也非常的好用，对象定义的代码如下：
<script>constname='lucy'constage=20// 其中的名字可以省略，名字和变量名相同constuser= {name, age} console.log(user) </script>
输出如下所示：
{name: "lucy", age: 20} age: 20name: "lucy"
对象拷贝的代码如下：
<script>// 对象复制letperson= {name: 'amy', age: 15} letsomeone= { person } console.log(someone) </script>
以上代码输出如下：
{name: "amy", age: 15} age: 15name: "amy"
对象合并的代码如下：
<script>// 对象合并letage= {age : 15} letname= {name : 'amy'} letperson= { age, name} console.log(person) </script>
以上代码输出如下：
{age: 15, name: "amy"} age: 15name: "amy"
ES 6 中还有其他的关于对象的操作，比如属性名表达式、方法名简写等。
六、箭头函数
在 ES 6 中提供了箭头函数，它是函数的一种简洁书写方式。这里整理了带一个参数和带多个参数的函数。先来看带一个参数的函数，代码如下：
<script>// 参数 => 函数体varf1=a=>aconsole.log(f1(3)) </script>
该函数等价于如下函数：
varf1=function(a) { returna}
因此，在上面的 console.log(f1(3)) 会输出一个 3。再来查看带多个参数的函数如何定义，代码如下：
<script>// ES6varf2= (m, n) =>m+nconsole.log(f2(3, 4)) </script>
在上面的代码中，m 和 n 是参数，返回值是 m + n 的和，上面的代码输出 7。当参数只有一个的时候可以不使用小括号，当没有参数或有一个以上的参数时，小括号不可用省略。
总结
上面是整理的部分关于 ES 6 的特性，ES 6 中还包括 Symbol、Map、Set、Proxy、Reflect、Promise、Generator 和async 等，具体参考连接为 ：https://www.runoob.com/w3cnote/es6-tutorial.html，有需要的可以点击该连接自行阅读。
