如何查看前端项目es5的版本 前端 es6全称

前言

ES6，全称ECMAScript 6，是ECMA委员会在 2015年6月正式发布的新ECMAScript标准。所以又称ECMAScript 2015，也就是说，ES6就是ES2015。至今各大浏览器厂商所开发的 JavaScript 引擎都还没有完成对 ES2015 中所有特性的完美支持，于是乎如 babel、Traceur 等编译器便出现了。它们能将尚未得到支持的 ES2015 特性转换为 ES5 标准的代码，使其得到浏览器的支持。其中，babel 因其模块化转换器(Transformer)的设计特点赢得了绝大部份 JavaScript 开发者的青睐。

一、变化

一言以蔽之：ES2015 标准提供了许多新的语法和编程特性以提高 JavaScript 的开发效率和体验。

二、新的语法

1、let、const

他们是继 var 之后，新的变量定义方法。

const 更容易被理解：const 也就是 constant 的缩写，跟 C/C++ 等经典语言一样，用于定义常量，即不可变量。

ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

2、箭头函数 （arrow function）

这个恐怕是ES6最最常用的一个新特性了，用它来写function比原来的写法要简洁清晰很多：

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

如果方程比较复杂，则需要用{}把代码包起来：

function(x, y) { 
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return x+y}

除了看上去更简洁以外，arrow function还有一项超级无敌的功能！
长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。例如：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

（1）第一种是将this传给self,再用self来指代this

