c
c
class
Search…
ES6,ES7,ES8
以下因Node.js版本不一定支援,所以可下載chrome canary並打開devtool輸入程式碼
許多比較新的js功能會在Chrome Canary開放
以下將會介紹比較常用到的幾種方法

ES6

全名為ECMAScript 6.0或稱ECMAScript 2015

#const

用來定義常數,定義後不可更改
1
const a = 12;
2
3
然後輸入
4
a = 13;
5
將會產生錯誤
Copied!

#let

一般變數的作用域是以function來區分,在同層function的同名變數如果重複給值,則會覆蓋前項,包含在if內,但如果if的同名變數是用let宣告,則不會影響到if外的變數
1
function letTest() {
2
let x = 1;
3
if (true) {
4
let x = 2; // different variable
5
console.log(x); // 2
6
}
7
console.log(x); // 1
8
}
Copied!
let的作用範圍會被侷限在if內,而不會改到外面的同名變數

#spread syntax

功能:把Array,以逗點分隔當成多個值
1
function myFunction(x, y, z) { console.log(x) }
2
var args = [0, 1, 2];
3
myFunction(...args); //相同於myFunction(1,2,3)
Copied!

#Destructuring assignment(解構賦值)

功能:對應兩個Array或Object並把同名的值附上
1
var o = {p: 42, q: true};
2
var {p: foo, q: bar} = o;
3
4
console.log(foo); // 42
5
console.log(bar); // true
Copied!
1
let obj = {x: 1, y: 2}; let {x, y} = obj; // x = 1, y = 2
Copied!
1
var a, b;
2
3
[a, b] = [1, 2];
4
console.log(a); // 1
5
console.log(b); // 2
Copied!

#Arrow function

功能:簡化匿名function寫法,但會失去this屬性
1
//以前寫法
2
setTimeout(function(){ console.log('okok'),500});
3
//箭頭寫法
4
setTimeout(() => console.log('okok'),500);
Copied!

#Object.assign()

功能:結合兩個物件
1
var obj = { a: 1 };
2
var copy = Object.assign({b: 12}, obj);
3
console.log(copy);
Copied!

#Promise

1.new Promise傳入一個函數,該函數擁有兩個參數
2.這兩個參數均為函數,分別為resolve()和reject()
1
var promise = new Promise(function(resolve, reject) {
2
//first execute
3
4
if (/* 如first execute成功 */){
5
resolve(value);//發出resolve
6
} else {
7
reject(error);//發出reject
8
}
9
});
Copied!
4.使用resolve()代表成功,使用reject()代表first execute 部分沒成功,是否成功是由我們自己去判定寫邏輯
5.promise生成後可用then,執行成功或失敗鎖要執行的東西
1
promise.then(function(value) {
2
// success//接收到resolve後會執行
3
}, function(value) {
4
// failure //接收到reject後會執行
5
});
Copied!
範例:
貼上以下範例,之後把改變value = 1+2即可看到console的改變
1
var promise = new Promise(function(resolve, reject) {
2
//first execute
3
var value = 1+1;
4
if (value === 2){
5
resolve(value);//發出resolve
6
} else {
7
reject(error);發出reject
8
}
9
});
10
11
promise
12
.then(function(value) {
13
console.log('function被resolve了!')
14
})
15
.catch(function(err) {
16
console.log(err)
17
})
Copied!

#Promise.all

把許多promise的函式組成一個Array放入Promise.all內,當裡面每個都resolve或其中一個被reject時才會執行後面的then方法
1
Promise.all([promises...])
2
.then(function (posts) {
3
// ...
4
}).catch(function(reason){
5
// ...
6
});
Copied!

#for of

1
let iterable = [10, 20, 30];
2
3
for (let value of iterable) {
4
value += 1;
5
console.log(value);
6
}
Copied!

#Generator

功能:也是用來處理異步函式,讓他順序執行 不一樣的地方在於function後的星號,和yield
1.
1
function* Fruit() {
2
yield 'apple';
3
yield 'banana';
4
return 'ending';
5
}
6
7
var a = Fruit();
Copied!
之後輸入a.next();

#class

