15 個你應該知道的JavaScript 對象基礎知識
1.對象字面量是創建對象的最簡單方式
創建對象的最簡單方法是使用對象字面量。我們在花括號 {} 中定義了一組屬性,用逗號分隔。下面是一個例子。
const game = {
name: 'Fornite',
developer: 'Epic Games'
};
前一個對象有兩個屬性。第一個屬性具有鍵名和值 Fornite。
2. 對象是屬性的動態集合
事實上,對象是道具的動態集合。
創建對象后,我們可以從中添加、編輯或刪除屬性。下面是在前一個游戲對象中添加和刪除 year 屬性的示例。
game.year = 2017;
delete game.year;
3. 可以使用點和括號符號訪問屬性
當鍵是有效標識符時,可以使用點符號訪問屬性。
console.log(game.name)
當鍵不是有效標識符時,我們需要使用括號表示法。
console.log(game["name"])
4.鍵轉換為字符串
鍵只是字符串,當非字符串值用作鍵時,它們將轉換為字符串。看看當我嘗試使用另一個對象作為鍵時會發生什么。
const developerKey = {
toString(){
return 'developer'
}
}
console.log(game[developerKey]);
當 developerKey 用作鍵時,它首先使用 toString 方法轉換為字符串,然后使用結果 'developer' 字符串鍵來檢索值。前面的代碼給出了與 game['developer'] 相同的結果。
5. 對象繼承自其他對象
在 JavaScript 中,對象繼承自其他對象。對象有一個名為 __proto__ 的隱藏屬性,指向它們的原型。所有對象都繼承自全局 Object.prototype。
game.__proto__ === Object.prototype;
即使我們沒有定義這樣的方法,游戲對象也有類似 toString 或 toLocaleString 的屬性。它們繼承自 Object.prototype 對象。
console.log(game.toString);
console.log(game.toLocaleString);
Object.create() 接受一個原型對象并創建一個指向它的新對象。
const prototypeObj = {};
const obj = Object.create(prototypeObj);
console.log(obj.__proto__ === prototypeObj);
6. 更改是在當前對象上完成的,而不是在它的原型上
請記住,更改是在當前對象上完成的,而不是在其原型上。原型僅用于閱讀。
添加、編輯或刪除對當前對象執行的屬性時。
例如,Object.prototype 具有 toString 屬性,考慮繼承自 Object.prototype 的空對象。以下示例中的 delete 運算符不執行任何操作,它不會從原型中刪除 toString 屬性。
const obj = {};
console.log(obj.toString);
delete obj.toString
console.log(obj.toString);
當我們更改 toString 屬性時,會在當前對象中添加一個新屬性,原型不會更改。此時,當前對象和原型都有一個同名的屬性,使用當前對象中的那個。
const obj = {};
obj.toString = function(){};
7. 我們可以創建沒有原型的對象
Object.create(null) 創建一個沒有原型的對象。
const obj = Object.create(null);
console.log(obj.__proto__ === undefined);
8. 類是原型系統之上的糖語法
class 關鍵字創造了一種基于類的語言的錯覺,但事實并非如此。 JavaScript 中的類只是原型系統上的一種糖語法。
class Game{
constructor(name){
this.name = name;
}
}
const game = new Game('Fornite');
console.log(game.__proto__ === Game.prototype);
9.對象可以存儲其他對象
屬性的值可以是任何類型。屬性可以存儲對象。考慮下一個例子,其中 developer 是一個對象而不是一個字符串。
const game = {
name : 'Fornite',
developer: {
name: 'Epic Games',
founder: 'Tim Sweeney'
}
};
10.對象可以存儲功能
屬性值可以是任何類型,包括函數。
以下對象具有存儲函數的 toString 屬性。
const game = {
name : 'Fornite',
toString: function(){
return this.name;
}
};
console.log(game.toString());
當函數存儲在對象上時,它可以用作方法。請注意,在方法中,我們可以使用 this 關鍵字來訪問關聯對象的屬性。
11.物體可以被凍結
默認情況下,對象是動態的,這意味著我們可以在創建后添加、編輯或刪除它們的屬性。
盡管如此,我們可以使用 Object.freeze() 實用程序在創建時凍結這樣的對象。之后,我們無法添加、編輯或刪除其中的屬性。
查看下一個凍結的對象。
const game = Object.freeze({
name: 'Fornite',
});
//game.developer = 'Epic Games';
//Cannot add property developer, object is not extensible
game.name = "Valorant";
//Cannot assign to read only property 'name' of object
12.原型可以凍結
原型也可以凍結。
當原型被凍結時,從它繼承的對象不能具有同名的新屬性。考慮以下凍結原型。
const prototype = Object.freeze({
toString : function (){
return this.name;
}
});
因為原型被凍結并且具有 toString 屬性,我們不能在從它繼承的新對象上定義具有相同名稱的屬性。
const game = Object.create(prototype);
game.name = 'Fornite';
game.toString = function (){
return `Game: ${this.name}`;
};
13. Object.keys、Object.values 和 Object.entries 幫助檢索擁有的鍵和值
對象有兩種屬性,擁有的屬性是在對象本身上定義的。例如 name 和 developer 是我們游戲對象的所有屬性。繼承的屬性是來自原型的屬性。例如,toString 是所有對象的繼承屬性。
我們可以使用 Object.keys() 實用程序獲取對象的所有擁有鍵。
const game = {
name: 'Fornite',
developer: 'Epi Games'
};
console.log(Object.keys(game));
以類似的方式,我們可以使用 Object.values() 獲取所有值。
console.log(Object.values(game));
Object.entries() 檢索包含所有擁有的 [key, value] 對的數組。
console.log(Object.entries(game));
//[
//["name", "Fornite"],
//["developer", "Epi Games"]
//]
Object.keys、Object.values 和 Object.entries 都返回一個數組。一旦我們有了它,我們就可以開始使用數組方法了。
14. 使用對象模擬數組
是的,數組是使用對象模擬的。考慮以下數組。
const games = [
{name: 'Candy Crush', developer: 'King'},
{name: 'Angry Birds', developer: ' Rovio Entertainment'}
];
它使用類似于下面的對象進行模擬。
{
'0' : {name: "Candy Crush", developer: "King"},
'1' : {name: "Angry Birds", developer: " Rovio Entertainment"}
}
這就是為什么我們可以使用數字索引和字符串來訪問相同的元素。請記住,非字符串鍵被轉換為字符串,因此,數組索引被轉換為字符串。
console.log(games[1] === games['1']);
15. 對象是哈希映射
JavaScript 中的對象類似于其他語言中稱為映射或哈希表的對象,密鑰的訪問時間為 O(1)。
- O(1) 意味著無論地圖上的數據量如何,訪問密鑰都需要恒定的時間。
- O(n) 意味著它花費的時間與列表的大小成線性關系。列表越大,訪問時間越大。
這就是為什么你可能會看到對象用作映射來搜索唯一鍵。
const gamesMap = {
1 : {name: 'Fornite', developer: 'Epic Games'},
2 : {name: 'Candy Crush', developer: 'King'},
3 : {name: 'Angry Birds', developer: ' Rovio Entertainment'}
}
我們現在可以使用 gamesMap 地圖在恒定時間 O(1) 內通過 id 獲取游戲對象,而無需遍歷列表。
總結
以上這些就是你需要了解的有關 JavaScript 對象的一些最重要的知識概念,希望這些內容對你有所幫助,如果你覺得有用的話,請不要忘記點贊我,關注我,并將它與你的開發者朋友一起來分享這篇文章,也許能夠幫助到他。
最后,感謝你的閱讀。