ES6主要新增特性指南

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。

TC39（Technical Committee 39）负责制定ECMAScript标准，成员包括Microsoft、Mozilla、Google等大公司。

从提案到成为ECMA规范主要有以下几个阶段：

• Stage 0 Strawperson：最初的想法；
• Stage 1 Proposal：提案，由TC39至少一名成员倡导的正式提案文件，该文件包括API事例；
• Stage 2 Draft：草案，功能规范的初始版本，该版本包含功能规范的两个实验实现。
• Stage 3 Candidate：候选，提案规范通过审查并从厂商那里收集反馈；
• Finished：完成，提案准备加入ECMAScript，但是到浏览器或者Nodejs中可能需要更长的时间。

详细流程见官方说明：https://tc39.es/process-document/

这样我们就可以了解一个新特性是如何从想法到最终制定为规范，也可以查看每个提案的进度。

项目地址：https://github.com/tc39/ecma262

也提供了web版方便查看：https://tc39.es/ecma262/

ES6主要新增特性（2015）

ES6新增特性比较多，下面列举几个比较常用的：

• let、const
• 模板字符串
• 延展操作符
• 对象属性简写
• 解构赋值
• 函数参数默认值
• 箭头函数
• Promise
• 类
• 模块化

let、const

关于JavaScript作用域的说明，请看我的另一篇文章。

let、const实现了块级作用域，使用示例如下：

{
  var test = 'test'
}
console.log(test) // test
{
  let test = 'test'
}
console.log(test) // Error: test is not defined

PS: const为常量修饰符，但是针对引用类型不能阻止修改其引用数据。

模板字符串

字符串拼接更方便，示例如下：

let first = 'god'
let last = 'tail'
let name = `My name is ${first} ${last}`

延展操作符

用于展开数组、对象，示例如下：

// 数组延展
const nums = [1, 2, 3, 4, 5]
sum(...nums) // 相当于 sum(1, 2, 3, 4, 5)

// 对象延展
const extData = {
  age: 18,
  status: 'work'
}
request({
  name: 'godtail',
  ...extData
  // 相当于
  // age: 18,
  // status: 'work'
})

对象属性简写

如果在当前作用域存在同名变量，可以省写对象属性，示例如下：

const name = 'godtail'
const age = 18

const people = {
  name, // 相当于 name: name
  age, // 相当于 age: age
}

解构赋值

针对数组解构，示例如下：

let nums = [1, 2, 3, 4, 5]
let [one, two ,three] = nums

console.log(one) // 1
console.log(two) // 2
console.log(three) // 3

针对对象解构，示例如下：

const people = {
  name:'godtail',
  age:'18'
}

const {name, age} = people

console.log(name) // godtail
console.log(age) // 18

函数参数默认值

支持在定义函数的时候设置默认值，使用示例如下：

function sum(a, b = 0, c = 0) {
  return a + b + c
}

箭头函数

箭头函数不单是关键字function的简写，还会使箭头函数绑定当前作用域this，使用示例如下：

(name) => {
  return 'I\'m' + name
}
// 如果是单个参数，可以省略括号()
name => {
  return 'I\'m' + name
}
// 可以省略{}和return，直接返回当前结果
name => 'I\'m' + name

Promise

相对于传统的callback，更加的优雅，示例如下：

new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve('success') // 异步操作成功
    // reject('fail') // 异步操作失败
  })
}).then(ret => {
  // 成功，继续执行，可以执行下个异步操作
}).catch(err => {
  // 失败，捕获异常
}).finally() {
  // 无论成功与否，都会执行
}

类

让JavaScript的面向对象编程更加简单和易于理解。

使用示例如下：

class People {
  // 属性，允许设置默认值
  name = 'default'
  constructor(name) {
    this.name = name
  }
  say() {
    console.log('people say')
  } 
}

// 只支持单继承
class Coder extends People {
  constructor(name) {
    super(name)
  }
  say() {
    console.log('Test2 say')
  }
}

const people = new People('people')
const coder = new Coder('coder')

//对象多态
people.say() // people say
coder.say() // coder say

console.log(people instanceof People) // true
console.log(coder instanceof People) // true

关于静态属性和方法

设置对属性和方法为静态，为类公用属性和方法，使用示例如下：

class People {
  static STATUS_WORK = 'work'
  static work() {
    console.log('people work')
  }
}

People.work() // people work
console.log(People.STATUS_WORK) // work

目前阶段在Stage 3：https://github.com/tc39/proposal-static-class-features/

但是可以通过babel使用。

关于私有属性

在属性前面添加#，表示为私有属性，使用示例如下：

class People {
  #name
  constructor(name) {
    this.#name = name
  }
}

目前阶段在Stage 2：https://github.com/tc39/proposal-private-fields-in-in

模块化

每个模块有自己单独的作用域，模块通过export来规定模块对外暴露的接口，通过import来引入其他模块提供的接口。

导出

使用示例如下：

// 默认导出
export default {
  people: 'godtail'  
}
// 带命名导出
export name = 'coder'
export function work() {
  console.log('word')
}

导入

使用示例如下：

// 导入默认模块
import lib from 'lib'
// 导入libPart模块
import {libPart} from 'lib'
// 导入默认模块和libPart模块
import lib, {libPart} from 'lib