15 個(gè)你應(yīng)該知道的JavaScript 對象基礎(chǔ)知識(shí)
英文 | https://medium.com/dailyjs/15-fundamentals-you-should-know-on-javascript-objects-90f57cc9d78d
const game = {name: 'Fornite',developer: 'Epic Games'};
game.year = 2017;delete game.year;
console.log(game.name)console.log(game["name"])const developerKey = {toString(){return 'developer'}}console.log(game[developerKey]);//Epic Games
game.__proto__ === Object.prototype;//true
console.log(game.toString);//? toString() { [native code] }console.log(game.toLocaleString);//? toLocaleString() { [native code] }
const prototypeObj = {};const obj = Object.create(prototypeObj);console.log(obj.__proto__ === prototypeObj);//true
const obj = {};console.log(obj.toString);//? toString() { [native code] }delete obj.toStringconsole.log(obj.toString);//? toString() { [native code] }
const obj = {};obj.toString = function(){};
const obj = Object.create(null);console.log(obj.__proto__ === undefined);//true
8. 類是原型系統(tǒng)之上的糖語法
class 關(guān)鍵字創(chuàng)造了一種基于類的語言的錯(cuò)覺，但事實(shí)并非如此。 JavaScript 中的類只是原型系統(tǒng)上的一種糖語法。
class Game{constructor(name){this.name = name;}}const game = new Game('Fornite');console.log(game.__proto__ === Game.prototype);
9.對象可以存儲(chǔ)其他對象
屬性的值可以是任何類型。屬性可以存儲(chǔ)對象。考慮下一個(gè)例子，其中 developer 是一個(gè)對象而不是一個(gè)字符串。
const game = {name : 'Fornite',developer: {name: 'Epic Games',founder: 'Tim Sweeney'}};
10.對象可以存儲(chǔ)功能
屬性值可以是任何類型，包括函數(shù)。
以下對象具有存儲(chǔ)函數(shù)的 toString 屬性。
const game = {name : 'Fornite',toString: function(){return this.name;}};console.log(game.toString());//Fornite
當(dāng)函數(shù)存儲(chǔ)在對象上時(shí)，它可以用作方法。請注意，在方法中，我們可以使用 this 關(guān)鍵字來訪問關(guān)聯(lián)對象的屬性。
11.物體可以被凍結(jié)
默認(rèn)情況下，對象是動(dòng)態(tài)的，這意味著我們可以在創(chuàng)建后添加、編輯或刪除它們的屬性。
盡管如此，我們可以使用 Object.freeze() 實(shí)用程序在創(chuàng)建時(shí)凍結(jié)這樣的對象。之后，我們無法添加、編輯或刪除其中的屬性。
查看下一個(gè)凍結(jié)的對象。
const game = Object.freeze({name: 'Fornite',});//game.developer = 'Epic Games';//Cannot add property developer, object is not extensiblegame.name = "Valorant";//Cannot assign to read only property 'name' of object
12.原型可以凍結(jié)
原型也可以凍結(jié)。
當(dāng)原型被凍結(jié)時(shí)，從它繼承的對象不能具有同名的新屬性?？紤]以下凍結(jié)原型。
const prototype = Object.freeze({toString : function (){return this.name;}});
因?yàn)樵捅粌鼋Y(jié)并且具有 toString 屬性，我們不能在從它繼承的新對象上定義具有相同名稱的屬性。
const game = Object.create(prototype);game.name = 'Fornite';game.toString = function (){return `Game: ${this.name}`;};//Cannot assign to read only property 'toString' of object
13. Object.keys、Object.values 和 Object.entries 幫助檢索擁有的鍵和值
對象有兩種屬性，擁有的屬性是在對象本身上定義的。例如 name 和 developer 是我們游戲?qū)ο蟮乃袑傩?。繼承的屬性是來自原型的屬性。例如，toString 是所有對象的繼承屬性。
我們可以使用 Object.keys() 實(shí)用程序獲取對象的所有擁有鍵。
const game = {name: 'Fornite',developer: 'Epi Games'};console.log(Object.keys(game));//["name", "developer"]
以類似的方式，我們可以使用 Object.values() 獲取所有值。
console.log(Object.values(game));//["Fornite", "Epi Games"]
Object.entries() 檢索包含所有擁有的 [key, value] 對的數(shù)組。
console.log(Object.entries(game));//[//["name", "Fornite"],//["developer", "Epi Games"]//]
Object.keys、Object.values 和 Object.entries 都返回一個(gè)數(shù)組。一旦我們有了它，我們就可以開始使用數(shù)組方法了。
14. 使用對象模擬數(shù)組
是的，數(shù)組是使用對象模擬的?？紤]以下數(shù)組。
const games = [{name: 'Candy Crush', developer: 'King'},{name: 'Angry Birds', developer: ' Rovio Entertainment'}];
它使用類似于下面的對象進(jìn)行模擬。
{'0' : {name: "Candy Crush", developer: "King"},'1' : {name: "Angry Birds", developer: " Rovio Entertainment"}}
這就是為什么我們可以使用數(shù)字索引和字符串來訪問相同的元素。請記住，非字符串鍵被轉(zhuǎn)換為字符串，因此，數(shù)組索引被轉(zhuǎn)換為字符串。
console.log(games[1] === games['1']);//true
15. 對象是哈希映射
JavaScript 中的對象類似于其他語言中稱為映射或哈希表的對象，密鑰的訪問時(shí)間為 O(1)。
O(1) 意味著無論地圖上的數(shù)據(jù)量如何，訪問密鑰都需要恒定的時(shí)間。
O(n) 意味著它花費(fèi)的時(shí)間與列表的大小成線性關(guān)系。列表越大，訪問時(shí)間越大。
這就是為什么你可能會(huì)看到對象用作映射來搜索唯一鍵。
const gamesMap = {1 : {name: 'Fornite', developer: 'Epic Games'},2 : {name: 'Candy Crush', developer: 'King'},3 : {name: 'Angry Birds', developer: ' Rovio Entertainment'}}
我們現(xiàn)在可以使用 gamesMap 地圖在恒定時(shí)間 O(1) 內(nèi)通過 id 獲取游戲?qū)ο?，而無需遍歷列表。
總結(jié)
以上這些就是你需要了解的有關(guān) JavaScript 對象的一些最重要的知識(shí)概念，希望這些內(nèi)容對你有所幫助，如果你覺得有用的話，請不要忘記點(diǎn)贊我，關(guān)注我，并將它與你的開發(fā)者朋友一起來分享這篇文章，也許能夠幫助到他。
最后，感謝你的閱讀。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
