歷史介紹
- ECMAScript 6 (簡稱 ES6),是 JavaScript 語言新一代的標準,在 2015 年 6 月正式發佈。
- ES6 其實是一個泛指的名詞,泛指 ES5.1 版以後的新一代 JavaScript 語言標準,涵蓋了 ES2015, ES2016, ES2017 等等,ES2015 則是正式名稱,特指該年度發佈的語言標準,現在常聽到人家說的 ES6,一般是指 ES2015 標準。
- ES6 提出了很多新的語法,使得 JavaScript 變得更強大,更適合用來寫大型的應用程式!
- ES6 新增的則是一些寫法上的改變,讓寫法變得更精簡,以及新增了非同步專用的 Promise 、 JS 模組化必備的 ES6 Modules 、 Classes
以下是 ES6 新的特性:
功能介紹
1. Block Scope 塊級作用域 – let, const
在 ES6 之前,JavaScript 用 var 關鍵字來宣告一個變數,其作用範圍是 function scope,在 ES6 中引入了兩個新的語法 let 和 const 讓你可以宣告塊級作用範圍 (block scope) 的變數。
所謂的 block scope 就是變數的作用範圍只存在兩個大括號 { } 中。
let
let 關鍵字用來宣告一個 block scope 變數。
- let 可以宣告只能在目前區塊、階段或表達式中作用的變數。
- 而 var 則是定義了一個全域變數,或是在整個 function 而不管該區塊範圍。
functionvarTest(){var x =1;{var x =2;// 這裡的 x 與 function 區塊內部的 x 是一樣的,因此會影響 function 區塊內所有的 x
console.log(x);// 2}
console.log(x);// 2}functionletTest(){let x =1;{let x =2;// 這裡的 x 與 function 區塊內部的 x 是不同的,只會作用在這層 block 區塊中
console.log(x);// 2}
console.log(x);// 1}
在上列例子裡的最前行 let 和 var 不同,let 並不會在全域物件中建立變數。舉例來說:
var x ='global';let y ='global';
console.log(this.x);// "global"
console.log(this.y);// undefined
const 常數
const 關鍵字跟 let 類似,也可以用來宣告一個 block scope 變數,不同的是,const 宣告的變數其指向的值不能再被改變。
{constA=10;// 會發生錯誤,常數值不能再被改變// TypeError: Assignment to constant variableA=10;// 陣列是一個有趣的例子constARR=[1,2];// 可以改變陣列裡的內容// 因為 ARR 變數值沒有改變,還是指向同一個陣列ARR.push(3);// [1, 2, 3]
console.log(ARR);// 錯誤,不能改常數值// TypeError: Assignment to constant variableARR=123;// 但可以改變陣列裡面的內容ARR[0]=4;// [4, 2, 3]
console.log(ARR);}
2. JavaScript ES6 Arrow Functions 箭頭函數
ES6 允許我們用箭頭 => 來更方便簡短的定義一個函數,這種語法稱作 Arrow Functions。
Arrow Functions 由參數列 (…) 接著 => 和函數內容所組成。
// 原始樣貌 function(){};// ES6=()=>{};
例1:
// 傳統標準的函數宣告語法varmultiply=function(a, b){return a * b;};// 使用 Arrow Functions 的語法varmultiply=(a, b)=> a * b;// 20multiply(2,10)
例2:
let numbers =[1,2,3];// callback 用 Arrow Functions 的寫法更精簡let doubles = numbers.map(num=>{return num *2;});// [2, 4, 6]
console.log(doubles);
3. JavaScript ES6 Default Function Parameters
在 ES6 中,JavaScript 函數的參數終於可以有預設值了。
// 傳統寫法functionmultiply(a, b){
b =(typeof b !=='undefined')? b :1;return a * b;}multiply(5,2);// 10multiply(5,1);// 5multiply(5);// 5// ES6寫法multiply=(a, b = 1)=>{return a * b;}multiply(5,2);// 10multiply(5,1);// 5multiply(5);// 5
4. JavaScript ES6 Spread/Rest Operator 運算子
ES6 引入了新的運算子 (operator) … (三個點號) 來表示展開或其餘運算子。
Spread Operator 展開運算子
Spread Operator 可以用在執行函數時的參數列上,它可以將一個陣列 (array) 展開,轉為多個逗點隔開的獨立參數:
範例:
// 例1functionfoo(x, y, z){
console.log(x, y, z);}var arr =[1,2,3];// 輸出 1 2 3// 等同於執行 foo(1, 2, 3)foo(...arr);// 例2functionfoo2(a, b, c, d, e){
console.log(a, b, c, d, e);}var arr2 =[3,4];// 輸出 1 2 3 4 5// 等同於執行 foo(1, 2, 3, 4, 5)foo(1,2,...arr2,5);// 例3var parts =['shoulders','knees'];// 將 parts 展開在 lyrics 的元素中var lyrics =['head',...parts,'and','toes'];// lyrics 的值會變成 ["head", "shoulders", "knees", "and", "toes"]// 例4 var ary1 =[4,5,6];var ary2 =[1,2,3];// ary1 會變成 [1, 2, 3, 4, 5, 6]
ary1 =[...ary2,...ary1];
5. JavaScript ES6 Object Literal Extensions 物件實字的擴展
ES6 的新語法讓 object literal 可以寫得更簡短清楚。
如果屬性名稱和變數名稱一樣,可以在物件裡面只使用變數,變數的名城也會被當作是屬性名稱,而變數的值會被當作屬性值。
用法:
var obj ={
foo,
bar
};
上面的語法同等於:
var obj ={foo: foo,bar: bar
};
Computed property keys 計算得出的屬性名稱
ES6 允許使用表達式 (expression) 作為屬性的名稱,語法是將 expression 放在中括號 [ ] 裡面,透過 [ ] 的語法,我們的屬性名稱就可以放入變數,達到動態產生屬性名稱的效果。
var prefix ='es6';var obj ={// 計算屬性[prefix +' is']:'cool',// 計算方法[prefix +' score'](){
console.log(100);}};// 顯示 cool
console.log(obj['es6 is']);// 顯示 100
obj['es6 score']();
6. JavaScript ES6 Octal/Binary Literals 八進位/二進位表示法
ES6 支援 octal literal 和 binary literal。
可以直接輸入下方兩種樣式
二進位表示法 0b 或 0B 表示。
八進位表示法0o 或 0O 表示。
var oValue =0o10;// 8
console.log(oValue);var bValue =0b10;// 2
console.log(bValue);
7. JavaScript ES6 Array and Object Destructuring Assignment 陣列和物件的解構賦值
ES6 的 destructuring assignment,可以用來從陣列或物件中抽取 (destructuring) 值出來指定 (assignment) 給變數。
ES6以前 在給予值只能用指定的方式
var one ='one';var two ='two';var three ='three';
現在 ES6的寫法
var foo =["four","five","six"];var[four, five, six]= foo;// 從 array 中提取值,然後按照對應的位置,指定給相應的變數// "four"
console.log(four);// "five"
console.log(five);// "