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为提供了重命名的方法,当你在导入名称时可以这样做: