ECMAScript6

ECMAScript6

大家对JavaScript，ECMAScript，TypeScript可能都有所耳闻，但是都只是停留在听说阶段，只要在任何地方提这个问题，就会有人说，ECMAScript是标准，JavaScript是标准的实现，就我目前的认识而言，这种说法不一定对。我认为，ECMAScript这个标准应该是浏览器引擎在实现和支持，与之对应的，是Node生态开发者的实现和支持。

追溯JavaScript的历史，我们可以知道，JavaScript诞生在Java刚诞生的那个年代。是网景的一位工程师发明的。为了搭上Java大行其道的快车，改名为JavaScript。

过了一段时间，微软搞出一个JScript，此时JavaScript为了保护自己的成果，讲JavaScript交到了ECMA国际标准组织。也就是说ECMAScript的第一个版本就是JavaScript。

在2000年之前，ECMAScript一共发布了三个版本。

ECMAScript4被废弃。
ECMAScript5在2009年发布。
ECMAScript6在2015年发布。

需要注意的是，2008年chrome浏览器发布，2009年,Node.js的诞生，将V8引擎推向了历史舞台。

所以我们可以这样认为：
如果chrome v8支持了ES6,我们就能在前端书写ES6，顺其自然的，在Node中也能使用ES6。

不过，比较遗憾的是，目前，无论是在浏览器端，还是在Node中，都还无法使用ES6的全部语法。所以，我们必须使用类似babel这种工具来配合我们学习并使用ES6。

搭建环境

参考

• 安装babel-cli
• 安装babel-preset-env

最佳实践

es6 style

let const

用let代替var表示变量，用const表示常量。

let a = 10
const url = "http://www.baidu.com"

解构赋值

let [x ,y] = [1,2]
let {m,n} = {m:20,n:30}

console.log(x,y)
console.log(m,n)

字符串

使用${}可以代替使用“+”符号拼接字符串。

let user = "xiaoming"
let str = `hello${user}`

console.log(str)

hello xiaoming

箭头函数

let sum = (x,y) => {
    return x + y ;
}

let result = sum(1,1)

console.log(result)

对象

关于对象的增加内容比较多，且实用。

属性简洁表示法

const foo = "foo"
const baz = "baz"

const obj = {
    foo,
    baz
}

console.log(obj.foo,obj.baz)

ES6支持在对象中直接一个value值，省略key值。key值将自动使用value的名称。

class

终于有了class，不用再使用prototype了。

class User {
    constructor(name,age) {
        this.name = name;
        this.age = age
    }

    say() {
       console.log(`name=${this.name} age=${this.age}`);
    }

}
let user = new User('xiaoming','10')

user.say()


class Student extends User {
    constructor(name,age,gradle) {
        super(name,age)
        this.gradle = gradle
    }

    read() {
        console.log("read book");
    }
}

let student = new Student('xiaoming',10,6)

console.log(student.gradle)
student.say()
student.read()

需要注意：

• 方法可以简写，不用function
• 一个类只能有一个构造函数

模块

涉及到的关键字:

• export
• export default
• import from

对比Node学习

• exports
• module.exports
• require

暴露值

exports.PI = 3.14

export const PI = 3.14

导入并使用

let util = require('./util.js')

import {PI} from './util.js'

console.log(util.PI)
console.log(PI)

暴露值

let util = {
    PI : 3.14
}

module.exports = util

export default util

导入并使用

let util = require('./util.js')

import Util from './util.js'


console.log(util.PI)
console.log(Util.PI)

大家可以感受一下。

大多数时候，都会使用export default。

以上，就是ES6最常用的语法。