說明:即為一般物件導向程式的class寫法,以前是用prototype的方法來寫繼承,有class後即可使用extend
1.類別如果有值或是其他建構時即擁有的屬性可寫在constructor
2.類別function 可直接寫出名字即可speak() {}
3.class繼承用extend
4.繼承後的子代必須先在constructor內寫super()之後才可用this
5.使用super存取父帶方法super.IamParentMethod()
1
class Cat {
2
constructor(name) {
3
this.name = name;
4
}
5
6
speak() {
7
console.log(this.name + ' makes a noise.');
8
}
9
}
10
11
class Lion extends Cat {
12
speak() {
13
super.speak();
14
console.log(this.name + ' roars.');
15
}
16
}
Copied!
之後輸入Lion.prototype

export

我們在寫Node.js時使用的require是屬於CommonJS體系
但在ES6我們不使用require而使用import
(兩者亦可混合使用,參照webpack章節)

下面先介紹export用法

export用來輸出單個變數或function
1
export var fruit = 'apple';
2
export var person = 'John';
3
4
export function multiply (x, y) {
5
return x * y;
6
};
Copied!
也可寫成如下
1
var fruit = 'apple';
2
var person = 'John';
3
4
export {fruit,person,multiply};
Copied!
可用as改變import時的名字
1
export {fruit as f,person as p,multiply as m};
Copied!
最後
注意:export要放在function外不然會出錯

再來講import

1
import {fruit, person, multiply} from './list.js';
Copied!
也可用as改變引入後的名稱
1
import {fruit as f, person as p, multiply as m} from './list.js';
Copied!
也可一次載入
1
import * as list from './list.js';
Copied!

export default

上面的export方法在import時需要知道該變數名稱才可引用,為了解決,我們可使用export default
a.js
1
export default function () {
2
console.log('I'm banana');
3
}
Copied!
b.js
1
import customName from './a.js';//可自行指定名稱
2
customName(); // 'I'm banana'
Copied!
我們在React通常會如下寫
1
// Component1.js
2
export default class { ... }
3
4
// main.js
5
import Component1 from './Component1.js'
Copied!

ES7

全名為ECMAScript 7.0或稱ECMAScript 2016

#Rest parameters destructuring

功能:動態指定參數個數
1
function fun1(...theArgs) {
2
console.log(theArgs.length);
3
}
4
5
fun1(); // 0
6
fun1(5); // 1
7
fun1(5, 6, 7); // 3
Copied!

#Array.includes

功能: 取得Array中是否包含某一個元素
1
var a = [1, 2, 3];
2
a.includes(2); // true
3
a.includes(4); // false
Copied!

ES8

全名為ECMAScript 8.0或稱ECMAScript 2017
Async與Await為ES8特性,但時常被誤以為是ES7

#Async與Await

可以簡單地在任何function前加上async字樣,之後把裡面會需要異步的function前加上await即可
後面用then()即可去進行步驟控制
1
async function getTrace () {
2
pageContent = await fetch('www.google.com', {
3
method: 'get'
4
})
5
return pageContent
6
}
7
8
getTrace()
9
.then((data) => {
10
console.log('----')
11
console.log(data)
12
})
Copied!

#padEnd

功能:將字串補足位數至與第一個參數相同
1
'abc'.padEnd(10); // "abc "
2
'abc'.padEnd(10, "foo"); // "abcfoofoof"
3
'abc'.padEnd(6,"123456"); // "abc123"
Copied!

#padStart

功能:將字串補足位數至與第一個參數相同,但方向為從頭開始
1
'abc'.padStart(10); // " abc"
2
'abc'.padStart(10, "foo"); // "foofoofabc"
3
'abc'.padStart(6,"123465"); // "123abc"
Copied!

#Object.values

功能:取得所有物件中的值,以Array表示
1
var obj = { foo: "bar", baz: 42 };
2
console.log(Object.values(obj)); // ['bar', 42]
3
4
// array like object
5
var obj = { 0: 'a', 1: 'b', 2: 'c' };
6
console.log(Object.values(obj)); // ['a', 'b', 'c']
Copied!

#Object.entries

功能:把物件中的key和value每組分別組成一個Array
1
var obj = { foo: "bar", baz: 42 };
2
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
3
4
// array like object
5
var obj = { 0: 'a', 1: 'b', 2: 'c' };
6
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
Copied!
Last modified 1yr ago