ES6 新特性

一个简单的 JavaScript 时间线

  1. 1995 年:JavaScript 以 LiveScript 之名诞生
  2. 1997 年:ECMAScript 标准确立
  3. 1999 年:ES3 发布,IE5 非常生气
  4. 2000 年 -2005 年:XMLHttpRequest,熟知为AJAX,在如 Outlook Web Access(2002)、Oddpost(2002)、Gmail(2004)、Google Maps(2005) 中得到了广泛的应用
  5. 2009 年:ES5 发布(这是我们目前用的最多的版本),带来了forEach / Object.keys/ Object.create(特地为 Douglas Crockford 所造,JSON 标准创建者) ,还有 JSON 标准。

2015 年 6 月发布 ES6(ES2015),下面介绍

ES6 新特性

默认参数

// 以前
var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://azat.co'
    ...
}
// 现在
var  link  =  function(height  =  50,  color  =  'red',  url  =  'http://azat.co')  {
  ...
}

模版表达式

// 以前
var  name  =  'Your name is '  +  first  +  ' '  +  last  +  '.'
var  url  =  'http://localhost:3000/api/messages/'  +  id
// 现在
var  name  =  `Your  name  is  ${first}  ${last}`
var  url  =  `http://localhost:3000/api/messages/${id}`

拆包表达式

// 以前
var  data  =  $('body').data(),  // 假设data中有mouse和house的值
  house  =  data.house,
  mouse  =  data.mouse
// 现在  
var  {  house,  mouse}  =  $('body').data()  // 我们会拿到house和mouse的值的

箭头函数 =&>

// 以前
function fn(x) {
    return x * x;
}
// 现在
var fn = x => x * x;

Promise

// 以前
setTimeout(function(){
  console.log('Yay!')
},  1000)
// 现在
var  wait1000  =  new  Promise(function(resolve,  reject)  {
  setTimeout(resolve,  1000)
}).then(function()  {
  console.log('Yay!')
})
// 或者
var  wait1000  =  new  Promise((resolve,  reject)=>  {
  setTimeout(resolve,  1000)
}).then(()=>  {
  console.log('Yay!')
})

块级作用域的letconst

  1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;
  2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;
  3. 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。

// 以前
function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
// 现在
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

模块化

模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year}; // 输出一组变量
// 在main.js下引用,这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载
import {firstName, lastName, year} from './profile.js';
// 同理可以输出函数:
export function multiply(x, y) {
  return x * y;
};
// 对外输出一个函数`multiply`