前端----ES6(二)

3. ES6基本语法

• ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对

象、内建函数等通用语法。

• 本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。

3.1 let声明变量

• 与我们的JavaScript中var声明变量有什么区别

1、作用域不同

2、声明次数不同

3、声明与使用顺序不同

3.2 const声明常量

const 声明常量,为只读变量

1. 一旦声明之后，其值是不允许改变的

2. 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错

误，声明常量丢失了初始化）

3.3 解构赋值

• 解构赋值是对赋值运算符的扩展
• 它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
• 解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
• 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

3.3.1 数组解构

3.3.2 对象解构

3.4 模板字符串

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

3.4.1 定义多行字符串

再见了，\n

3.4.2 字符串插入变量和表达式

再见了，字符串的拼接用 +

3.4.3 字符串中调用函数

3.5 声明对象简写

定义对象的时候，可以用变量名作为属性名

3.6 定义方法简写

 

3.7 对象拓展运算符

拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

3.7.1 拷贝对象(深拷贝)

科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人

3.7.2 合并对象

吞噬合并（两个对象合并成一个对象）

3.8 函数的默认参数

形参处已声明，但不传入实参会怎样？

3.9 函数的不定参数

定义方法时，不确定有几个参数？

3.10 箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体

 

3.11 Promise（了解）

• 用来解决回调函数的嵌套噩梦 （后面学习ajax才能更好的理解）
• 我们回顾一下嵌套噩梦：
  • 你和我打架，我打不过你，我说：你在这等着，我找我哥来揍你！
  • “哥，我被老王打了，你帮我揍他！”，“行，我先把饭做完，你先去找刘备，把刘备找来，我
  • 和刘备再一起帮你报仇！”
  • “刘备，我被老王打了，我哥叫我来找你，一起帮我报仇！”，“没问题，兄弟，我去交电话
  • 费，你去找我二弟关羽，他打架厉害，把他叫来，我们一起更有把握！”
  • “关羽，我被人打了，我哥叫我找刘备，刘备让我来找你，一起帮我报仇！”，“没问题，兄
  • 弟，我有点事，你先去找我三弟张飞，把张飞找来，我这边就办完事了，我们一起帮你报仇
  • 去！”
  • “张飞，我让老王打了，谁谁谁，哎，反正关羽让我找你，你跟我走，一起帮我报仇去！”，
  • “行啊，老铁，我一会从老丈人回来就去找你，你去把我二哥的儿子关平找来，正好打一架让
  • 这小子练练胆。找到了我们一起帮你报仇！”
  • 。。。
  • 满嘴的兄弟情深，一个拖一个，就是不想帮我报仇
• 使用promise解决掐架找人的噩梦
  • “哥，老王打我！”，“走，但老王厉害，我们去找刘备一起帮你报仇！”
  • “刘备，走着，我们一起揍老王去”，“没问题！”，“二弟，过来，有人欺负我们，去揍他！”
  • 。。。找人过程中，都是立刻跟着走，没人拖！
  • 最终，我们108人一起找到了老王！！！！
• 找到一个人成功后，再继续找下一个人。逐渐形成了“队伍”
• 组建队伍的过程中，如果找某个人失败了，则“队伍”失败
• 其实有点类似“击鼓传花”的游戏，一个成功拿到花之后，才能传递给下一个人。依次类推！

使用promise

 

3.12 模块化

• 如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？
• java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程
• 将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块
• 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

3.12.1 传统的模块化

创建user.js文件

test.js

 

运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置 ）

原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！

3.13 babel环境

babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持

3.13.1 安装babel客户端环境

创建新目录 lagou-babel，在终端中打开，运行命令：

npm install --global babel-cli

查看版本

babel --version

如果报错1：（win7系统中）

'babel' 不是内部或外部命令，也不是可运行的程序或批处理文件。（babel命令在当前系统中不被认

可）

• 由于babel是通过npm安装，所以babel会默认安装到 E:\repo_npm
• 在 E:\repo_npm 这个目录下，进入dos命令，执行 babel --version， 如果是成功的，说明babel

已经安装成功

• 但是在vscode的终端中打不开，那么只可能是两个原因：
  • 环境变量没有配置
    • 系统环境变量中 path中加入 ;E:\repo_npm;
    • 在任意位置进入dos窗口，babel --version可以了，说明环境变量配置成功
  • vscode关掉，重新以“管理员身份运行

如果报错2：（win10系统中）

windows10默认禁止运行有危险的脚本，修改一下系统策略就好了

开始菜单-> Windows PowerShell (切记要以管理员身份运行)，输入代码

set-ExecutionPolicy RemoteSigned

现在，就可以看版本号了。

3.13.2 安装转码器

1. 创建lagou-babel专属目录，在其中初始化项目

npm init -y

2. 创建babel配置文件 .babelrc ，并输入代码配置：

{

"presets": ["es2015"],

"plugins": []

}

3. 安装转码器

npm install --save-dev babel-preset-es2015

4. 转码

创建dist目录，用来存放转码后的文件

babel user.js --out-file .\dist\user.js

或

babel user.js -o .\dist\user.js

5. 运行转码后的文件

node .\dist\test.js

3.14 ES6模块化的另一种写法

3.14.1 as的用法

user.js：如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

test.js

也可以接收整个模块

test.js

3.14.2 默认导出

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

3.14.3 重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，

为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：