ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

ES6对JavaScript做了大量改造,增加了许多实用的新特性,大幅提高了灵活性和应用性。

let 和 const

var的变量提升问题

在ES6以前,变量的声明一般只有一种方法:var
var存在着“变量提升”的问题。举个例子:

1
2
3
4
5
6
7
8
9
var msg = 'hello'

function say() {
console.log(msg)
var msg = 'world'
console.log(msg)
}

say()

按正常思维来说,控制台会先输出hello,再输出world。但实际的输出却是:

1
2
undefined
world

这是因为使用var定义变量时,变量的声明会被单独提前到函数的顶端,而初始化则留在原位。所以上面的代码等价于:

1
2
3
4
5
6
7
8
9
10
var msg = 'hello'

function say() {
var msg // 重新声明变量msg
console.log(msg) // undefined
msg = 'world'
console.log(msg)
}

say()

使用 let 定义局部变量

ES6中,let的出现很好的解决了上面的问题。
let定义的是局部变量,仅在当前代码块(即最近的一对大括号)有效。举个例子:

1
2
3
4
for (let i=0; i<5; i++) {
console.log(i)
}
console.log(i)

输出如下:

1
2
3
4
5
6
0
1
2
3
4
Uncaught ReferenceError: i is not defined

可以看出,let就是弥补了缺陷的var。官方也推荐尽量使用let而不是var

使用 const 定义常量

const定义的变量与let一样都是局部变量,但const定义的是不能修改的常量。

1
2
const num = 123
num = 456 // Uncaught TypeError: invalid assignment to const 'num'

但若const定义的变量是一个对象,其值还是可以被修改的:

1
2
3
4
5
6
7
8
const obj = {
key: 'damedane'
}

obj.key = 'dameyo' // 不报错
obj = {
key: 'dameyo' // 报错
}

const定义变量时必须初始化:

1
const a    // Uncaught SyntaxError: missing = in const declaration

箭头函数

基础写法

在ES6以前,定义函数需要使用function关键字:

1
2
3
var func = function (a, b) {
return a + b
}

ES6中新增了一种简写定义函数的方式,称为箭头函数,写法为一个等于号=加上一个大于号>

1
2
3
4
// 由于此处采用字体的原因,箭头函数的两个字符会被连起来,记住是'='加上'>'就好了
var func = (a, b) => {
return a + b
}

如果函数内只包含return语句,还可以缩写为

1
var func = (a, b) => a + b

如果返回值为一个对象,那这样的写法是错误的:

1
let errfunc = (v) => { key: v }   // SyntaxError

因为这样的写法和函数体冲突了,所以要写成这样的形式:

1
let okfunc = (v) => ({ key: v })

关于参数有几个需要注意的点:
当只有一个参数时,括号可写可不写

1
2
3
let squ = n => n**2
// 等同于
let squ = (n) => n**2

当没有参数,或有两个及以上个参数时,括号不能少

1
2
3
4
let say = () => {
console.log('hello')
}
let mul = (a, b) => a * b

this指向问题

在使用function关键字定义函数时,this指向的是调用该函数的那个对象:

1
2
3
4
5
6
7
8
9
10
11
let obj = {
a: 10,
add: function () {
let func = function () {
return this.a + 15
}
return func
}
}

console.log(obj.add()()) // NaN

这里由于JavaScript的this指向错误,导致this指向window对象,所以this.a的值为undefined,故而输出为NaN

而使用箭头函数就不会出现这个问题:

1
2
3
4
5
6
7
8
9
let obj = {
a: 10,
add: function () {
let func = () => this.a + 15
return func
}
}

console.log(obj.add()()) // 25