ES6常用语法(一)

发表于 分类于

ECMAScript

ECMAScript标准的历史版本分别是1、2、3、5，第4版因改动太多而遭废除。2009年发布的改进版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、严格模式，JSON对象，数组方法如map、filter、reduce，函数bind方法等。ES6是在2015年发布的，所以又称ECMAScript 2015。目前并不是所有浏览器都能兼容ES6全部特性，但可以用ES6转码工具将ES6代码转为ES5代码，例如Babel。下面总结一下常用的ES6语法。

1 .let和const

用来声明变量，和var比较起来，ES5中只有全局作用域和函数作用域，用let可以声明块级作用域，const声明常量且不可改变。

1
2
3
4
5
6
7
8
9
10
11
12
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i)
    }, 1000)
} // 1s之后控制台输出5个5

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000)
} // 1s之后输出0,1,2,3,4

2 .箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
class People {
    constructor(name) {
        this.name = name
    }

    sayHi() {
        setTimeout(() => {
            console.log('I\'m' + 'this.name')
        }, 0)
    }
}

注意箭头函数没有自己的this对象，会继承外面的this对象

3 .模板字符串

再也不怕字符串拼接的一堆+了。

1
2
let foo = new People('foo')
console.log(`This is ${foo.name}`)

用模板字符串还可以自由换行。

4 .class，extends，super

引入了Class（类）这个概念，更像面向对象编程的语法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Animal {
    constructor() {
        this.type = 'animal'
    }
    sayHi() {
        console.log(`Hi`)
    }
}

class Cat extends Animal {
    constructor() {
        super()
        this.type = 'cat'
    }
    sayHi() {
        super.sayHi()
    }
}

如果子类中存在构造函数，则需要在使用this之前首先调用super()。super 关键字指代父类的实例（即父类的this对象）,可用于调用对象的父对象上的函数。

5 .默认参数

支持传入默认参数

1
2
3
4
function test1(a = 'default') {
    console.log(a)
}
test1() // 'default'

形参解构

1
2
3
4
5
function test2(...args) {
    console.log(args)
}
test2(1, 2, 3) // [1, 2, 3]

类似于arguments，但arguments为类数组对象，args为数组对象