程式導師實驗計畫 [第三週] JavaScript 配備升級-ES6
ECMAScript
ES5、ES6 指的是 JavaScript 的版本,會叫 ES 而不是 JS 是因為 JavaScript 是根據 ECMAScript 的規範下實現的程式語言,因此被稱為 ES5 、 ES6 。
所以 ECMAScript 是一種規範,而 JavaScript 是根據 ECMAScript 這套規範下實現的程式語言。
ES5
ECMAScript 第五版
strict 模式
嚴格模式,提供開發者語法嚴格,語法受限的模式( strict mode ),目的是為了讓開發者開發「具穩定性的 JavaScript」。
- 透過拋出錯誤的方式消除被忽略的錯誤
- 修正會阻礙 JavaScript 引擎進行最佳化的錯誤
- 止使用一些有可能被未來版本 ECMAScript 定義的語法
Array
增加了處理陣列的方法。
- map
- forEach
- indexOf
- every
- some
- filter
- lastIndexOf
- isArray
- reduce
- reduceRight
文件都找得到用法
JavaScript | MDN - Array
ES6
ECMAScript 第六版,新增了一些 JavaScript 的新特性。
- Default Parameters in ES6
- Template Literals in ES6
- Multi-line Strings in ES6
- Destructuring Assignment in ES6
- Enhanced Object Literals in ES6
- Arrow Functions in ES6
- Promises in ES6
- Block-Scoped Constructs Let and Const
- Classes in ES6
- Modules in ES6
Default Parameters - 預設參數
當函式沒有給參數數值,函式會使用預設的數值。
1 | var link = function (height = 50, color = "red", url = "http://azat.co") { |
Template Literals - 板模字串符
板模字串,可以在字串中嵌入數。
1 | var first = "Luke"; |
Multi-line Strings - 多行字串輸出
透過 backticks 鍵,能夠進行多行的字串輸出。
backticks 鍵為鍵盤數字鍵
1左邊的 **
** 按鍵`
1 | var miltiLine = `first line |
Destructuring Assignment - 解構賦值
通過配對陣列索引值,或是物件的
key
鍵來對變數賦值。
1 | var [a, b, ...rest] = [1, 2, 3, 4, 5]; |
Enhanced Object Literals - 物件實字
當屬性名稱與宣告的變數一模一樣,ES6 提供了簡寫的方式。
1 | function getPerson(name, number) { |
Arrow Functions in ES6 - 箭頭函式
箭頭函式可以完美的取代函式表達式,它會在
this
的內部建立一個新版本的函式。
1 | ([param] [, param]) => { |
Promises in ES6 -
Promise 物件代表一個即將完成、或失敗的非同步操作,以及它所產生的值。
- Block-Scoped Constructs Let and Const 塊級作用域
宣告變數的新用法,兩者皆只在該{}區塊內有效。
let : 只會對目前的{}區塊內有效,可重複定義。
const : 宣告時必須初始化,且不能更改。
- Classes - 類別
提供一個更簡潔的語法來建立物件和處立繼承。
1 | class Polygon { |
Classes - JavaScript | MDN - Mozilla
一份彙整了在 JavasScript 中被普遍使用的風格指南 - 建構子
- Modules - 模組
引入跟導出檔案的方法
1 | import {port, getAccounts} from ‘module’ |
一份彙整了在 JavasScript 中被普遍使用的風格指南 - 模組
babel
Babel 是一個轉譯器,主要用於在當前和較舊的瀏覽器或環境中將ECMAScript 2015+
代碼轉換為 JavaScript 的向後兼容版本。
指南參考
以上就是這篇的筆記內容