10 個在 JavaScript 中處理對象的實用函數(shù)
本文將著眼于在 JavaScript 中處理對象的最重要的實用函數(shù)。
01、Object.freeze
Object.freeze() 凍結(jié)一個對象。無法再更改凍結(jié)的對象。它返回傳入的相同對象。
這是通過在創(chuàng)建時凍結(jié)對象來實現(xiàn) JavaScript 不變性的最簡單方法。
const game = Object.freeze({name: 'Warcraft'});game.developer = 'Blizzard';//TypeError: Cannot add property developer, object is not extensible
console.log(Object.isFrozen(game));//true
const game = {name: 'Warcraft',developer: 'Blizzard'};const keys = Object.keys(game);console.log(keys);// ["name", "developer"]
Object.keys(game).forEach(key => console.log(key));
const values = Object.values(game);console.log(values);// ["Warcraft", "Blizzard"]
const game = {name: 'Warcraft',developer: 'Blizzard'};const keyValuePairs = Object.entries(game);console.log(keyValuePairs);// [// ["name", "Warcraft"],// ["developer", "Blizzard"]// ]
Object.entries(game).forEach(([key, value]) => console.log(key, value));//name Warcraft//developer Blizzard
const game = {name: 'Overwatch',developer: {name: 'Blizzard'}};Object.freeze(game);game.developer.name = 'Activision Blizzard';console.log(game);//{// developer: {name: "Activision Blizzard"},// name: "Overwatch"//}
function deepFreeze(object) {Object.entries(object).forEach(([name, value]) => {if (value && typeof value === 'object') {deepFreeze(value);}});return Object.freeze(object);}
deepFreeze(game);game.developer.name = 'Activision Blizzard';//Cannot assign to read only property 'name' of object
const game = {name: 'Warcraft',developer: 'Blizzard'};const map = new Map(Object.entries(game));console.log(map);//Map(2) {"name" => "Warcraft", "developer" => "Blizzard"}
const keyValuePairs = [["name", "Warcraft"],["developer", "Blizzard"]];const game = Object.fromEntries(keyValuePairs);console.log(game);//{name: "Warcraft", developer: "Blizzard"}
const gamePrototype = {toString : function(){return `${this.name}, developed by ${this.developer}`;}};
const game = Object.create(gamePrototype);game.name = "Overwatch";game.developer = "Blizzard";console.log(game.toString());//'Overwatch, developed by Blizzard'
Object.getPrototypeOf(game) === gamePrototype;//true
const obj = {};Object.getPrototypeOf(obj) === Object.prototype;//true
const gameMethods = {toString : function(){return `${this.name}, developed by ${this.developer}`;}};const game = {name: 'Diablo',developer: 'Blizzard'};Object.assign(game, gameMethods);console.log(game.toString());//'Diablo, developed by Blizzard'
我們可以避免修改現(xiàn)有的游戲?qū)ο?，而是?chuàng)建一個包含來自現(xiàn)有游戲和 gameMethods 對象的屬性的新對象。
我們可以通過將它們的屬性復制到一個空對象來做到這一點。
const anotherGame = Object.assign({}, game, gameMethods);console.log(anotherGame.toString());//'Diablo, developed by Blizzard'
如您所見，我們能夠使用 Object.assign 和 Object.create 將 toString 方法添加到游戲?qū)ο笾小?/span>
不同之處在于 Object.assign 將屬性添加到每個新創(chuàng)建的對象中。Object.create 僅向新創(chuàng)建的對象添加對現(xiàn)有原型的引用。
它不會復制所有可重用的屬性。只有在構(gòu)建數(shù)千個對象時才能注意到這種差異。
Object.assign() 也可用于克隆普通對象。
const game = {name: 'Starcraft'};const anotherGame = Object.assign({}, game);console.log(anotherGame);//{name: "Starcraft"}console.log(game === anotherGame);//false
10、Object.defineProperty
Object.defineProperty 實用程序修改現(xiàn)有屬性或在對象上定義新屬性。它改變并返回修改后的對象。
Object.defineProperty 主要用于設置特定的屬性描述符，如可枚舉性或定義只讀屬性。
考慮以下對象。
const game = {name: 'Fornite',developer: 'Epic Games',toString: function(){return `${this.name}, developed by ${this.developer}`;}};Object.keys(game);//["name", "developer", "toString"]
默認情況下，所有新屬性都是可枚舉的。如您所見，調(diào)用 Object.key 實用程序時還返回了 toString 屬性名稱。
如果我們不希望 toString 成為可枚舉屬性，我們可以使用 Object.defineProperty 實用程序?qū)⑵錁擞洖榭擅杜e屬性。
Object.defineProperty(game, 'toString', {enumerable: false});console.log(Object.keys(game));//["name", "developer"]
盡管如此，我們可以根據(jù)需要更改 toString 屬性。
game.toString = undefined;我們通過將 toString 屬性上的可寫描述符設置為 false 來避免這種行為。
Object.defineProperty(game, 'toString', {enumerable: false,writable: false});game.toString = undefined;//Cannot assign to read only property 'toString' of object
Object.defineProperty 實用程序可用于添加動態(tài) getter 和 setter。
下面是向游戲?qū)ο筇砑觿討B(tài) getter 的示例。僅當用戶有權(quán)訪問時，getter 才返回屬性的值，否則會引發(fā)錯誤。
const game = {name: 'Fornite',developer: 'Epic Games',};const hasRight = false;const propName = "name";Object.defineProperty(game, propName, {get : function () {if(hasRight){return game[propName];} else {throw `${propName} no access`;}}});console.log(game.name);//name no access
重點說明
我們擁有用于凍結(jié)和檢測凍結(jié)對象的實用程序。(Object.freeze / Object.isFrozen)
其他實用程序幫助我們在新數(shù)組中提取對象的所有屬性，從而使我們能夠訪問強大的數(shù)組方法。(Object.keys / Object.values / Object.entries)
我們可以創(chuàng)建一個繼承自現(xiàn)有原型的新對象，然后使用另一個實用程序函數(shù)來檢查給定對象的原型。(Object.create/Object.getPrototypeOf)
使用 Object.entries 和 Object.fromEntries 助手將對象轉(zhuǎn)換為 [key, value] 對數(shù)組，然后再轉(zhuǎn)換回對象變得簡單。這使得在地圖和對象之間轉(zhuǎn)換變得容易。
Object.assign() 幫助我們克隆對象或?qū)⒍鄠€對象的屬性復制到一個新對象中。
Object.defineProperty 實用程序修改現(xiàn)有屬性或定義新屬性。它主要用于更改屬性描述符。
總結(jié)
以上這些內(nèi)容就是 JavaScript 中處理對象的一些最重要的實用函數(shù)。如果您覺得它對您有所幫助，請記得給我點贊，同時，也請您分享給您身邊做開發(fā)的朋友。
學習更多技能
請點擊下方公眾號
