【注意】最后更新于 May 20, 2017,文中内容可能已过时,请谨慎使用。
1.变量声明和赋值
1.1 变量声明
let和const是新增的变量声明关键字,
它们与var的区别是,声明变量没有预解析。
1
2
3
4
5
6
7
|
// 变量声明
{
let num1 = 10
const max_len = 99
// max_len = 100 // 错误,常量不能修改
}
// console.log(num1) // 错误,超出了作用域
|
1.2 解构赋值
ES6允许按照一定的模式,从数组和对象中提取值,这被成为解构(Destructuring)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
{
// 数组的解构赋值
const arr = [2, 4, 6]
let [num1, num2, num3] = arr
console.log(num1, num2, num3)
// 对象的解构赋值
const rectangle = {length: 100, width: 50}
let {length, width} = rectangle // 变量名称必须与对象的属性名相同
console.log(length, width)
// 函数参数的解构赋值
function area({length, width}) {
return length * width
}
console.log(area(rectangle))
}
|
1.3 扩展运算符(…)
扩展运算符...
,用于把一个数组转化为逗号分隔的参数序列,常用在不确定参数个数函数调用,数组合并等场景。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 扩展运算符
{
let arr1 = [2, 4, 6]
let arr2 = [...arr1, 8]
console.log(arr2)
function sum(num1, num2, num3) {
return num1 + num2 + num3
}
console.log(sum(...arr1))
function sum2(...nums) {
let sum = 0
for (let num of nums) {
sum += num
}
return sum
}
console.log(sum2(1, 3, 5))
}
|
2.字符串相关
2.1 模板字符串
ES6提供了模板字符串,使用反引号标识,使用${}
指定变量。
1
2
3
4
5
6
7
8
9
10
|
// 模板字符串
{
let name = 'jane'
let height = 168
console.log(`${name}'s height is ${height}`)
// 模板字符串还可作为多行字符串使用
const str = `<ul>
<li>es6</li>
</url`
}
|
3.数组相关
map()
方法: 可以分别处理数组的成员,返回一个新数组
1
2
3
4
5
6
|
let arr = [2, 3, 4]
arr.map(ele => {
console.log(ele)
})
arr = arr.map(ele => ele * 2)
console.log(arr) // [4, 6, 8]
|
concat()
方法: 用于连接数组
1
2
3
4
|
let arr1 = [1, 3, 5]
let arr2 = [2, 4, 6]
let arr = arr1.concat(arr2).concat(7, 8, 9)
console.log(arr) // [ 1, 3, 5, 2, 4, 6, 7, 8, 9 ]
|
4.函数
4.1 箭头函数
箭头函数可理解成是匿名函数的另一种写法,箭头函数可以在对象中绑定this
,解决了JavaScript中this
指向混乱的问题。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 箭头函数
{
let f1 = a => a * 2 // 箭头函数中只有一个return语句,则return关键字和大括号都可以省略
let f2 = (a, b) => {
let sum = a + b
return sum
}
console.log(f1(100), f2(100, 200))
// 使用箭头函数绑定对象中的this
let user = {
name: 'jane',
logout: function() {
setTimeout(() => {
console.log(`${this.name} logout`)
})
}
}
user.logout()
}
|
5.模块和面向对象
5.1 模块导入和导出
ES6之前JavaScript中并没有内置模块功能,需要借助一些js库来模拟实现。
ES6加入了模块功能,一个js文件就是一个模块,js文件中需要先导出(export)后,才能被其他js文件导入(import)。
ES6的导出分为名称导出和默认导出:
- 名称导出导入的变量名必须和导出的变量名一致
- 默认导出(default export),一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致,适用于导出匿名函数或对象的场景
1
2
3
4
5
6
7
8
9
|
export default {
name: 'jane',
score: 100
}
export let foo = function() {
console.log('foo')
}
export let bar = 'bar'
|
1
2
3
4
5
6
|
import {foo, bar} from './01_04_module1.js'
foo()
console.log(bar)
import student from "./01_04_module1.js"
console.log(student.name)
|
5.2 对象简写
1
2
3
4
5
6
7
8
|
var rect = {
width: 100,
length: 300,
area() {
return this.width * this.length
}
}
console.log(rect.area())
|
5.3 类和类的继承
ES6提供了class语法来简化类的创建和继承。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
class Rectangle {
constructor(length, width) {
this.length = length
this.width = width
}
area() {
return this.width * this.length
}
}
let rect = new Rectangle(11, 21)
console.log(rect.area())
class Square extends Rectangle {
constructor(width) {
super(width, width)
}
print() {
console.log(`width = ${this.width}`)
}
}
let square = new Square(10)
console.log(square.area())
square.print()
|
6.Promise对象
Promise是异步编程的一种解决方案。
Promise反映了异步操作的最终值(Promise代表某种承诺,即无论异步操作是否成功,这个对象最终都会返回一个值给你)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
let p = new Promise((resolve, rejct) => {
setTimeout(()=>{
let rand = Math.floor(Math.random()*10)
if(rand % 2 == 0) {
resolve(rand)
}else {
rejct(new Error("error info"))
}
}, 100)
})
p.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
Promise.all([p1, p2]).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
|
7.Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
Proxy可以理解为用它去拦截js操作的方法,从而对这些方法进行代理操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const person = {
name: 'jane',
age: 13
}
const proxy = new Proxy(person, {
get(target, key, receiver) {
if (key === 'name') {
return "king " + target[key]
}
return Reflect.get(target, key, receiver)
}
})
console.log(proxy.name)
console.log(proxy.age)
|
在MDN中是这么定义Proxy的: Proxy对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。
语法 const p = new Proxy(target, handler)
- target 要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
- handler 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理p的行为。
关于handler对象的方法除了get, set外其他在Proxy在MDN的文档可以找到。
参考