程式導師實驗計畫 [第三週] JavaScript 配備升級-ES6

程式導師實驗計畫

ECMAScript

ES5、ES6 指的是 JavaScript 的版本，會叫 ES 而不是 JS 是因為 JavaScript 是根據 ECMAScript 的規範下實現的程式語言，因此被稱為 ES5 、 ES6 。

所以 ECMAScript 是一種規範，而 JavaScript 是根據 ECMAScript 這套規範下實現的程式語言。

ES5

ECMAScript 第五版 

strict 模式

嚴格模式，提供開發者語法嚴格，語法受限的模式( strict mode )，目的是為了讓開發者開發「具穩定性的 JavaScript」。

  • 透過拋出錯誤的方式消除被忽略的錯誤
  • 修正會阻礙 JavaScript 引擎進行最佳化的錯誤
  • 止使用一些有可能被未來版本 ECMAScript 定義的語法

JavaScript 參考文件 - Strict mode

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
2
3
4
5
var link = function(height = 50, color = "red", url = "http://azat.co") {
  //...
  console.log(height, color, url);
  // 50 'red' 'http://acat.co'
};

Template Literals - 板模字串符

板模字串，可以在字串中嵌入數。

1
2
3
4
5
6
7
var first = "Luke";
var last = "Lin";

var name = `my name is ${first} ${last}.`;

console.log(name);
// my name is Luke Lin.

Multi-line Strings - 多行字串輸出

透過 backticks 鍵，能夠進行多行的字串輸出。

backticks 鍵為鍵盤數字鍵1左邊的 **** 按鍵`

1
2
3
4
5
6
7
8
var miltiLine = `first line
second line`;

console.log(miltiLine);
/*
irst line
second line
*/

Destructuring Assignment - 解構賦值

通過配對陣列索引值，或是物件的key鍵來對變數賦值。

1
2
3
4
var [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); //[ 3, 4, 5 ]

Enhanced Object Literals - 物件實字

當屬性名稱與宣告的變數一模一樣，ES6 提供了簡寫的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getPerson(name, number) {
  return {
    name: name,
    number: number
  };
}

function getPersonInES6(name, number) {
  return {
    name,
    number
  };
}

console.log(getPerson("Luke Lin", "104"));
// { name: 'Luke Lin', number: '104' }
console.log(getPersonInES6("Luke Lin", "104"));
// { name: 'Luke Lin', number: '104' }

Arrow Functions in ES6 - 箭頭函式

箭頭函式可以完美的取代函式表達式，它會在this的內部建立一個新版本的函式。

1
2
3
4
5
([param] [, param]) => {
   statements
}

param => expression

箭頭函式- JavaScript | MDN

Promises in ES6 -

Promise 物件代表一個即將完成、或失敗的非同步操作，以及它所產生的值。

使用 Promise - JavaScript | MDN

  • Block-Scoped Constructs Let and Const 塊級作用域

宣告變數的新用法，兩者皆只在該{}區塊內有效。

let ： 只會對目前的{}區塊內有效，可重複定義。
const : 宣告時必須初始化，且不能更改。

變數、常數與命名

  • Classes - 類別

提供一個更簡潔的語法來建立物件和處立繼承。

1
2
3
4
5
6
class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Classes - JavaScript | MDN - Mozilla

一份彙整了在 JavasScript 中被普遍使用的風格指南 - 建構子

  • Modules - 模組

引入跟導出檔案的方法

1
2
import {port, getAccounts} from ‘module’
console.log(port) // 3000

一份彙整了在 JavasScript 中被普遍使用的風格指南 - 模組

babel

Babel 是一個轉譯器，主要用於在當前和較舊的瀏覽器或環境中將ECMAScript 2015+代碼轉換為 JavaScript 的向後兼容版本。

What is Babel?

指南參考：

 以上就是這篇的筆記內容

程式導師實驗計畫第三期