DOM

DOM 全名為 Document Object Model 中文翻譯為 文件物件模型。
其實就是把 HTML 文件內的標籤、文字、圖片等等都定義成物件,而這些物件會形成一個樹狀結構,並且可以利用 JavaScript 來對 HTML 文件進操作和互動。
Image

Read more »

執行堆疊 Call Stack

JavaScript 是一種單執行緒的程式語言,也就是一次只能做一件事情,程式碼也是一行一行執行。
當呼叫函式時會產生執行環境,如果函式執行環境內還有其他函式被呼叫,就會產生另外一個執行環境,形成「執行堆疊」(Call Stack),在上層執行環境結束之前,下層包含全域的執行環境內的程式碼就會被暫停。

Read more »

關注點分離

關注點分離(Separation of Concerns,SoC)就是將程式碼依照各種「目的」、「功能」進行分類和整理,讓每個區塊專注於各自負責的工作,彼此分工合作。
這麼做的優點是可以將程式碼進行切割,依照需求各自獨立處理,並讓程式碼單純化。
為了更清楚理解關注點分離應用,來實作一個簡單的 Todolist。

Read more »

浮點數

在日常生活中,如果要計算 0.1 + 0.2,我們能夠直覺的答出 0.3 這個答案。
但是在 JavaScript 中,計算結果卻不如預期,用 console.log(0.1 + 0.2 === 0.3) 回傳的結果竟會得到 false
其實這和電腦的「IEEE754 二進制浮點運算」計算方式有關,當我們宣告一段浮點數陣列,展開後會發現,有些浮點數會有些微誤差,以致於在進行計算時會出錯。
所以得到的結果自然是 0.1 + 0.2 !== 0.3

1
2
3
4
5
var num = Array.from(Array(10).keys())
var result = num.map(item => item * 0.1)
console.log(result)
// 0, 0.1, 0.2, 0.30000000000000004, 0.4, 0.5,
// 0.6000000000000001, 0.7000000000000001, 0.8, 0.9
Read more »

JavaScript 中,資料的傳遞分為兩種方式:
- 傳值:Call by value 或 Pass by value
- 傳址(傳參考):Call by reference 或 Pass by reference

Read more »

this 是什麼

this 是 JavaScript 的一個關鍵字,函式執行時自動生成的一個內部物件,用來呼叫自身擁有的屬性或值。

1
2
3
4
5
function fn () {
console.log(this)
debugger
}
fn() // window

Image

Read more »

Promise 是用來解決 AJAX 非同步問題,優化非同步程式的 ES6 語法,會回傳「接受」或「拒絕」的結果。

AJAX 是 JavaScript 與 XML 技術的縮寫,網頁不用重新整理,就能即時透過瀏覽器跟伺服器溝通、撈取資料。

1
2
3
4
5
function promise(num) {
return new Promise((resolve, reject) => {
num ? resolve(num) : reject('失敗')
})
}
Read more »