JavaScript ECMAScript版本介紹

来源:http://www.cnblogs.com/polk6/archive/2017/12/05/js-ECMAScript.html
-Advertisement-
Play Games

介紹ECMAScript各版本的內容,以及使用Babel把ES6及以上的代碼編譯為ES5. ...


 

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

npm install --save-dev gulp-babel @babel/core @babel/preset-env

 

2) 編寫一段ES6的代碼

創建一個app.js文件,並寫入以下代碼:

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

 

3) 編寫gulp文件

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function() {
    return gulp
        .src('js/app.js')
        .pipe(
            babel({
                presets: ['env']
            })
        )
        .pipe(gulp.dest('dist'));
});

 

4) 運行gulp後的結果

'use strict';

var sayHello = function sayHello(userName, age) {
    console.log(userName + ' age is ' + age);
};

 

==================================系列文章==========================================

本篇文章:3.12 JavaScript ECMAScript版本介紹

Web開發之路系列文章

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android SDK版本號 與 API Level 對應關係如下表: Code name Version API level (no code name) 1.0 API level 1 (no code name) 1.1 API level 2 2008 年9月發佈的Android第一版 Cu ...
  • 最近一直在研究monkey測試。網上資料很多,但都是一個抄一個的。原創的很少 我把檢查app記憶體泄漏的情況梳理一下: 參考資料: Monkey測試策略:https://testerhome.com/topics/597 Android Monkey測試詳細介紹:http://www.jikexuey ...
  • 本章目標 一、掌握基本UI組件中文本和圖像組件的使用 二、掌握基本UI組件中各種按鈕類型組件的使用 一、UI組件介紹 Android的UI組件分為兩大類: 1、佈局組件(ViewGroup)。 --用來定義界面組件之間的位置和關係 2、交互組件(View)。 --用來實現與用戶的交互。 二、文本控制項 ...
  • DOM 是為了操作文檔出現的 API,document 是其的一個對象; BOM 是為了操作瀏覽器出現的 API,window 是其的一個對象。 使用下圖講解: 歸DOM管的: E區:即document 歸BOM管的: A區:瀏覽器的地址欄,書簽欄等 B區:右鍵菜單 C區:document載入時的狀 ...
  • 1. 標準盒模型: 因為 ,所以,同樣寬度的內容因為 和`padding box sizing:border box content_box_width = width` 。 2. 彈性盒模型: 彈性佈局相比傳統的塊佈局要簡潔很多,但是實現原理差別挺大的。首先,要想進行彈性佈局,要設置 ,確定彈性容 ...
  • SVG作為時下比較新穎的技術標準,已經建立了很多基於SVG的前端項目。由於SVG在繪製路徑上非常靈活,我們將很多網頁上的元素使用SVG來繪製而成,有各種人物、小圖標、小動畫等等。今天我們收集了10個非常新奇有趣的SVG繪製動畫,這些動畫大部分都是使用SVG結合一定的CSS3特性實現而成,效果讓人大為 ...
  • 以前遇到一個問題,頁面編碼沒問題,後臺返回的編碼也沒問題,但是ajax返回的json就是不講道理的亂碼,查看過http響應頭信息發現請求編碼與頁面編碼不一致 網上搜了好多方法,包括改編碼,重新建頁面都不行! 最後解決方法: 加上了 contentType: "application/x-www-fo ...
  • 4. 前端工程化開發實踐 由於Nodejs 、npm的環境搭建往上很多,這裡就不過多介紹它們了。 這裡我們將更多介紹FIS3、RequireJS 、r.js。 4.1 模塊化開發: 4.1.1 開發目錄結構 左圖為開發目錄結構, 右圖中新增js 目錄、fis-conf.js文件,js 目錄用來存放r ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...