码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 - ECMAScript 6.0(ES2015)

时间:2019-01-09 15:03:25      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:sign   new   could not   声明变量   特点   pre   oca   方案   add   

# ES6 - ECMAScript 6.0(ES2015)

## 变量声明- let、const

### let

- ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

- `let`特点:
- 1 块级作用域(ES6)
- 2 先声明再使用
- 3 不允许重复声明

```js
/* 基本使用 */
let num = 2

{
let num = 9
}
console.log(num)
```

### const

- const声明一个**只读的常量**。一旦声明,常量的值就不能改变。
- const的作用域与let命令相同:只在声明所在的块级作用域内有效

```js
const PI = 3.1415
console.log(PI) // 3.1415

// 修改 常量的值 会报错
PI = 3 // TypeError: Assignment to constant variable.

// 可以修改对象中属性的值
const user = { name: ‘rose‘ }
user.name = ‘jack‘
```

## 字符串模板

- 说明:代替原始的字符串拼接

```js
const num = 1

// ${} 中可以使用JS表达式
let dv = `<div>${num}</div>`
```

## 箭头函数

- [ES6箭头函数](http://es6.ruanyifeng.com/#docs/function)
- 注意 1:函数体内的this对象,就是定义时所在的对象(一般是外层函数中的this)
- 注意 2:无法使用arguments,没有arguments对象
- 注意 3:不能当作构造函数,不能使用new创建对象
- 注意:**不要在Vue的选项属性或回调上使用箭头函数**
- 比如:`created: () => console.log(this.a)` 或 `vm.$watch(‘a‘, newValue => this.myMethod())`

```js
/* 语法: */
var fn = arg => arg

// 上面的箭头函数等同于:
var fn = function (arg) {
return arg
}

var fn = () => {
console.log(‘随机内容‘)
}
// 等同于:
var fn = function () {
console.log(‘随机内容‘)
}
```

## rest参数

- ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了
- 说明:rest 参数的类型是:数组
- 注意:rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错

```js
function add(...values) {
var sum = 0
values.forEach(function(val) {
sum += val
})
return sum
}

add(2, 5, 3) // 10


// 报错
function f(a, ...b, c) {
// ...
}
```

## 解构赋值

- [ES6解构](http://es6.ruanyifeng.com/#docs/destructuring)
- ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

```js
// 对象解构
var { foo, bar } = { foo: "aaa", bar: "bbb" }
foo // "aaa"
bar // "bbb"

// 数组解构
var [a, b, c] = [1, 2, 3]

// 函数参数的解构赋值
function foo({x, y}) {
console.log(x, y)
}

foo({x: 1, y: 2}) // 1 2
```

## 对象简化语法

- 对象中的属性和方法,都可以使用简化语法

```js
/* 属性的简化语法: */
var foo = ‘bar‘
var baz = {foo}

// 等同于
var baz = {foo: foo}


/* 方法的简化语法: */
var o = {
method() {
return "Hello!"
}
}
// 等同于
var o = {
method: function() {
return "Hello!"
}
}
```

### 属性名表达式

- ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。

```js
var propKey = ‘foo‘
var methodKey = ‘bar‘

var obj = {
[propKey]: true,
[‘a‘ + ‘bc‘]: 123,
[methodKey]() {
return ‘hi‘
}
}
```

## class关键字

- ES6以前,JS是没有class概念的,而是通过构造函数+原型的方式来实现的
- 注意:ES6中的class仅仅是一个语法糖,并不是真正的类,与Java等服务端语言中的类是有区别的
- [ES6 - 文档](http://es6.ruanyifeng.com/#docs/class)

```js
class Person {
constructor() {
// 实例属性
this.name = ‘jack‘
}

// 实例方法
say() {}

// 静态方法
static coding() {}
}
// 静态属性
Person.age = 0

console.log(Person.age)
```

- 类继承:
- 1 如果子类提供了 constructor,那么,必须要调用`super()`
- 2 子类添加属性,必须在 super() 调用后面

```js
// 类继承:
class Chinese extends Person {
constructor(name, gender, weight) {
super(name, gender)

this.weight = weight
}
}

const ch = new Chinese(‘小明‘, ‘男‘, 130)
```

### 静态属性和实例属性

- 静态属性:直接通过类名访问
- 实例属性:通过实例对象访问

## ES6模块化 - import和export

- [导入和导出](http://blog.csdn.net/DeepLies/article/details/52916221?locationNum=13&fps=1)
- `import`:导入模块
- `export`:导出模块

- 注意1:`export default` 每个模块只能使用一次
- 注意2:`export` 每个模块可以使用多次
- 注意3:一个模块可以导出多个内容,`export default` 和 `export` 可以一起使用

```js
// main.js
// 导入 default 内容,可自定义导入名称
// import num from ‘./a.js‘
import num1 from ‘./a.js‘

// a.js
const num = 123
export default num
```

```js
// main.js
// 导入 export内容
// 注意:导入非default模块内容(str、fn),必须与 导出名称 相同,或者通过 as 修改
// 注意:必须使用花括号
import { str, fn } from ‘./b‘

// 加载并修改变量名
// import { str as str1, fn } from ‘./b‘
// 整体加载
// import * as bModule from ‘./b‘

// b.js
export const str = ‘abc‘
export function fn() {}
```

```js
// main.js
import { str, fn } from ‘./b‘

// b.js
const str = ‘abc‘
function fn() {}
// 一次性导出
export { str, fn }
```

## 数组扩展运算符

- 扩展运算符(spread)是三个点(...)。作用:将一个数组转为用逗号分隔的参数序列

```js
var arr = [‘a‘, ‘b‘, ‘c‘]
console.log(...arr)

// 上面这句代码相当于:
console.log(arr[0], arr[1], arr[2]);
```

## 对象扩展运算符

- 注意:该语法不是真正的ES规范,需要使用`stage-2`解析

```js
var obj = {name: ‘jack‘, age: 19}
var o = {...obj, gender: ‘male‘}
// o => {name: ‘jack‘, age: 19, gender: ‘male‘}
```

## Promise 异步编程

- [ES6 - Promise](http://es6.ruanyifeng.com/#docs/promise)
- Promise是一种对尚未返回的数据的一种承诺
- `promise`:承诺、保证

### 介绍

```html
Promise 是异步编程的一种解决方案,比传统的解决方案`回调函数和事件`更合理和更强大
Promise 将异步操作以同步操作(链式编程)的流程表达出来,避免了层层嵌套的回调函数(回调地狱的问题)
```

- 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

- Promise对象代表一个异步操作,有三种状态:**pending(进行中)**、**fulfilled(已成功)**和**rejected(已失败)**
- 状态改变 1:pending -> fufilled
- 状态改变 2:pending -> rejected
- **一旦状态改变,就不会再变**

### 基本使用

```js
// Promise 是一个构造函数
// 通过 new 创建Promise的实例对象
var promise = new Promise(function(resolve, reject) {
// ... some code

if (/* 异步操作成功 */) {
resolve(value)
} else {
reject(error)
}
})
```

### then 和 catch

- `then()`: 用于指定异步操作成功时的回调函数
- `catch()`:用于指定发生错误时的回调函数
- 说明:`then()`方法可以有多个,按照先后顺序执行,通过回调函数返回值传递数据给下一个then

```js
let promise = new Promise(function(resolve, reject) {
console.log(‘1 Promise‘);
// 异步操作
setTimeout(resolve, 1000, ‘done‘);
});

promise.then(function() {
console.log(‘3 resolved.‘);
});

console.log(‘2 Hi!‘);
```

- 异步读取图片示例:

```js
const loadImageAsync = function(url) {
return new Promise(function(resolve, reject) {
const image = new Image()
image.src = url

// 图片加载成功
image.onload = function() {
resolve(image)
}

// 图片加载失败
image.onerror = function() {
reject(new Error(‘Could not load image at ‘ + url))
}
})
}

// 推荐方式:
loadImageAsync(‘url‘)
// 成功处理
.then(function(value) {})
// 错误处理
.catch(function(err) {})

// 其他方式:
loadImageAsync(‘url‘)
.then(function(value) {
// 成功,value 获取到 图片对象(image)
}, function(error) {
// 失败,error 获取到 错误信息
});
```

### all 和 race

```js
// 所有请求发送成功:
const p = Promise.all([
axios(‘http://vue.studyit.io/api/getlunbo‘),
axios(‘http://vue.studyit.io/api/getnewslist‘)
])

p.then(function (res) {
// res 是 all() 方法中所有异步操作的结果
console.log(‘两个异步请求完成:‘, res);
})

// 哪个请求先发送成功:
const p = Promise.race([
axios(‘http://vue.studyit.io/api/getlunbo‘),
axios(‘http://vue.studyit.io/api/getnewslist‘)
])

p.then(function (res) {
// res 是 race() 方法中先完成的异步操作的结果:
console.log(‘一个异步请求完成:‘, res);
})
```

 

ES6 - ECMAScript 6.0(ES2015)

标签:sign   new   could not   声明变量   特点   pre   oca   方案   add   

原文地址:https://www.cnblogs.com/vue-rr/p/10244169.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!