一个简单的 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`

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:PipeSoloSymWide 等,欢迎大家加入,贡献开源。

    3132 引用 • 3886 回帖 • 655 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    279 引用 • 838 回帖 • 1076 关注
  • var
    3 引用 • 17 回帖
感谢    关注    收藏    赞同    反对    举报    分享