ES6简介

最新推荐文章于 2023-02-03 19:41:54 发布

原创最新推荐文章于 2023-02-03 19:41:54 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6/es7

ES6，即ECMAScript6.0，是JavaScript的重要升级，于2015年正式发布，旨在解决ES5的局限性。它引入了类、模块等新特性，提升了JavaScript的表达力和功能。各大浏览器逐渐支持ES6，但完整兼容需借助转码器如Babel和Traceur。

基本信息

ES6 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，
大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

ECMAScript 的历史

ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

1997 年 ECMAScript 1.0 诞生。
1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

兼容性

不同浏览器的不同版本对ES6的支持度不同，而Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
另外，使用Google公司的Traceur转码器，也可以将ES6代码转为ES5代码，需要提前引入其js库，包含traceur.js、BrowserSystem.js、bootstrap.js。第一个是加载Traceur的库文件，第二个和第三个是将这个库文件用于浏览器环境。然后就可以加载ES6的用户脚本了，如：

//引用外部ES6的js
<script type="module">
  import './Greeter.js';
</script>
 
//直接写ES6的JS
<script type="module">
  class Calc {
    constructor() {
      console.log('Calc constructor');
    }
    add(a, b) {
      return a + b;
    }
  }
  var c = new Calc();
  console.log(c.add(4,5)); //正常情况下，会在控制台打印出9。
</script>

自定义的script标签的type属性的值是module，而不是text/javascript。这是Traceur编译器识别ES6代码的标志，编译器会自动将所有type=module的代码编译为ES5，然后再交给浏览器执行。
如果想对Traceur的行为有精确控制，可以采用下面参数配置的写法：

<script>
  // 创建系统对象
  window.System = new traceur.runtime.BrowserTraceurLoader();
  // 设置参数
  var metadata = {
    traceurOptions: {
      experimental: true,
      properTailCalls: true,
      symbols: true,
      arrayComprehension: true,
      asyncFunctions: true,
      asyncGenerators: exponentiation,
      forOn: true,
      generatorComprehension: true
    }
  };
  // 加载模块
  System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
    console.error('Import failed', ex.stack || ex);
  });
</script>

上面代码中，首先生成Traceur的全局对象window.System，然后System.import方法可以用来加载ES6。加载的时候，需要传入一个配置对象metadata，该对象的traceurOptions属性可以配置支持ES6功能。如果设为experimental:true，就表示除了ES6以外，还支持一些实验性的新功能