变量声明- let、const

let

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

  • let特点:

    • 1 块级作用域(ES6)
    • 2 先声明再使用
    • 3 不允许重复声明
1
2
3
4
5
6
7
/* 基本使用 */
let num = 2

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

const

  • const声明一个只读的常量。一旦声明,常量的值就不能改变。
  • const的作用域与let命令相同:只在声明所在的块级作用域内有效
1
2
3
4
5
6
7
8
9
const PI = 3.1415
console.log(PI) // 3.1415

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

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

字符串模板

  • 说明:代替原始的字符串拼接
1
2
3
4
const num = 1

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

箭头函数

  • ES6箭头函数
  • 注意 1:函数体内的this对象,就是定义时所在的对象(一般是外层函数中的this)
  • 注意 2:无法使用arguments,没有arguments对象
  • 注意 3:不能当作构造函数,不能使用new创建对象
  • 注意:不要在Vue的选项属性或回调上使用箭头函数
    • 比如:created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 语法: */
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 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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解构
  • ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 对象解构
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

对象简化语法

  • 对象中的属性和方法,都可以使用简化语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 属性的简化语法: */
var foo = 'bar'
var baz = {foo}

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


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

属性名表达式

  • ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。
1
2
3
4
5
6
7
8
9
10
var propKey = 'foo'
var methodKey = 'bar'

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

class关键字

  • ES6以前,JS是没有class概念的,而是通过构造函数+原型的方式来实现的
  • 注意:ES6中的class仅仅是一个语法糖,并不是真正的类,与Java等服务端语言中的类是有区别的
  • ES6 - 文档
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Person {
constructor() {
// 实例属性
this.name = 'jack'
}

// 实例方法
say() {}

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

console.log(Person.age)
  • 类继承:
    • 1 如果子类提供了 constructor,那么,必须要调用super()
    • 2 子类添加属性,必须在 super() 调用后面
1
2
3
4
5
6
7
8
9
10
// 类继承:
class Chinese extends Person {
constructor(name, gender, weight) {
super(name, gender)

this.weight = weight
}
}

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

静态属性和实例属性

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

ES6模块化 - import和export

  • 导入和导出

  • import:导入模块

  • export:导出模块

  • 注意1:export default 每个模块只能使用一次

  • 注意2:export 每个模块可以使用多次

  • 注意3:一个模块可以导出多个内容,export defaultexport 可以一起使用

1
2
3
4
5
6
7
8
// main.js
// 导入 default 内容,可自定义导入名称
// import num from './a.js'
import num1 from './a.js'

// a.js
const num = 123
export default num
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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() {}
1
2
3
4
5
6
7
8
// main.js
import { str, fn } from './b'

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

数组扩展运算符

  • 扩展运算符(spread)是三个点(…)。作用:将一个数组转为用逗号分隔的参数序列
1
2
3
4
5
var arr = ['a', 'b', 'c']
console.log(...arr)

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

对象扩展运算符

  • 注意:该语法不是真正的ES规范,需要使用stage-2解析
1
2
3
var obj = {name: 'jack', age: 19}
var o = {...obj, gender: 'male'}
// o => {name: 'jack', age: 19, gender: 'male'}

Promise 异步编程

  • ES6 - Promise
  • Promise是一种对尚未返回的数据的一种承诺
  • promise:承诺、保证

介绍

1
2
Promise 是异步编程的一种解决方案,比传统的解决方案`回调函数和事件`更合理和更强大
Promise 将异步操作以同步操作(链式编程)的流程表达出来,避免了层层嵌套的回调函数(回调地狱的问题)
  • 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

  • Promise对象代表一个异步操作,有三种状态:pending(进行中)fulfilled(已成功)rejected(已失败)

    • 状态改变 1:pending -> fufilled
    • 状态改变 2:pending -> rejected
    • 一旦状态改变,就不会再变

基本使用

1
2
3
4
5
6
7
8
9
10
11
// Promise 是一个构造函数
// 通过 new 创建Promise的实例对象
var promise = new Promise(function(resolve, reject) {
// ... some code

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

then 和 catch

  • then(): 用于指定异步操作成功时的回调函数
  • catch():用于指定发生错误时的回调函数
  • 说明:then()方法可以有多个,按照先后顺序执行,通过回调函数返回值传递数据给下一个then
1
2
3
4
5
6
7
8
9
10
11
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!');
  • 异步读取图片示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 所有请求发送成功:
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);
})