JavaScript ECMAScript版本介紹

1. 介紹

1.1 什麼是ECMAScript

ECMAScript，簡稱ES，是由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）按照ECMA-262和ISO/IEC 16262標準制定的一種腳本語言規範。

1.2 JavaScript 與 ECMAScript 的關係

JavaScript是按ECMAScript規範實現的一種腳本語言，其餘的還有JScript、ActionScript。

這三種語言還提供了ECMA規範外的額外功能。

1.3 ECMAScript版本

截止到2017年年末，ECMAScript共發佈了8個版本：

ECMAScript 1

1997年06月：發佈首版。

ECMAScript 2

1997年06月：修改規範徹底符合ISO/IEC 16262國際標準。

ECMAScript 3

1999年12月：增長正則、更好的文字處理、新的控制語句、try/catch異常處理、更加明確的錯誤定義，數字輸出格式等等。

ECMAScript 4

放棄發佈。

ECMAScript 5

2009年12月：完善了ECMAScript 3版本、增長"strict mode,"（嚴格模式）、以及新的功能，如getter和setter、JSON庫支持和更完整的對象屬性。

ECMAScript 5.1

2011年06月：使規範更符合ISO/IEC 16262:2011第三版。

ECMAScript 6

2015年06月：第六版的名字有不少，能夠叫ECMAScript 6（ES6），也能夠叫ECMAScript 2015（ES2015）。

此版本增長了很是重要的東西：let、const、class、modules、 arrow functions,、template string, destructuring, default, rest argument、binary data、promises等等。

規範地址：http://www.ecma-international.org/ecma-262/6.0/

ES6及以上的教程可參考Babel提供的： https://babeljs.io/learn-es2015/

ECMAScript 7

2016年06月：也被稱爲ECMAScript 2016。完善ES6規範，還包括兩個新的功能：求冪運算符（*）和array.prototype.includes方法。

規範地址：http://www.ecma-international.org/ecma-262/7.0/

ECMAScript 8

2017年06月：增長新的功能，如併發、原子操做、Object.values/Object.entries、字符串填充、promises、await/asyn等等。

規範地址：http://www.ecma-international.org/ecma-262/8.0/

2. 瀏覽器與JS新特性

2.1 查看瀏覽器支持狀況

JS的每隔一段時間就會出新的特性，而瀏覽器只有不斷的升級才能知足這些，並且同一個瀏覽器各版本對新特性的支持狀況也不同。

網站：https://caniuse.com/ 提供了查看某個功能瀏覽器的支持狀況。

如es6規範新增長的arrow function（箭頭函數）的支持以下：

能夠看到IE全部版本徹底不支持，chrome 45版本纔開始支持。

2.2 Babel

想使用JS的新特性，又想兼容舊瀏覽器版本，那麼就須要一種轉換工具：把JS的新特性代碼轉換爲舊瀏覽器能夠支持的JS代碼。而Babel就是這麼一個工具。

Babel，官方介紹一個JavaScript編譯器。說簡單點就是把使用ES6及以上的特性的代碼轉換爲對應的ES5代碼，以使舊瀏覽器能夠運行。

網址：https://babeljs.io/

在gulp中使用Babel

Babel除了自身提供Babel built-ins外，還提供了其餘構建工具的版本，本示例以gulp爲例。

1) 安裝gulp-babel

1. npm install --save-dev gulp-babel babel-core babel-preset-env

2) 編寫一段ES6的代碼

建立一個app.js文件，並寫入如下代碼：

1. var sayHello = (userName, age) => {
2. console.log(userName + ' age is ' + age);
3. };

3) 編寫gulp文件

1. var gulp = require('gulp');
2. var babel = require('gulp-babel');
3.  
4. gulp.task('default', function() {
5. return gulp
6. .src('js/app.js')
7. .pipe(
8. babel({
9. presets: ['env']
10. })
11. )
12. .pipe(gulp.dest('dist'));
13. });

4) 運行gulp後的結果

1. 'use strict';
2.  
3. var sayHello = function sayHello(userName, age) {
4. console.log(userName + ' age is ' + age);
5. };

End

Web開發之路系列文章

菜單加載中...

JavaScript ECMAScript版本介紹的更多相關文章

1. Xamarin Android教程Android基本知識版本介紹與系統介紹

   Xamarin Android教程Android基本知識版本介紹與系統介紹 Xamarin Android教程Android基本知識版本介紹與系統介紹,開發Andriod有時候不像iOS同樣輕鬆,由於 ...

2. Cloudera Hadoop什麼是CDH及CDH版本介紹

   本文引用自:Cloudera Hadoop什麼是CDH及CDH版本介紹http://www.aboutyun.com/thread-6788-1-1.html(出處: about雲開發) 雲技術新興的 ...

