ES6基础语法与模块化编程

项目已开源至gitee：https://gitee.com/guo-qianliang/es6-vue-node.js
项目已开源至github：https://github.com/Guoqianliang/ES6-Vue-Node.js

---

前后端开发技术栈对比表

比较	前端	后端
环境	JavaScript(es6/7/8…)	Java(jdk8.9.10…)
框架	JQuery、Vue、React…	Spring、SpringMVC…
工具	webstorm、vscode…	idea、eclipse…
项目构建	webpack、gulp	maven、gradle
依赖管理	npm	mvn

一、ES6基础语法

ECMAScript 6.0是一种脚本程序设计语言，是 JavaScript 语言的下一代标准。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序， 成为企业级开发语言。

• 总而言之，ECMAScript 是浏览器脚本语言的规范， 而各种我们熟知的 js 语言， 如 JavaScript 则是规范的具体实现。

1.let声明变量

ES6的let、JS中的var都是用来声明变量，二者区别主要在三点：

• ①let声明的变量有严格的局部作用域；var声明的变量会越域。
• ②let只能声明一次；var可以声明多次。
• ③let不存在变量提升；var存在变量提升。

下面通过代码对上述三条特性进行演示：

• ①let是局部变量
  

• ②let只能声明一次

• ③let不存在变量提升
  

2.const声明常量

①使用const声明常量，且声明时必须初始化。

• ①常量不能被修改
  

3.解构表达式

ES6的解构方式更加简单，常用的有数组解构和对象解构。

数组解构：

对象解构：

4.模板字符串

模板字符串相当于加强版本的字符串，使用用反引号，除了可以作为普通字符串，还可以用来定义多行字符串、 还可以在字符串中加入变量、加入表达式。

• 模板字符串可以用来加入变量、表达式
  

5.声明对象

相比传统方式声明对象，ES6声明对象的语法更加简洁：

6.对象拓展运算符

拓展运算符用于取出参数对象所有可遍历属性然后拷贝到当前对象。

7.箭头函数

箭头函数可以理解为一种更加简洁的函数书写方式，可以让函数的书写更加简单，基本语法是：参数=>函数体，多用于匿名函数的定义。

二、ES6模块化编程

关于模块化编程，后端主要指的是对象与对象之间的调用，而前端指JS之间的调用。为了演示ES6模块化编程，创建01.js文件，其中写入两个方法，在02.js中调用01.js中的方法：

由于ES6的模块化无法在node.js中执行，所以运行02.js文件后，项目会报错。在node.js中无法直接执行es6模块化代码，需要将es6代码转换为es5才能执行，转换可以借助babel转码器实现。

ES6转ES5

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行，可以使用babel转码器实现将ES6转换为ES5代码，从而在现有环境中执行。

• babel提供babel-cli工具，安装命令如下：
  npm install -g babel-cli
• 查看是否安装成功
  babel --version

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则，下面的配置表明将其转换为ES5：

{
	"presets": ["es2015"],
	"plugins": []
}

在初始化的目录中安装转码器：

	npm install -D babel-preset-es2015

将src中的js文件转成ES5文件放入dist文件夹中：

	babel src -d dist

此时在dist文件夹中执行node 02.js，可以成功执行01.js中定义的方法：