Web/10-Node.js和数据库/ES6.md

153 lines
2.4 KiB
JavaScript
Raw Normal View History

2018-03-04 18:18:19 +08:00
2018-03-05 19:36:59 +08:00
## 前言
2018-03-04 18:18:19 +08:00
2018-03-05 19:36:59 +08:00
ECMAScript JS 的语言标准 ES6 是新的 JS 语法标准
2018-03-04 18:18:19 +08:00
### 发展历史
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');
```
上面两端代码执行的结果是一样的
2018-03-05 19:36:59 +08:00
当然也可以给上面这个函数的参数加一个默认值
2018-03-04 18:18:19 +08:00
```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 的作用域
##