ES6基础语法与模块化编程

男娘i 2022-10-29 09:16 158阅读 0赞

> 项目已开源至gitee：[https://gitee.com/guo-qianliang/es6-vue-node.js][https_gitee.com_guo-qianliang_es6-vue-node.js]  
> 项目已开源至github：[https://github.com/Guoqianliang/ES6-Vue-Node.js][https_github.com_Guoqianliang_ES6-Vue-Node.js]

### ES6基础语法 ###

*  前后端开发技术栈对比表
 *  一、ES6基础语法
 *   *  1.let声明变量
     *  2.const声明常量
     *  3.解构表达式
     *  4.模板字符串
     *  5.声明对象
     *  6.对象拓展运算符
     *  7.箭头函数
 *  二、ES6模块化编程
 *   *  ES6转ES5

--------------------

# 前后端开发技术栈对比表 #

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

# 一、ES6基础语法 #

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

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

## 1.let声明变量 ##

> ES6的let、JS中的var都是用来声明变量，二者区别主要在三点：
> 
>  *  ①let声明的变量有`严格的局部作用域`；var声明的变量会越域。
>  *  ②let`只能声明一次`；var可以声明多次。
>  *  ③let`不存在变量提升`；var存在变量提升。

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

*  ①let是局部变量  
    ![①let是局部变量][let]
 *  ②let只能声明一次![②let只能声明一次][let 1]
 *  ③let不存在变量提升  
    ![③let不存在变量提升][let 2]

## 2.const声明常量 ##

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

*  ①常量不能被修改  
    ![常量不能被修改][20210408190839142.png]

## 3.解构表达式 ##

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

数组解构：  
![数组解构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]

对象解构：

![对象解构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]

## 4.模板字符串 ##

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

*  模板字符串可以用来加入变量、表达式  
    ![模板字符串测试][2021040820310897.png]

## 5.声明对象 ##

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

## 6.对象拓展运算符 ##

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

![对象拓展运算符][2021040820462425.png]

## 7.箭头函数 ##

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

![箭头函数][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]

# 二、ES6模块化编程 #

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

![ES6模块化调用][ES6]

由于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并查看版本][babel]

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中定义的方法：  
![模块化调用成功][20210409214525567.png]

[https_gitee.com_guo-qianliang_es6-vue-node.js]: https://gitee.com/guo-qianliang/es6-vue-node.js
[https_github.com_Guoqianliang_ES6-Vue-Node.js]: https://github.com/Guoqianliang/ES6-Vue-Node.js
[let]: /images/20221024/e564a5bed54c484fb94d9d78665d4e67.png
[let 1]: /images/20221024/ebcff9a779ce4948baecc87d3fe3d1a8.png
[let 2]: /images/20221024/e349363345f64c4281d72f3c15f76feb.png
[20210408190839142.png]: /images/20221024/4dc59fe49173428db2cc1ce4ba1a2fe4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]: /images/20221024/f2324be611054d09b57fe031fb87fe4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]: /images/20221024/364c4668627c457dac63e20a4916803b.png
[2021040820310897.png]: /images/20221024/753ab7358adf423594cc5d24e7fd2c96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 2]: /images/20221024/b3bac24bb8504336b36583e37c74e2c3.png
[2021040820462425.png]: /images/20221024/d3c2f655f42a4ebf8236e2267c772d96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]: /images/20221024/d842dccd6c54461fa102793bd7cd864e.png
[ES6]: /images/20221024/24c7bcd4ba0c430bacb6113b2ee9e1fa.png
[babel]: /images/20221024/a282cb7d9c1842388c41a16bfc633edf.png
[20210409214525567.png]: /images/20221024/84f1eaa67b5c40a6b1bc68fa698cf87a.png