Object.keys() 與 for...in 的差異在於 Object.keys() 只能顯示目前 Object 的 Property Key，而 for...in 會連同 Prototype 的 Property Key 一併顯示。
若 for...in 搭配 Constructor Function 或 Object.create() 時一切正常，但搭配 class 時，就無法顯示 Prototype 的 Property Key 了，為什麼會這樣呢 ?
點燈坊
念念不忘，必有迴響。有一口氣，點一盞燈，有燈就有人。
ECMAScript Object 的 Property 基本上是由 Key / Value 構成，連 Method 也是指向 Function 的 Property，我們該如何取得 Object 的 Property Key 做進一步的運用呢 ?
Firefox 內建的 Scratchpad 是很方便的工具，除了讓我們以 REPL 方式學習 ECMAScript 外，還能即時觀察 object 的所有 property，尤其 ECMAScript 很多秘密都是藏在 prototype 中，這對學習有很大的幫助。
與傳統 OOP 相比， ECMAScript 的 Object 有一個很特別的語言特性，就是 Property 可以透過 Array 與 變數 方式存取，這造成了使用 Object 有很大的靈活度。
ECMAScript 也有 Object 概念，但其 Object 與傳統 OOP 的 Object 又不太一樣。傳統 OOP 的 Object 都必須由 class 而來，但 ECMAScript 的 Object 卻有多種建立方式。
Component 概念為 React 所發明，讓我們可以重複使用 HTML，Vue、Angular 也 致敬 React，採用 component ，至此 3 大 Framework 都統一採用 Component-based 架構。
有時想以一 Project 為基底，將該專案複製後再重新命名，這樣雖然可行，但在 WebStorm 的 Project Explorer 總算顯示原本 Project 名稱，非常礙眼。
WebStorm 已經提供 Vue 的 plugin，支援 Vue 完整，唯一只有 .vue 格式縮排部分，Webstorm 與 Vue 的看法迥異，在 Reformat Code 之後，縮排會完全跑掉，需要特別設定。
在 Unit Test 與 Jest 部分，WebStorm 支援還不夠，但目前仍然可以做一些設定。
假如資料是從 App.vue 透過 API 抓取資料，然後透過 Prop 傳進 Component，最後再讀取 Prop 寫入 Component 的 Data，這看似平常的過程，若是同步資料則完全不是問題，但因為資料是從 API 來，為非同步 Promise，寫法則沒有想像中單純。