javascript ES6

我們在前面章節介紹過 javascript 版本，ES5(2009)和ES6(2015)是市面上比較常見的版本，而ES6的語法讓javascript功能變得更完整，值得我們花點時間學習。

---

目錄:

• let 變數
  • let 與var相比的好處
    • 1. let
    • 2. var
    • 3. let和var同時使用，變數會被全域的var決定
    • 4. let與var不同之處：變數的有效範圍不同
    • ES6寫法
    • ES5寫法
• const 常數
• 解構
  • ES6 let { key, key } = 變數名稱
• 字串與變數的串接
  • ES6 使用 圍住整體，${變數}帶到字串裡
  • ES5 使用+ 串接字串與變數
• 箭頭函式
  • ES6 以箭頭=>代替函式function()
  • ES5 函式function()
• 陣列
  • ES6 forEach()
  • ES5 for迴圈
• 物件簡寫
  • ES6 key與value名稱相同，value可省略
  • ES5
• 物件導向的寫法
  • ES6 class-base
  • ES5 prototype-base
• 其他ES6常用語法
• ES6的瀏覽器支援程度
• 相關連結

---

let 變數

在ES5，使用var宣告變數 在ES6，使用let宣告變數

javascript

//var name = "kitty"; //在ES5，用var宣告變數
let name = "kitty"; //在ES6，用let宣告變數

console.log(name);

console

"kitty"
undefined

let 與var相比的好處

1. let

• 區域變數：被設成let的變數僅能作用在宣告的範圍裡面 （如下圖例：為迴圈內部）

for (let i = 0; i < 3; i++ ) {
	console.log(i);
}

console

0
1
2

• let如果未事前先宣告，就會出現錯誤

for (let i = 0; i < 3; i++ ) {

}
console.log(i);

console

"error"
"ReferenceError: i is not defined
    at nororos.js:7:38
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"

2. var

為全域變數，商業邏輯出錯時不容易debug

for (var i = 0; i < 3; i++ ) {

}

console.log(i);

等於

var i;
for (i = 0; i < 3; i++ ) {

}

console.log(i);

結果皆為:

console

3

3. let和var同時使用，變數會被全域的var決定

javascript

var i; //全域
for (let i = 0; i < 3; i++ ) {

}

console.log(i);

console

undefined //而不是3

4. let與var不同之處：變數的有效範圍不同

設定為let的變數，就算在迴圈內數值被改變，也只會作用在區域範圍內，不會影響到範圍外。

let i = 100;

for (let i = 0; i < 3; i++) {
	console.log('hi');
}
console.log(i);

console

"hi"
"hi"
"hi"
100 //仍然是100

設定為var的變數，在任何區域重新給值時，數值都會被改變

var i = 100;

for (var i = 0; i < 3; i++) {
	console.log('hi');
}

console.log(i);

console

"hi"
"hi"
"hi"
3 //100被改為3

ES6寫法

let i = 10;

for (let i = 0; i < 5; i++) {
	console.log('hi');
}
console.log(i);

console

"hi"
"hi"
"hi"
"hi"
"hi"
10 // 迴圈印5次hi，let變數仍為10

ES5寫法

var i = 10;

for (var i = 0; i < 5; i++) {
	console.log('hi');
}
console.log(i);

console

"hi"
"hi"
"hi"
"hi"
"hi"
5 // 迴圈印5次hi，var變數被改為5

const 常數

常數不可被更改

const age = 18;

console.log(age); //印出18

age = 20; //TypeError: 型別錯誤，不可指定變數值給常數

const age = 20; //SyntaxError: 變數名稱已經被宣告過了

console

18
"error"
"TypeError: Assignment to constant variable.
    at nororos.js:5:5
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"

"error"
"SyntaxError: Identifier 'age' has already been declared
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924
    at https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866"

解構

ES6 let { key, key } = 變數名稱

javascript

var hero = { name: '孫悟空', age: '18' };
let { name, age } = hero; // 從var指定為let變數

console.log(name);
console.log(age);

console

"孫悟空"
"18"

字串與變數的串接

ES6 使用 圍住整體，${變數}帶到字串裡

javascript

let name = "kitty";
console.log(`Hello, ${name}`); //"Hello, kitty"

ES5 使用+ 串接字串與變數

javascript

var name = "kitty";
console.log("Hello, " + name); //"Hello, kitty"

console

"Hello, kitty"

箭頭函式

e.g. 假設有一html語法如下：

  <a href="#" id="zone">Hello Zone</a>

ES6 以箭頭=>代替函式function()

javascript

document.querySelector('.zone').addEventListener('click', evt => {
  console.log('我被按了!');
});

function內的程式碼如果只有一行，可以連大括弧都省略

document.querySelector('.zone').addEventListener('click', evt => console.log('我被按了!'););

ES5 函式function()

javascript

document.querySelector('.zone').addEventListener('click', function(evt){
  console.log('我被按了!');
});

陣列

var friends = ['Ross','Joey','Chandler','Monica','Phoebe','Rachel'];

ES6 forEach()

javascript

friends.forEach(function(x){
	console.log(x);
});

用箭頭函數改寫:

friends.forEach( x => {
	console.log(x);
});

fuction內的程式碼只有一行，所以可以省略大括弧，變得更精簡

friends.forEach(x => console.log(x));

ES5 for迴圈

javascript

for (var i = 0; i < friends.length; i++){
	console.log(friends[i]);
}

console

"Ross"
"Joey"
"Chandler"
"Monica"
"Phoebe"
"Rachel"

物件簡寫

ES6 key與value名稱相同，value可省略

若物件的key與value的名稱設定相同，可只寫一次

function profile(firstName, lastName, age){

	return {
		firstName,
		lastName,
		age,
		fullName: function() {
			return lastName + firstName;
		}
	}
}

let p1 = profile('悟空', '孫', 18);
console.log(p1.fullName());

ES5

function profile(firstName, lastName, age){

	return {
		firstName: firstName,
		lastName: lastName,
		age: age,
		fullName: function() {
			return lastName + firstName;
		}
	}
}

var p1 = profile('悟空', '孫', 18);
console.log(p1.fullName());

console

"孫悟空"

物件導向的寫法

ES6 class-base

類別裡面可寫constructor建構子和一般的function

• 這裡的class是Syntax Sugar語法糖衣

class Pokemon {
	constructor(name, skill) {
		this.name = name;
		this.skill = skill;
	}
	attack(){
		console.log('攻擊!');
	}
}

var pikachu = new Pokemon('皮卡丘','電');
console.log(pikachu);
console.log(pikachu.attack()); //"攻擊!" undefined
pikachu.attack(); //"攻擊!"

console

[object Object] {
  name: "皮卡丘",
  skill: "電"
}

"攻擊!"
undefined
"攻擊!"

ES5 prototype-base

javascript

function Pokemon(name, skill) {
	this.name = name;
	this.skill = skill;
}

Pokemon.prototype.attack = function() {
	var sound = this.name.slice(0,2).repeat(2);
	console.log("攻擊吧！" + this.name + "！使出" + this.skill + "～" + sound);
}

var pikachu = new Pokemon("皮卡丘", "十萬伏特");
pikachu.attack();

console

"攻擊吧！皮卡丘！使出十萬伏特～皮卡皮卡"

其他ES6常用語法

• map
• reduce
• filter
• some
• find
• every

ES6的瀏覽器支援程度

可用轉譯套件轉成較低版本的javascript

相關連結

HackMD筆記