JavaScript 物件屬性順序的秘密
發佈於2024-10-31
瀏覽：772
最近有人問我，JavaScript物件屬性一定是無序且不可預測的嗎？
早期接觸過 JavaScript 的開發人員可能會回答，Object.keys() 或 for...in 傳回不可預測的物件屬性順序。但現在還是這樣嗎？
正如您所料，現在有規則需要遵循。
從 ECMAScript 2020 開始，Object.keys、for...in、Object.getOwnPropertyNames 和 Reflect.ownKeys 都遵循相同的規範順序。他們是：
1. 自己的屬性是數組索引，依數字索引升序排列
陣列索引是一個字串值屬性鍵，它是一個規範的數字字串。規範的數字字串是由 ToString 產生的數字的字串表示形式，或字串「-0」。例如，「012」是不是規範的數字字串，但「12」是。
2.其他自己的String屬性，依屬性建立時間升序排列
上面的程式碼加入了事件循環的知識點。因為setTimeout是非同步宏任務，所以console.log輸出時，c屬性還沒有加入obj。
3.自己的Symbol屬性，依照屬性所創建的時間升序排列
Symbol 屬性與 String 屬性相同，依屬性建立時間的升序排列。但是Object.keys、for...in、Object.getOwnPropertyNames方法無法取得物件的Symbol屬性，Reflect.ownKeys和Object.getOwnPropertySymbols可以。
結論
當物件的屬性鍵為上述類型的組合時，首先按升序將物件的非負整數鍵（可枚舉和不可枚舉）新增至陣列中，然後按插入順序新增 String 鍵。最後，符號鍵按插入順序添加。
但如果您強烈依賴插入順序，那麼 Map 可以為您保證。
如果您覺得這有幫助，請考慮 訂閱我的時事通訊 以獲取更多有關 Web 開發的有用文章和工具。感謝您的閱讀！
版本聲明
本文轉載於：https://dev.to/zacharylee/the-secrets-of-javascript-object-property-order-4oh4?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
如何使用FormData（）處理多個文件上傳？）處理多個文件輸入時，通常需要處理多個文件上傳時，通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...程式設計 發佈於2025-04-20 -
如何使用不同數量列的聯合數據庫表？合併列數不同的表 當嘗試合併列數不同的數據庫表時，可能會遇到挑戰。一種直接的方法是在列數較少的表中，為缺失的列追加空值。 例如，考慮兩個表，表 A 和表 B，其中表 A 的列數多於表 B。為了合併這些表，同時處理表 B 中缺失的列，請按照以下步驟操作： 確定表 B 中缺失的列，並將它們添加到表的...程式設計 發佈於2025-04-20
-
Go語言垃圾回收如何處理切片內存？在Go Slices中的垃圾收集：詳細的分析在GO中，Slice是一個動態數組，引用了基礎陣列。使用切片時，了解垃圾收集行為至關重要，以避免潛在的內存洩漏。 考慮使用slice使用slice的以下實現：字符串{ R：=（*Q）[0] *q =（*q）[1：len（*q）] 返...程式設計 發佈於2025-04-20
-
如何干淨地刪除匿名JavaScript事件處理程序？刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性，但是當要刪除它們時，可以構成挑戰，而無需替換元素本身就可以替換一個問題。 element？ element.addeventlistener（event，function（）{/在這里工作/}，false）; 要解決此問題，請考...程式設計 發佈於2025-04-20
-
如何從PHP中的數組中提取隨機元素？從陣列中的隨機選擇，可以輕鬆從數組中獲取隨機項目。考慮以下數組：; 從此數組中檢索一個隨機項目，利用array_rand（ array_rand（）函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵，我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。程式設計 發佈於2025-04-20
-
在所有瀏覽器中實現左對齊文本的斜線方法] 在傾斜行上的文本對齊背景在傾斜行上實現左對齊的文本可能會構成挑戰，在nectera時尤其是挑戰。兼容性（返回IE9）。 通過引入一系列平方元素併計算其尺寸，我們可以創建一個有效的解決方案： .loop(@i) when (@i > 0){ .loop((@i - ...程式設計 發佈於2025-04-20
-
在UTF8 MySQL表中正確將Latin1字符轉換為UTF8的方法在UTF8表中將latin1字符轉換為utf8 ，您遇到了一個問題，其中含義的字符（例如，“jáuòiñe”）在utf8 table tabled tablesset中被extect（例如，“致電。為了解決此問題，您正在嘗試使用“ mb_convert_encoding”和“ iconv”轉換受...程式設計 發佈於2025-04-20
-
您如何在Laravel Blade模板中定義變量？在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時，它可能並不總是最優雅的解決方案。 幸運的是，Blade通過@php Directive提供了更優雅的方法： $ old_section =...程式設計 發佈於2025-04-20
-
為什麼我會收到MySQL錯誤＃1089：錯誤的前綴密鑰？mySQL錯誤＃1089：錯誤的前綴鍵錯誤descript [＃1089-不正確的前綴鍵在嘗試在表中創建一個prefix鍵時會出現。前綴鍵旨在索引字符串列的特定前綴長度長度，可以更快地搜索這些前綴。 了解prefix keys `這將在整個Movie_ID列上創建標準主鍵。主密鑰對於唯一識...程式設計 發佈於2025-04-20
-
在Java中使用for-to-loop和迭代器進行收集遍歷之間是否存在性能差異？For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...程式設計 發佈於2025-04-20
-
在細胞編輯後，如何維護自定義的JTable細胞渲染？在JTable中維護jtable單元格渲染後，在JTable中，在JTable中實現自定義單元格渲染和編輯功能可以增強用戶體驗。但是，至關重要的是要確保即使在編輯操作後也保留所需的格式。 在設置用於格式化“價格”列的“價格”列，用戶遇到的數字格式丟失的“價格”列的“價格”之後，問題在設置自定義單元...程式設計 發佈於2025-04-20
-
為什麼儘管有效代碼，為什麼在PHP中捕獲輸入？在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是，輸出...程式設計 發佈於2025-04-20
-
在JavaScript中如何並發運行異步操作並正確處理錯誤？同意操作execution 在執行asynchronous操作時，相關的代碼段落會遇到一個問題，當執行asynchronous操作：此實現在啟動下一個操作之前依次等待每個操作的完成。要啟用並發執行，需要進行修改的方法。 第一個解決方案試圖通過獲得每個操作的承諾來解決此問題，然後單獨等待它們： c...程式設計 發佈於2025-04-20
-
圖片在Chrome中為何仍有邊框？ `border: none;`無效解決方案在chrome 在使用Chrome and IE9中的圖像時遇到的一個頻繁的問題是圍繞圖像的持續薄薄邊框，儘管指定了圖像，儘管指定了;和“邊境：無；”在CSS中。要解決此問題，請考慮以下方法： Chrome具有忽略“ border：none; none;”的已知錯誤，風格。要解決此問題，請使用以下...程式設計 發佈於2025-04-20
-
為什麼不````''{margin：0; }`始終刪除CSS中的最高邊距？在CSS 問題：不正確的代碼： 全球範圍將所有餘量重置為零，如提供的代碼所建議的，可能會導致意外的副作用。解決特定的保證金問題是更建議的。 例如，在提供的示例中，將以下代碼添加到CSS中，將解決餘量問題： body H1 { 保證金頂：-40px; } 此方法更精確，避免了由全局保證金重置...程式設計 發佈於2025-04-20
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
