JavaScript - ming5ming

ES6 基礎#

物件字面量#

屬性值簡寫

var events = {
	listeners: listeners,
	listen: listen;
}

==>

var events = { listeners, listen }

可計算屬性名

若有變數 var expertise = 'journalism'
則可以為一個物件添加這樣一個屬性:

var person = {
	name: 'gui',
	age: 27
}

person[expertise] = {
	years: 5,
	interests: ['a', 'b', 'c']
}

方法定義

透過添加屬性為物件聲明方法

var emitter = {
	on: function (a, b) {
	...
	}
}

==>

var emitter = {
	on(a,b) {
	...
	}
}

箭頭函數#

作用域

箭頭函數不會創建新的作用域，作用域同父級作用域。不創建閉包

var timer = {
	seconds: 0,
	start() {
		setInterval(() => {
		this.seconds++
		},1000)
	}
}
//this 為 timer 塊的作用域的this
timer.start()

格式

如果返回物件時要用括號:

var objectFactory = () => ({ modular: 'es6' })

解構#

物件的解構

如果有這樣一個物件:

var character = {
	name: 'Bruce',
	pseudonym: 'Batman',
	metadata: {
		age: 34,
		gender: 'male'
		}
}

可以這樣獲取它的屬性:

var { pseudonym } = character

或者取它的別名:

var { pseudonym: pseudonymAlias } = character

深度解構:

var { metadata: { gender } } = character

深度解構並取別名:

var { meatadata: { gender: characterGender } } = character

陣列的解構

基本形式:

var lst = ['a', 'b', 'c']
var [x, y, z] = lst;

跳過:

var [x, , z] = lst;

預設值:

var [ x = 'x', , z = 'z'] = lst;

交換:

var left = 5
var right = 8
[left, right] = [right, left]

函數參數預設值

箭頭函數預設值:

var double = (input = 0) => input * 2

函數參數的解構

基本形式:

function foo({ brand = 'Volkswagen', make = 1999 }) {
	console.log(brand)
	console.log(make)
}
foo({ make: 2000 })
//<= 'Volkswagen'
//<= 2000
foo()
//<= 報錯

預設值:

function foo({ brand = 'Volkswagen', make = 1999 } = {} ) {
	console.log(brand)
	console.log(make)
	}
foo()
//<= 'Volkswagen'
//<= 2000

剩餘參數和擴展運算符#

剩餘參數
擴展運算符
將可遍歷物件轉換成陣列

[...'show me']
//<- ['s', 'h', 'o', 'w', ' ', 'm', 'e']

模板字面量#

使用反引號 ` 表示:

var text = `Hello "World"`

字串插值

`Hello, ${ 2 + 3 }`
//<- "Hello, 6"

標籤模板

//對於標籤模板
tag`Hello, ${name}. I am ${ emotion } to meet you!`
//有如下函數調用
tag(
	['Hello, ', '. I am ', ' to meet you!'],
	'Maurice',
	'thrilled'
)
//tag函數實現方式
function tag(parts, ...values) {
	return parts.reduce(
		(all, part, index) => all + values[index - 1] + part
	)
}

類，符號，物件和裝飾器#

類#

原型

function Fruit(name, calories) {
	this.name = name
	this.calories = calories
	this.pieces = 1
}

Fruit.prototype.chop = function () {
	this.pieces++
}
Fruit.prototype.bite = function (person) {
	...
}

類

class Fruit {
	constructor(name, calories) {
		this.name = name
		this.calories = calories
		this.pieces = 1
	}
	chop() {
		this.pieces++
	}
	bite(person) {
		...
	}
}

表達式聲明類

const Person = class {
	constructor(name) {
		this.name = name 
	}
}

工程函數創建類

const createPersonClass = name => class extends Person {
	constructor() {
		super(name)
	}
}

const JackePerson = createPersonClass('Jake')
const jake = new JackePerson()

可透過同一個 key 儲存讀取資料的類:

class LocalStorage {
	constructor(key) {
		this.key = key
	}
	get data() {
		return JSON.parse(localStorage.getItem(this.key))
	}
	set data(data) {
		localStorage.setItem(this.key, JSON.stringify(data))
	}
}

靜態方法

//原型鏈
function Person() {
	...
}
Person.isPerson = function (person) {
	return person instanceof Person
}
//類
class Person() {
	...
	static isPerson() {
		...
	}
}

類的繼承

//原型繼承
function Banana() {
	Fruit.call(this, 'banana', 105)
}
Banana.prototype = Object.creat(Fruit.prototype)
Banana.prototype.slice = function() {
	...
}
//類繼承 -> 使用 extends 關鍵字

Object.assign

合併物件操作

function md(input, options) {
	const config = Object.assgign({}, defaults, options)
}
//defaults先賦值給{}, 然後options再賦值給{}
//使用者提供的屬性就會被覆蓋

Object.assign 不會遞迴物件

Object.assign({}, { a: { b: 'c', d: 'e' } }, { a: { f: 'g' } })
// <- { a: { f: 'g' } }

更應該優先使用的賦值方法:

const grocery = { ...details }
// Object.assign({}, details)
const grocery = { type: 'fruit', ...details }
// Object.assign({ type: 'fruit' }, details)
const grocery = { type: 'fruit', ...details, ...fruit }
// Object.assign({ type: 'fruit' }, details, fruit)
const grocery = { type: 'fruit', ...details, color: 'red' }
// Object.assign({ type: 'fruit' }, details, { color: 'red' })

Object.is

NaN === NaN
// <- false
Object.is(NaN, NaN)
// <- true
-0 === +0
// <- true
Object.is(-0, +0)
// <- false

Object.setPrototypeOf

改變已有物件原型，有性能問題

//ES5
const baseCat = { type: 'cat', legs: 4 }
const cat = Object.create(baseCat)
cat.name = 'Milanesita'
//ES6
const baseCat = { type: 'cat', legs: 4 }
const cat = Object.setPrototypeOf(
{ name: 'Milanesita' },
baseCat
)

符號#

本地符號 (包裝物件創建，儲存引用或反射訪問)

創建符號

const first = Symbol('something')
//唯一性
console.log(Symbol() === Symbol())
// <- false
console.log(Symbol('my symbol') === Symbol('my symbol'))
// <- false

作為物件的屬性名

const weapon = Symbol('weapon')
const character = {
	name: 'Penguin'
	[weapon]: 'umbrella'
}

無法用 for...in Object.keys Object.getOwnPropertyNames 獲取符號屬性
可透過 Object.getOwnPropertySymbols 獲取

console.log(Object.getOwnPropertySymbols(character))
// <- [Symbol(weapon)]

使用符號

...

裝飾器#

類裝飾器函數接受 3 個參數：被裝飾的類構造函數 ctor；如果被修飾的類繼承了其他類，
則包含父類的 heritage；帶有被修飾類的成員描述符列表的 merbers 陣列。

迭代與流程控制#

待撰寫