JavaScript CheatSheet
date
Sep 22, 2023
slug
javascript-object-cheatsheet
status
Published
tags
JavaScript
summary
筆記一下 JavaScript 中容易混淆的部分
type
Post
Object
Comparison | Object.keys | Object.getOwnPropertyNames | for in | Object.entries |
enumerable | ✅ | ✅ | ✅ | ✅ |
non-enumerable | ❌ | ✅ | ❌ | ❌ |
inherited | ❌ | ❌ | ✅ | ❌ |
Comparison | in (operator) | hasOwnProperty | Object.hasOwn |
Symbol | ✅ | ✅ | ✅ |
inherited | ✅ | ❌ | ❌ |
getter/setter | ✅ | ❌ | ❌ |
Iterate over the enumerable properties of an object
or
for 會拿到 enumerable properties，但用 for in 可能會有 inherited property，所以可以用 hasOwnProperty 或 Object.hasOwn 濾掉。不過還是建議使用 Object.keys(…) or Object.entries(…)。
Class brand checking
如果要確認一個 object 是不是這個 class new 出來的，可以使用
instanceof 來做判斷但其實這只有比較 prototype chain 而已
想要更安全地檢查方式可以利用 private field 不會繼承的特性 以及使用
in operator 來檢查 Empty slot checking
在 sparse array 中，單從值來看難以區分是不是 empty，因為在 js 中都被當作 undefined。但我們可以使用
in operator 來判斷 Reference
- MDN
Function
function 可以使用 new operator 去產一個 object，在 class 出現前常見的做法。運行的順序是
(1) 生出一個 plain object
(2) bind constructor 的 prototype 在 object 上
(3) 以這個 object 為 context (this) 執行 function (constructor)
(4) 如果有 return value 就吐他，沒有的話就是吐那個 object
因此，