says(say){
   var self = this;
   setTimeout(function(){
     console.log(self.type + ' says ' + say)
}, 1000);

（2）第二种方法是用bind(this)，即：

says(say){
   setTimeout(function(){
     console.log(self.type + ' says ' + say)
}.bind(this), 1000);

但现在我们有了箭头函数，就不需要这么麻烦了：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

3、模板字符串（template string）

这个东西也是非常有用，当我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库。

可以先看下面一段代码：

$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串``后，我们可以直接这么来写：

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引号（`）来标识起始，用${}来引用变量，而且所有的空格和缩进都会被保留在输出之中。

4、对象字面量扩展语法

4.1 方法属性省略 function

// es5
function bar() {
  return 'bar'
},

// es6
bar() {
  return 'bar'
}

4.2 支持 __proto__ 注入

在 ES2015 中，我们可以给一个对象硬生生的赋予其 __proto__，这样它就可以成为这个值所属类的一个实例了。

class Foo {
  constructor() {
    this.pingMsg = 'pong'
  }

  ping() {
    console.log(this.pingMsg)
  }
}

let o = {
  __proto__: new Foo()
}

o.ping() //=> pong

有什么用呢？当我想扩展或者覆盖一个类的方法，并生成一个实例，但觉得另外定义一个类就感觉浪费了。那我可以这样做：

let o = {
  __proto__: new Foo(),

  constructor() {
    this.pingMsg = 'alive'
  },

  msg: 'bang',
  yell() {
    console.log(this.msg)
  }
}

o.yell() //=> bang
o.ping() //=> alive

4.3 同名方法属性省略语法

也是看上去有点鸡肋的新特性，不过在做 JavaScript 模块化工程的时候则有了用武之地。

// module.js
export default {
  someMethod
}

function someMethod() {
  // ...
}

// app.js
import Module from './module'

Module.someMethod()

4.4 可以动态计算的属性名称（这个我觉得还是非常有用的）

let arr = [1, 2, 3]
let outArr = arr.map(n => {
  return {
    [ n ]: n,
    [ `${n}^2` ]: Math.pow(n, 2)
  }
})
console.dir(outArr) //=>
  [
    { '1': 1, '1^2': 1 },
    { '2': 2, '2^2': 4 },
    { '3': 3, '3^2': 9 }
  ]

5、表达式解构（destructuring）

这是es6相当有用的一个特性。

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

例：

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

用ES6完全可以像下面这么写：

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

反过来可以这么写：

let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

 6、默认参数（default）和后续参数（rest）

6.1 默认参数

调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat'来指定默认值。

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

如果用ES6我们可以直接这么写：

function animal(type = 'cat'){
    console.log(type)
}
animal()

6.2 后续参数

我们知道，函数的 call 和 apply 在使用上的最大差异便是一个在首参数后传入各个参数，一个是在首参数后传入一个包含所有参数的数组。

如果我们在实现某些函数或方法时，也希望实现像 call 一样的使用方法，在ES5中我们得使用arguments：

function fetchSomethings() {
  var args = [].slice.apply(arguments)

  // ...
}
function doSomeOthers(name) {
  var args = [].slice.apply(arguments, 1)

  // ...
}

而在 ES6 中，我们可以很简单的使用 ... 语法糖来实现：

function fetchSomethings(...args) {
  // ...
}
function doSomeOthers(name, ...args) {
  // ...
}

要注意的是，...args 后不可再添加。

虽然从语言角度看，arguments 和 ...args 是可以同时使用 ，但有一个特殊情况则不可：arguments 在箭头函数中，会跟随上下文绑定到上层，所以在不确定上下文绑定结果的情况下，尽可能不要再箭头函数中再使用 arguments，而使用 ...args。

注意事项

默认参数值和后续参数需要遵循顺序原则，否则会出错。

function(...args, last = 1) {
  // This will go wrong
}

三、新的数据类型

在 ES5 中，JavaScript 中基本的数据类型：

• String 字符串
• Number 数字（包含整型和浮点型）
• Boolean 布尔值
• Object 对象
• Array 数组

其中又分为值类型和引用类型，Array 其实是 Object 的一种子类。

1、Set（集） 和 WeakSet（弱集）

高中数学中，集不能包含相同的元素。

let s = new Set()
s.add('hello').add('world').add('hello')
console.log(s.size) //=> 2
console.log(s.has('hello')) //=> true

在实际开发中，我们有很多需要用到集的场景，如搜索、索引建立等。

WeakSet 在 JavaScript 底层作出调整（在非降级兼容的情况下），检查元素的变量引用情况。如果元素的引用已被全部解除，则该元素就会被删除，以节省内存空间。这意味著无法直接加入数字或者字符串。另外 WeakSet 对元素有严格要求，必须是 Object，当然了，你也可以用 new String('...') 等形式处理元素。

let weaks = new WeakSet()
weaks.add("hello") //=> Error
weaks.add(3.1415) //=> Error

let foo = new String("bar")
let pi = new Number(3.1415)
weaks.add(foo)
weaks.add(pi)
weaks.has(foo) //=> true
foo = null
weaks.has(foo) //=> false

2、Map 和 WeakMap

从数据结构的角度来说，映射（Map）跟原本的 Object 非常相似，都是 Key/Value 的键值对结构。但是 Object 有一个让人非常不爽的限制：key 必须是字符串或数字。在一般情况下，我们并不会遇上这一限制，但若我们需要建立一个对象映射表时，这一限制显得尤为棘手。

而 Map 则解决了这一问题，可以使用任何对象作为其 key，这可以实现从前不能实现或难以实现的功能，如在项目逻辑层实现数据索引等。

let map = new Map()
let object = { id: 1 }

map.set(object, 'hello')
map.set('hello', 'world')
map.has(object) //=> true
map.get(object) //=> hello

而 WeakMap 和 WeakSet 很类似，只不过 WeakMap 的键和值都会检查变量引用，只要其一的引用全被解除，该键值对就会被删除。

let weakm = new WeakMap()
let keyObject = { id: 1 }
let valObject = { score: 100 }

weakm.set(keyObject, valObject)
weakm.get(keyObject) //=> { score: 100 }
keyObject = null
weakm.has(keyObject) //=> false

四、类（Class）

回想一下在 ES5 中，我们是怎么在 JavaScript 中实现类的？

function Foo() {}
var foo = new Foo()

ES6 中的类只是一种语法糖，用于定义原型(Prototype)的。

1、语法

1.1 定义

class Person {
  constructor(name, gender, age) {
    this.name = name
    this.gender = gender
    this.age = age
  }

  isAdult() {
    return this.age >= 18
  }
}

let me = new Person('Me', 'man', 19)
console.log(me.isAdult()) //=> true

1.2 继承

class Animal {
  say() {
    console.log('say')
  }
}

class Person extends Animal {
  constructor(name, gender, age) {
    super() // must call `super` before using `this` if this class has a superclass

    this.name = name
    this.gender = gender
    this.age = age
  }

  isAdult() {
    return this.age >= 18
  }
}

class Man extends Person {
  constructor(name, age) {
    super(name, 'man', age)
  }
}

let me = new Man('Me', 19)
console.log(me.isAdult()) //=> true
me.say() //=> say

ES6 中若要是一个类继承于另外一个类而作为其子类，只需要在子类的名字后面加上 extends {SuperClass} 即可。

1.3 静态方法

ES6 中的类机制支持 static 类型的方法定义，比如说 Man 是一个类，而我希望为其定义一个 Man.isMan() 方法以用于类型检查，我们可以这样做：

class Man {
  // ...

  static isMan(obj) {
    return obj instanceof Man
  }
}

let me = new Man()
console.log(Man.isMan(me)) //=> true

遗憾的是，ES2015 的类并不能直接地定义静态成员变量，但若必须实现此类需求，可以用static 加上 get 语句和 set 语句实现。

class SyncObject {
  // ...

  static get baseUrl() {
    return 'http://example.com/api/sync'
  }
}

遗憾与期望

就目前来说，ES6 的类机制依然很鸡肋：

1. 不支持私有属性（private）
2. 不支持前置属性定义，但可用 get 语句和 set 语句实现
3. 不支持多重继承
4. 没有类似于协议（Protocl）或接口（Interface）等的概念

五、生成器（Generator）

Generator 的设计初衷是为了提供一种能够简便地生成一系列对象的方法，如计算斐波那契数列（Fibonacci Sequence)（俗称兔子数列）：

function* fibo() {
  let a = 1
  let b = 1

  yield a
  yield b

  while (true) {
    let next = a + b
    a = b
    b = next
    yield next
  }
}

let generator = fibo()

for (var i = 0; i < 10; i++)
  console.log(generator.next().value) //=> 1 1 2 3 5 8 13 21 34 55

如果你没有接触过 Generator，你一定会对这段代码感到很奇怪：为什么 function 后会有一个 *？为什么函数里使用了 while (true)却没有进入死循环而导致死机？yield 又是什么鬼？

1、基本概念

1.1 Generator Function

生成器函数用于生成生成器(Generator)，它与普通函数的定义方式的区别就在于它需要在 function 后加一个 * 。

function* FunctionName() {
  // ...Generator Body
}

生成器函数的声明形式不是必须的，同样可以使用匿名函数的形式：

let FunctionName = function*() { /* ... */ }

生成器函数的函数内容将会是对应生成器的运行内容，其中支持一种新的语法 yield。它的作用与 return 有点相似，但并非退出函数，而是切出生成器运行时。

你可以把整个生成器运行时看成一条长长的面条（while (true) 则就是无限长的），JavaScript 引擎在每一次遇到 yield 就要切一刀，而切面所成的“纹路”则是 yield 出来的值。

1.2 Generator

生成器在某种意义上可以看做为与 JavaScript 主线程分离的运行时，它可以随时被 yield 切回主线程（生成器不影响主线程）。

每一次生成器运行时被 yield 都可以带出一个值，使其回到主线程中；此后，也可以从主线程返回一个值回到生成器运行时中：

let inputValue = yield outputValue

生成器切出主线程并带出 outputValue，主函数经过处理后（可以是异步的），把 inputValue 带回生成器中；主线程可以通过 .next(inputValue) 方法返回值到生成器运行时中。

2、基本使用方法

2.1 构建生成器函数

使用 Generator 的第一步自然是要构建生成器函数，理清构建思路。拿斐波那契数列作为例子：

斐波那契数列的定义：第 n (n ≥ 3) 项是第 n - 1 项和第 n - 2 之和，而第 1 项和第 2 项都是 1。

function* fibo() {
  let [a, b] = [1, 1]

  yield a
  yield b

  while (true) {
    [a, b] = [b, a + b]
    yield b
  }
}

这样设计生成器函数，就可以先把预先设定好的首两项输出，然后通过无限循环不断把后一项输出。

2.2  启动生成器

生成器函数不能直接用来作为生成器使用，需要先使用这个函数得到一个生成器，用于运行生成器内容和接收返回值。

let gen = fibo()

2.3 运行生成器内容

得到生成器以后，我们就可以通过它进行数列项生成了。此处演示获得前 10 项。

let arr = []
for (let i = 0; i < 10; i++)
  arr.push(gen.next().value)

console.log(arr) //=> [ 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 ]

 

六、原生的模块化

在ES6之前， 前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库，  而像seaJS是基于CMD规范的模块化库，  两者都是为了为了推广前端模块化的工具。

现在ES6自带了模块化， 也是JS第一次支持module， 在很久以后 ，我们可以直接作用import和export在浏览器中导入和导出各个模块了， 一个js文件代表一个js模块；

现代浏览器对模块(module)支持程度不同， 目前都是使用babelJS， 或者Traceur把ES6代码转化为兼容ES5版本的js代码。

1、ES6的模块化的基本规则或特点：

（1）：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；

（2）：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；

（3）：模块内部的变量或者函数可以通过export导出；

（4）：一个模块可以导入别的模块。

//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {
    return x * x;
}
//导出函数
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//main.js
import { square, diag } from './lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

2、几种导出方式：

2.1 内联导出

export class Employee{  
  constructor(id, name, dob){  
    this.id = id;  
    this.name=name;  
    this.dob= dob;  
  }  
  getAge(){  
    return (new Date()).getYear() - this.dob.getYear();  
  }  
}  
export function getEmployee(id, name, dob){  
  return new Employee(id, name, dob);  
}  
var emp = new Employee(1, "Rina", new Date(1987, 1, 22));

案例中的模块导出了两个对象： Employee类，getEmployee函数。因对象emp未被导出，所以其仍为模块私有。

2.2 导出一组对象

在模块的末尾单独进行导出声明，以导出该模块中的需要导出的对象。

class Employee{  
  constructor(id, name, dob){  
    this.id = id;  
    this.name=name;  
    this.dob= dob;  
  }  
  getAge(){  
    return (new Date()).getYear() - this.dob.getYear();  
  }  
}  
function getEmployee(id, name, dob){  
  return new Employee(id, name, dob);  
}  
var x = new Employee(1, "Rina", new Date(1987, 1, 22));  
export {Employee, getEmployee};

在导出时，重命名对象也是可以的。如下例所示，Employee在导出时名字改为了Associate，函数GetEmployee改名为getAssociate。

export {  
    Associate as Employee,  
    getAssociate as getEmployee  
};

2.3 Default导出

使用关键字default，可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。

这种导出的方式不需要知道变量的名字， 相当于是匿名的， 直接把开发的接口给export；

如果一个js模块文件就只有一个功能， 那么就可以使用default导出：

function foo(..) {  
// ..  
}  
export default foo;  
// or:
export{ foo as default };

3 、导入

3.1 无对象导入

import './module1.js';

3.2 导入默认对象

import foo from "foo";  
// or:  
import { default as foo } from "foo";

3.3 导入命名的对象

import { foo } from "foo";

当然也可在同一个声明中导入默认对象和命名对象。这种情况下，默认对象必须定义一个别名：

import {default as d, foo} from './module1.js';

3.4 导入所有对象

import * as allFromModule1 from './module1.js';

3.5 可编程式的按需导入

如果想基于某些条件或等某个事件发生后再加载需要的模块，可通过使用加载模块的可编程API（programmatic API）来实现。使用System.import方法，可按程序设定加载模块。这是一个异步的方法，并返回Promise。

System.import('./module1.js')  
    .then(function(module1){  
        //use module1  
    }, function(e){  
        //handle error  
    });

如果模块加载成功且将导出的模块成功传递给回调函数，Promise将会通过。如果模块名称有误或由于网络延迟等原因导致模块加载失败，Promise将会失败。

等会，什么是Promise？

七、Promise

Promise 是一种用于解决回调函数无限嵌套的工具（当然，这只是其中一种），其字面意义为“保证”。它的作用便是“免去”异步操作的回调函数，保证能通过后续监听而得到返回值，或对错误处理。它能使异步操作变得井然有序，也更好控制。

1、基本用法

要为一个函数赋予 Promise 的能力，先要创建一个 Promise 对象，并将其作为函数值返回。Promise 构造函数要求传入一个函数，并带有 resolve 和 reject 参数。这是两个用于结束 Promise 等待的函数，对应的成功和失败。而我们的逻辑代码就在这个函数中进行。

function fetchData() {
    return new Promise((resolve, reject) => {
        if (/* 异步操作成功 */){
        　　resolve(value);
        } else {
        　　reject(error);
        }
    })；
}

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 方法和 reject 方法。

如果异步操作成功，则用 resolve 方法将 Promise 对象的状态，从「未完成」变为「成功」（即从 pending 变为 resolved）；

如果异步操作失败，则用 reject 方法将 Promise 对象的状态，从「未完成」变为「失败」（即从 pending 变为 rejected）。

基本的 api

1. Promise.resolve()
2. Promise.reject()
3. Promise.prototype.then()
4. Promise.prototype.catch()
5. Promise.all() // 所有的完成
6. Promise.race() // 竞速，完成一个即可

2、进阶

promises 的奇妙在于给予我们以前的 return 与 throw，每个 Promise 都会提供一个 then() 函数，和一个 catch()，实际上是 then(null, ...) 函数：

somePromise().then(functoin(){
　　// do something
});

我们可以做三件事：

1. return 另一个 promise
2. return 一个同步的值 (或者 undefined)
3. throw 一个同步异常 ` throw new Eror('');`

 2.1 封装同步与异步代码

new Promise(function (resolve, reject) {
　　resolve(someValue);
});

// 写成
Promise.resolve(someValue);

2.2  捕获同步异常

new Promise(function (resolve, reject) {
　　throw new Error('悲剧了，又出 bug 了');
}).catch(function(err){
　　console.log(err);
});

如果是同步代码，可以写成：

Promise.reject(new Error("什么鬼"));

2.3 多个异常捕获，更加精准的捕获

somePromise.then(function() {
　　return a.b.c.d();
}).catch(TypeError, function(e) {
//If a is defined, will end up here because
//it is a type error to reference property of undefined
}).catch(ReferenceError, function(e) {
//Will end up here if a wasn't defined at all
}).catch(function(e) {
//Generic catch-the rest, error wasn't TypeError nor
//ReferenceError
});

2.4 获取两个 Promise 的返回值

2.4.1 .then 方式顺序调用

2.4.2 设定更高层的作用域

2.4.3 spread

（未完待续……）