Id Selector > Class Selector > Type Selector (這題我寫成Id Selector > Type Selector > Class Selector)
我一時忘記Type Selector是哪個選擇器，腦袋中浮現的是div[data-color=red]，記得這個跟class是同等級，  
後來問面試官才知道Type Selector就是指Element，h1、h2、p那些標籤。

另外還有如何水平垂直置中、flex 排成直的一些排法等等，我自己通常如果是口頭測驗，
會先確認水平置中、垂直置中、水平垂直置中三種考官要問哪種，不過概念大致上相同是也還好。

比較要提的是 margin 邊界重疊的三種解法，自己很常利用padding去設定間距，
所以很少遇到這類問題，後來詢問面試官其他的解法，原來可以幫元素加上clear-fix的屬性，
我以前只知道是用來清除 float 的浮動問題，原來也可以解決 margin 邊界重疊的狀況，長知識了！

這題考如果要傳第二個參數，要傳陣列進去還是透過展開運算子傳一堆數字進去。
真的滿久沒看到這兩個方法，大抵上知道是關於this的綁定，但我忘記實際寫法以及後面參數要傳什麼，最後也是跟面試官請教才回憶起來。

// 定義測試用函式，箭頭函式的this會根據語意指定作用域，故這邊不用箭頭函式
function testFunction (a, b) {
    console.log(this.name, a, b);
}

// 定義測試用物件
const obj = { name: 'Hubert Hsieh'};

// Assign function in obj
obj.func = testFunction;
obj.func(1, 2);

// 第一個參數選擇要指定this到哪，也可以是null
testFunction.apply(obj, [1, 2]); // 傳一個陣列進去
testFunction.bind(obj)(1, 2); // 依次傳參數
testFunction.call(obj, 1, 2); // 依次傳參數

關於Promise相關的考題，這邊考了兩個方向
- Promise 內運算的結果及Promise all方法的概念。
- Promise 的寫法如何用 async/await 的方式改寫。

這邊自己覺得答題時沒有寫得很好，不過基本的概念自己還算是清楚的，
Promise語法的出現是為了解決早期在做非同步處理時，必須不斷的透過CallBack去確保正確取到值之後，  
再執行某些運算或功能，當函式結構變得龐大時，程式碼就會越來越複雜，甚至會看到類似波動拳的巢狀結構。

Promise.all 則是可以等待多個 Promise 函式全部執行完成後，再回傳陣列結果，通常就是如果有多支 API 要一起執行時會運用到。

那 async / await 就是可以用類似同步執行的程式碼寫法，來處理非同步的事情，本質跟用Promise其實是差不多的。  
但是可讀性就高很多(這點可能見仁見智，我個人是習慣這樣寫，再利用 Try 集中處理 Success 相關的功能，Catch 處理 Error 時相關的功能)

// async / await的方式
const asyncFunction = async () => {
	try {
		const dataA = await fetchDatarA;
		const dataB = await fetchDatarB;
		console.log(dataA, dataB); 
	} 
	catch(error) {
		console.log('async function error', error);
	}
}

- sort 這邊考的是，一個物件陣列如何透過某個 key 的 value 去做排序?
- reduce 我忘記題目考什麼了。

sort() 基本概念是，如果沒有指定一個比較功能的參數，它會將每個元素轉成字串之後，第一個字元的 Unicode 編碼位置去排序。
reduce() 基本概念是，他可以不斷地跟上一個回傳的值再作運算，最後回傳該值。跟 map 相比不同的是，map 是回傳一個新陣列。

// sort()
// 簡單定義一個隨意排列的物件陣列
const sortArr = [
	{name: 'Alex', age: 33},
	{name: 'Hubert', age: 34},
	{name: 'Chris', age: 32}
]

// 依造每個元素的年齡大小去遞增排序
const sortResult = sortArr.sort((a, b) => {
	return a.age > b.age ? 1 : -1;
})

// result
[
    {name: 'Chris', age: 32},
    {name: 'Alex', age: 33},
    {name: 'Hubert', age: 34}
]

// reduce()
// 基本語法

array.reduce((accumulator, currentValue) => { do something... },  initialValue)

// example
const array = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const sumWithInitial = array.reduce((accumulator, currentValue) => accumulator + currentValue,  0);

// Expected output: 10
console.log(sumWithInitial); 

// console.log以下狀況的結果，這邊牽扯 JavaScript 的各種運算子在運算時，如果是不同型別會做甚麼處理以及回傳什麼結果。

- 1<2<3： 可以先判斷 1<2 是 true，重點就變成 true<3 會回傳什麼呢?
- 3>2>1： 可以先判斷 3>2 是 true，重點就變成 true>1 會回傳什麼呢?
- true+'xyz'： true 是 布林值，那重點就變成 布林值+字串會變成什麼呢?

// 上述幾點就需要先了解 JavaScript 的強制轉型別的概念(很雞婆？)   
- {key: "value"}： 理論上會把物件印出來沒錯，只是很有可能一般實務上物件console出來的值未必是如自己所想的那樣！