3. mysql學習之-三種安裝方式與版本介紹

   MYSQL版本介紹 mysql分alpha,beta,rc,GA四個版本. alpha  暗示這是一個以展現新特性爲目的的版本,存在比較多的不穩定因素,還會向代碼中添加新新特性beta 之後的beta ...

4. Hadoop發行版本介紹

   前言 從2011年開始,中國進入大數據風起雲涌的時代,以Hadoop爲表明的家族軟件,佔據了大數據處理的廣闊地盤.開源界及廠商,全部數據軟件,無一不向Hadoop靠攏.Hadoop也從小衆的高富帥領域 ...

5. Ubuntu版本介紹

   轉自Ubuntu版本介紹 常常有人問起Ubuntu的版本選擇問題,論壇中雖有帖子說起,但不是很詳細,不集中,我就嘗試把Ubuntu上的這點東東翻譯一下,供你們參考,水平有限,敬請包涵.指正.  Ubu ...

6. Linux主要發行版本介紹

   Linux主要發行版本介紹 1．Red Hat Linux Red Hat是一個比較成熟的Linux版本,不管在銷售仍是裝機量上都比較可觀.該版本從4.0開始同時支持Intel.Alpha及Sparc ...

7. JavaScript Date對象介紹

   原文:JavaScript Date對象介紹 Date 日期和時間對象 1. 介紹 Date對象,是操做日期和時間的對象.Date對象對日期和時間的操做只能經過方法. 2. 構造函數 2.1 new ...

8. eclipse各版本介紹

   記錄下吧!以避免之後下載時候又不知道下載那個: Eclipse IDE for Java Developers 是爲java開發的 Eclipse IDE for Java EE Developers  ...

9. android studio的Beta, Canary, Dev, Stable四種Channel版本介紹、分析與選擇

   一.概述 在Android Studio下載官網上,有以下介紹: ` Android Studio's built-in update mechanism can be set to receive ...

隨機推薦

1. gulp-uglify 與gulp.watch()配合使用時遇到的重複壓縮問題

   今天學習gulp時候,用到gulp-uglify壓縮js模塊,遇到的一個問題-當用gulp.watch來監聽js文件的變更時出現重複壓縮的問題 目錄結構以下: gulpfile.js代碼以下: var ...

2. Linux-磁盤及網絡IO工做方式解析

   PIO與DMA 有必要簡單地說說慢速I/O設備和內存之間的數據傳輸方式. PIO咱們拿磁盤來講,很早之前,磁盤和內存之間的數據傳輸是須要CPU控制的,也就是說若是咱們讀取磁盤文件到內存中,數據要通過C ...

3. [.net 面向對象編程基礎] (21) 委託

   [.net 面向對象編程基礎] (20)  委託 上節在講到LINQ的匿名方法中說到了委託,不過比較簡單,沒了解清楚不要緊,這節中會詳細說明委託. 1. 什麼是委託? 學習委託,我想說,學會了就感受簡 ...

4. [持續更新]UnsatisfiedLinkError常見問題及解決方案

   想必不少開發者和咱們同樣,遇到過許多UnsatisfiedLinkError的困難,着實使人頭疼,如今總結一下,但願能幫助更多的人. 常見錯誤 lib庫不一樣目錄下的SO文件良莠不齊. lib庫目錄下的 ...

5. $.ajax()方法詳解及實例

   1.url: 要求爲String類型的參數,(默認爲當前頁地址)發送請求的地址. 2.type: 要求爲String類型的參數,請求方式(post或get)默認爲get.注意其餘http請求方法,例如 ...

6. MyBatis+springMVC+easyUI (dataGirl)實現分頁

   頁面展現效果. 頁面代碼: <%@ page contentType="text/html;charset=UTF-8" language="java"  ...

7. WinCE開機Logo的實現(USB下載圖片到nandflash)

   WinCE開機啓動Logo使用Eboot讀取NandFlash中的圖片數據,而後顯示的方式.對於開機logo的方式網友http://jazka.blog.51cto.com/809003/664131 ...

8. detangle c++ symbols

   hust$ c++filt  _ZN1AC2Ev hust$A::A()

9. WAS維護經常使用操做

   0.WAS學習地址: http://www.open-open.com/doc/list/276?pn=1http://www.doc88.com/p-7498799200332.htmlhttp:/ ...

10. WCF入門教程（三）屬性標籤

    屬性標籤,成爲定義協議的主要方式.先將最簡單的標籤進行簡單介紹,以瞭解他們的功能以及使用規則. 服務協定標識,標識哪些接口是服務協定,哪些操做時服務協定的一部分,以及傳輸對象的定義.若是已經有所瞭解, ...