mirror of
https://github.com/qianguyihao/Web.git
synced 2024-10-31 04:54:46 +08:00
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 的作用域
|
|||
|
|
|||
|
|
|||
|
|
|||
|
##
|