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

milletbard

2019-11-02

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 - 預設參數

當函式沒有給參數數值，函式會使用預設的數值。

var link = function (height = 50, color = "red", url = "http://azat.co") {
  //...
  console.log(height, color, url);
  // 50 'red' 'http://acat.co'
};

Template Literals - 板模字串符

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

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左邊的 **** 按鍵`

var miltiLine = `first line
second line`;

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

Destructuring Assignment - 解構賦值

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

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 提供了簡寫的方式。

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的內部建立一個新版本的函式。

([param] [, param]) => {
   statements
}

param => expression

箭頭函式- JavaScript | MDN

Promises in ES6 -

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

使用 Promise - JavaScript | MDN

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

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

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

變數、常數與命名

Classes - 類別

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

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?

指南參考

以上就是這篇的筆記內容