除了 for…in 方法，還有許多迴圈方法可以協助處理陣列資料，但物件並不支援這些方法，以下為例

const fruits = {
  apple: { price: 45 },
  strawberry: { price: 100 },
  banana: { price: 30 },
  papaya: { price: 60 },
  watermelon: { price: 75 }
}

假設我們想取得每個元素的價格，直接使用陣列方法 forEach() 會產生錯誤，因為物件並沒有該寫法

fruits.forEach(item => {
  console.log(item.price);
});

// output: Uncaught TypeError: fruits.forEach is not a function

閱讀更多

陣列方法可以幫助開發者更有效率的進行資料處理，前端框架 Vue 跟 React 都採取視覺單位關注點分離，框架協助處理畫面部分，而資料面的處理就要靠開發者的功力。

因自己在工作上大量運用到相關技巧，因此將內容筆記起來，方便未來需要時複習使用。

閱讀更多

JavaScript 的型別分為兩種：原始資料型別（Primitive Data Types）以及物件型別（Object Types）

原始資料型別包含以下：

• String 字串型別
• Number 數字型別
• Boolean 布林型別
• Null
• Undefined
• Symbol

ES6 Symbols 是 JavaScript 中的一種新資料型別，用於表示唯一的識別符。每個 Symbol 值都是唯一且不可變的，並且可以作為物件屬性的 key 值。也就是說，即使兩個 Symbol 值具有相同的描述（description），兩者也不相等。

閱讀更多

繼承與原型鏈

在 class 出現前，通常使用建構函式（Constructor）建立原型（Prototype）。原型並非實體（可以將其理解成藍圖），必須透過 new 運算子實體化，繼承該原型。

閱讀更多

手機 App 可以透過原生介面實現分享功能，而 Web Share API 可以協助我們在 Android 或 IOS 網頁上做到類似像 App 的分享功能，主要是透過作業系統原生介面分享，可以輕鬆地將內容分享至第三方平台（Facebook、Twitter、Line…），分享內容可以為連結、文字或是檔案。

閱讀更多

Currying is a technique in functional programming where a function that takes multiple arguments is transformed into a sequence of functions that each take a single argument.

Currying 是一種函式編程（程式設計的一種，可以參考此篇文章）技術，將接收多個參數的函式，拆解為多個函式，每個函式只接受一個參數

閱讀更多

函數原型 call、apply、bind 方法可以用來改變 this 指向的對象，bind 和其他兩個方法 call、apply 較不同，call、apply 會直接執行函式，bind 只是將 this 綁定到函式內，並不會實際執行，這樣說明還是有點難懂，那就接下去看看吧。

閱讀更多

debounce 與 throttle 用來防止 scroll, resize 等事件處理器在短時間內被頻繁觸發，綁定的函示重複執行，造成網頁不斷重新運算進而影響效能，作法就是控制函式觸發的次數或頻率，以下分別說明兩者的操作方式。

Debounce

概念是加入一個倒數計時器，連續觸發時會一直重新倒數，直到計時器歸零，才執行函式。

簡單舉例：
就像是便利商店的自動門，當一段時間內頻繁有客人進來，自動門會持續開著，直到大家都進入後，等待幾秒才關上。

閱讀更多