Day15-淺談JS版本差異！ES5、ES6

Published in

Andy的技術分享blog

8 min readNov 24, 2019

前言

大家在查 JavaScript 相關文章的時候不曉得有沒有看過所謂的 ES5 以及 ES6 ，點進去看後發現原來 ES5 指的是 JavaScript 的版本，這時候心裡難免會想一下：為啥是 ES5 而不是 JS5 啊？其實這跟 JavaScript 的標準規範有關。

ECMAScript

Script 代表著腳本，而 ECMAScript 提供了腳本語言需要遵守的規則、細節和規範， JavaScript 是實現 ECMAScript 的規範後所誕生出來的語言，也因此 ECMAScript 常常被稱為 JavaScript ，但兩者其實是有差別的喔！

根據上面的文字應該比較能了解為何要叫 ES5 而不是叫 JS5 了。

ES5

ES5 這個版本主要新增了兩個項目：

嚴格模式(“use strict”)

大家都知道 JavaScript 其實相較於其他的語言已經算是非常不嚴格了，不但變數型態為弱型別甚至可以不用宣告變數型態直接寫變數名稱就好，也讓一些寫習慣強型別語言的工程師相當不習慣，因此在 ES5 的時候嚴格模式出來了。

要使用嚴格模式要先在檔案的開頭寫上 "use strict" 之後的程式碼才會使用嚴格模式，嚴格模式定義了非常多，這裡就不一一列舉了，想看更多嚴格模式的定義可以到這個網站。

Array/Object操作方法

ES5 提供了非常多 Array 以及 Object 的操作方式，這邊筆者就簡單的列舉幾個常用的操作方法，想知道更多的操作方法可以參考這個網站。

Array.forEach(function(element) {})：將陣列內的元素抓取出來，並可對其操作。

var arr = [1, 2, 3]; 
arr.forEach(function(element) {   
  console.log(element);    // 1 2 3 
});

Array.map(function(element) {})：將陣列內的元素抓取出來，並可對其操作，並在function執行結束後回傳一個新的陣列。

var arr = [1, 2, 3]; 
var arr2 = arr.map(function(element) {   
  return element * 2; 
}); 
console.log(arr);    // [1, 2, 3] 
console.log(arr2);   // [2, 4, 6]

Array.filter(function(element) {})：過濾陣列內的元素，並回傳過濾後的新陣列。

var arr = [1, 2, 3]; 
var arr2 = arr.filter(function(element) {
  return element < 3; 
}); 
console.log(arr2);     // [1, 2]

Array.reduce(function(accumulator, currentValue) {})：將陣列內的元素全部加總。

var arr = [1, 2, 3]; 
var sum = arr.reduce(function(accumulator, currentValue) {   
  return accumulator += currentValue; 
}); 
console.log(sum);    // 6

Array.indexOf(element)：抓取陣列內元素的 index。

var arr = [1, 2, 3]; 
var index = arr.indexOf(1); 
console.log(index);     // 0

JSON.parse(JSONstring)：將一個長得很像 JSON 的字串轉型成 JSON 物件。

var JSONString = '{"key": 1}'; 
var JSONObject = JSON.parse(JSONString); 
console.log(JSONObject);    // {"key": 1}

JSON.stringify(JSONObject)：將 JSON 物件轉型成字串。

var JSONObject = {"key": 1}; 
var JSONstring = JSON.stringify(JSONObject);
console.log(JSONstring);    // '{"key": 1}'

Object.keys(JSONObject)：回傳一個新的陣列其值為 Object 的 key 。

var JSONObject = {"key": 1}; 
var keyArray = Object.keys(JSONObject); 
console.log(keyArray);    // ["key"]

ES6

ES6 新增的則是一些寫法上的改變，讓寫法變得更精簡，以及新增了非同步專用的 Promise 、 JS 模組化必備的 ES6 Modules 、 Classes ，本篇文章並不會詳細介紹 Promise 以及 ES6 Modules ， Promise 會在之後的 非同步 文章進行闡述，而 ES6 Modules 會在之後的 JS 模組化 文章加以闡述。

const & let

改變變數型態宣告方式，從單純的 var 增加為定量 const 以及變量 let 。

const a = 123; 
let b = 123; 
a = 456;      // 錯誤a為定量其值不可改變 
b = 456;      // b的值已被改變成456

Template Literals

改變了以往字串的寫法，不用再用 + 來進行字串與變數的結合。

const name = 'Andy';// ES5寫法 
var str = 'Hello' + name + "！";  // ES6寫法 
const str = `Hello ${name}！`;

也可以多行一起串接！

// ES5寫法 
var html = "<div>"; 
html +=    "  <p>Hello World</p>"; 
html +=    "</div>";  // ES6寫法 
const html = `   
  <div>     
    <p>Hello World</p>   
  </div> 
`

Destructuring Assignment

用更簡短的方式宣告陣列或物件的元素的值，不過物件比較麻煩一點，必須要讓變數名稱取名跟 key 一樣的名稱，陣列則不用。

// ES5寫法 
var arr = [1, 2, 3]; 
var obj = {d: 1, e: 2, f: 3}; 
var a = arr[0],     
    b = arr[1],     
    c = arr[2]; 
var d = obj.d,     
    e = obj.e,     
    f = obj.f; 
console.log(a, b, c);    // 1 2 3 
console.log(d, e, f);    // 1 2 3  // ES6寫法 
const arr = [1, 2, 3]; 
const obj = {d: 1, e: 2, f: 3}; 
const [a, b, c] = arr;   // a = arr[0], b = arr[1], c = arr[2] 
const {d, e, f} = obj;   // d = obj.d, e = obj.e, f = obj.f 
console.log(a, b, c);    // 1 2 3 
console.log(d, e, f);    // 1 2 3

Object Literals

假如 JSON 內的元素其 key 與 value 名稱一樣，可以省略 key 直接寫 value 名稱即可。

// ES5寫法 
var name = 'Andy'; 
var obj = { 
  name: name 
};  // ES6寫法 
const name = 'Andy'; 
const obj = { name };

Arrow Functions

讓匿名函式寫法更簡略，寫法為 () => {} ，假如省略大括號的話，代表直接 return 第一行程式碼，假如餐數只有一個還可以省略小括號。

// ES5寫法 
var arr = [1, 2, 3]; 
var mapArr = arr.map(function(element) {   
  return element * 2; 
});  
// ES6寫法 
const arr = [1, 2, 3]; 
const mapArr = arr.map(element => element * 2);

Classes

Classes 為新的概念，用於建立物件以及物件繼承上，在使用上必須先 new 一個物件出來才可使用。

class square {   
  constructor(width, height) {      
    this.width = width;      
    this.height = height;   
  }   
  calcArea() {     
    return this.width * this.height;   
  } 
} const square1 = new square(10, 10); 
const area = square1.calcArea(); 
console.log(area);    // 100

ES6 Modules

ES6 Modules 為新的概念，用於 JS 模組化 ，這邊先有個小認識即可，後續的 JS 模組化 文章會加以闡述。

Promise

此為非同步專用，這邊先稍微認識有這個物件即可，後續的非同步文章會加以闡述此物件。

總結

今天也沒有總結小練習，主要是讓讀者在開始專研 JavaScript 之前可以先稍微了解一下 JavaScript 的小歷史，筆者未來的 JavaScript 練習也都會用 ES6 的方式撰寫，最後就讓我們開始準備進入 JavaScript 的世界吧！

Day15-淺談JS版本差異！ES5、ES6

前言

ECMAScript

ES5

ES6

總結

Written by Andy Chen