微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢,學習途徑等等。
本文 GitHub https://github.com/qq44924588... 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。
最近有人問我,JavaScript物件屬性是否一定是無序的、不可預測的?
早期接觸過JavaScript的開發者可能會回答,Object.keys()
或for...in
會返回一個不可預知的物件屬性順序。
但現在的情況仍然是這樣嗎?
不是了,有些情況下是有序的。
從ECMAScript 2020開始,Object.key
、for...in
、Object.getOwnPropertyNames
和Reflect.ownKeys
都遵循同一個規範順序。它們是:
1. 自己的屬性是陣列的索引,按數字索引升序排列
const obj = {
100: 100,
'2': 2,
12: 12,
'0': 0
}
// 下面列印的結果順序都是 ['0', '2', '12', '100']
console.log(Object.keys(obj))
console.log(Object.getOwnPropertyNames(obj))
console.log(Reflect.ownKeys(obj))
for (const key in obj) {
console.log('key', key)
}
const obj = {
a: 'a',
};
obj.b = 'b';
setTimeout(() => {
obj.c = 'c';
});
obj.d = 'd';
// 下面列印的結果順序都是 `[ 'a', 'b', 'd' ]`
console.log(Object.keys(obj));
console.log(Object.getOwnPropertyNames(obj));
console.log(Reflect.ownKeys(obj));
for (const key in obj) {
console.log('key: ', key);
}
上面的程式碼新增了事件迴圈的知識點。因為 setTimeout
是一個非同步的宏任務,當console.log
輸出時,c
屬性還沒有被新增到 obj
中。
3. 自身的 Symbol 屬性,按建立時間順序遞增
const obj = {
[Symbol('a')]: 'a',
[Symbol.for('b')]: 'b',
};
obj[Symbol('c')] = 'c';
console.log(Object.keys(obj)); // []
console.log(Object.getOwnPropertyNames(obj)); // []
console.log(Reflect.ownKeys(obj)); // [ Symbol(a), Symbol(b), Symbol(c) ]
for (const key in obj) {
console.log('key: ', key); // 沒有輸出
}
console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(a), Symbol(b), Symbol(c) ]
Symbol 屬性和 String 屬性一樣,是按照屬性建立的時間順序升序排列的。但是Object.key
, for...in
, Object.getOwnPropertyNames
方法不能獲得物件的 Symbol 屬性,Reflect.ownKeys
和 Object.getOwnPropertySymbols
可以。
總結
當一個物件的屬性鍵是上述型別的組合時,該物件的非負整數鍵(可列舉和不可列舉)首先按升序新增到陣列中,然後按插入順序新增字串鍵。最後,Symbol 鍵按插入順序加入。
const obj = {
100: 100,
0: 0,
a: 'a',
[Symbol('a')]: 'a',
};
obj[Symbol.for('b')] = 'b';
obj.b = 'b';
console.log(Object.keys(obj)); // [ '0', '100', 'a', 'b' ]
console.log(Object.getOwnPropertyNames(obj)); // [ '0', '100', 'a', 'b' ]
console.log(Reflect.ownKeys(obj)); // [ '0', '100', 'a', 'b', Symbol(a), Symbol(b) ]
for (const key in obj) {
console.log('key: ', key); // '0' '100' 'a' 'b'
}
console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(a), Symbol(b) ]
但是,如果你強烈依賴插入順序,那麼Map可以保證這一點。
編輯中可能存在的bug沒法實時知道,事後為了解決這些bug,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
作者:islizeqiang 譯者:小智 來源:medium
原文:https://medium.com/@islizeqia...
交流
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。