157 lines
2.4 KiB
Markdown
157 lines
2.4 KiB
Markdown
|
|
|||
|
|
|
|||
|
|
## 什么是 ES6
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 发展历史
|
|||
|
|
|
|||
|
|
ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。
|
|||
|
|
|
|||
|
|
|
|||
|
|
20180303_1633.png
|
|||
|
|
|
|||
|
|
|
|||
|
|
- 2015年6月，ES6正式发布。
|
|||
|
|
|
|||
|
|
|
|||
|
|
### ES6 的其他优势
|
|||
|
|
|
|||
|
|
- 使用 babel 语法转换器，支持低端浏览器
|
|||
|
|
|
|||
|
|
- 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 新源发开发。
|
|||
|
|
|
|||
|
|
|
|||
|
|
## ES6 的常用语法
|
|||
|
|
|
|||
|
|
### ES6语法概览
|
|||
|
|
|
|||
|
|
- 块级作用域、字符串
|
|||
|
|
|
|||
|
|
- 对象扩展、解构
|
|||
|
|
|
|||
|
|
- 类、模块化等。
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 作用域：let 和 const
|
|||
|
|
|
|||
|
|
- 用 `let`定义变量 ，替代 var
|
|||
|
|
|
|||
|
|
- 用const 定义常量（定义后，不可修改）
|
|||
|
|
|
|||
|
|
- 作用域和 {}
|
|||
|
|
|
|||
|
|
|
|||
|
|
举例：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let a1 = 'haha';
|
|||
|
|
|
|||
|
|
const name = `smyhvae`;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 模板字符串
|
|||
|
|
|
|||
|
|
我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var name = 'smyhvae';
|
|||
|
|
var age = '26';
|
|||
|
|
console.log('name:'+name+',age:'+age); //传统写法
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
这种写法，比较繁琐，而且容易出错。
|
|||
|
|
|
|||
|
|
现在有了 ES6 语法，字符串拼接可以这样写：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var name = 'smyhvae';
|
|||
|
|
var age = '26';
|
|||
|
|
|
|||
|
|
console.log('name:'+name+',age:'+age); //传统写法
|
|||
|
|
|
|||
|
|
console.log(`name:${name},age:${age}`); //ES6 写法
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
注意，上方代码中，倒数第二行用的是单引号，最后一行用的是反引号（在tab键的上方）。
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 函数扩展
|
|||
|
|
|
|||
|
|
ES6 中函数的用法：
|
|||
|
|
|
|||
|
|
- 参数默认值
|
|||
|
|
|
|||
|
|
- 箭头函数
|
|||
|
|
|
|||
|
|
- 展开运算符
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
定义和调用函数：（传统写法）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function fn1(name) {
|
|||
|
|
console.log(name);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fn1('smyhvae');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
定义和调用函数：（ES6写法）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var fn2 = (name)=>{
|
|||
|
|
console.log(name);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fn2('smyhvae');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
上面两端代码，执行的结果是一样的。
|
|||
|
|
|
|||
|
|
当然，也可以给上面这个函数的参数加一个缺省值：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var fn2 = (name='enen')=>{
|
|||
|
|
console.log(name);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fn2(); //参数用默认值 enen
|
|||
|
|
fn2('smyhvae');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
比如说，1秒后执行一段代码，可以用箭头函数：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
console.log('something');
|
|||
|
|
},1000);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
如果函数体只有一条 return 语句，那么大括号可以省略：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const myDouble = x=>x*2;
|
|||
|
|
console.log(myDouble(5)); //打印结果为10
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
箭头函数的好处：
|
|||
|
|
|
|||
|
|
- 简写代码
|
|||
|
|
|
|||
|
|
- 保持 this 的作用域
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
##
|