Ting's Square 程式寫作之路

[Day21] JS: javascript ES6

Total : 1998 words.

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


目錄:


let 變數

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

javascript

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

console.log(name);

console

"kitty"
undefined

letvar相比的好處

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. letvar同時使用,變數會被全域的var決定

javascript

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

}

console.log(i);

console

undefined //而不是3

4. letvar不同之處:變數的有效範圍不同

設定為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筆記