摘要:中的所有對象都來自父的構(gòu)造函數(shù)。不同于數(shù)組的原型方法例如和只能被數(shù)組實(shí)例使用,對象方法直接來自構(gòu)造函數(shù),并使用對象實(shí)例作為參數(shù)。這稱為靜態(tài)方法。創(chuàng)建對象的鍵值對的嵌套數(shù)組。可用于確定對象是否已凍結(jié),并返回布爾值。
原文:How To Use Object Methods in JavaScript介紹
作者:Tania Rascia
譯者:博軒
JavaScript 中,對象是 鍵/值 對的集合。值可以包含屬性和方法,并且可以包含所有其他 JavaScript 數(shù)據(jù)類型,例如字符串,數(shù)字和布爾值。
JavaScript中的所有對象都來自父 Object 的構(gòu)造函數(shù)。Object 為我們提供了很多實(shí)用的內(nèi)置方法,并且可以在單個對象中直接使用。不同于 數(shù)組的原型方法 例如 sort() 和 reverse() 只能被數(shù)組實(shí)例使用,對象方法直接來自 Object 構(gòu)造函數(shù),并使用對象實(shí)例作為參數(shù)。這稱為靜態(tài)方法。
本教程將介紹重要的內(nèi)置對象方法,下面的每個部分都涉及特定方法并提供使用示例。
前提為了充分利用本教程,您應(yīng)該熟悉創(chuàng)建,修改和使用對象,您可以在“ 了解JavaScript中的對象 ”一文中查看這些對象。
有關(guān)JavaScript的其他指導(dǎo),您可以查看“ JavaScript 如何編碼 ”系列。
Object.create()Object.create() 方法用于創(chuàng)建一個新對象,并將其鏈接到現(xiàn)有的對象原型。
我們可以創(chuàng)建一個job對象實(shí)例,并將其擴(kuò)展為更具體的對象。
// Initialize an object with properties and methods const job = { position: "cashier", type: "hourly", isAvailable: true, showDetails() { const accepting = this.isAvailable ? "is accepting applications" : "is not currently accepting applications"; console.log(`The ${this.position} position is ${this.type} and ${accepting}.`); } }; // Use Object.create to pass properties const barista = Object.create(job); barista.position = "barista"; barista.showDetails();
Output The barista position is hourly and is accepting applications.
barista 對象現(xiàn)在有一個 position 屬性 - 但是所有其他屬性和方法都可以通過 job 的原型獲得。通過Object.create()來實(shí)現(xiàn)最小化重復(fù),對于保持代碼DRY十分有效。
Object.keys()Object.keys() 會創(chuàng)建一個包含對象鍵的數(shù)組。
我們可以創(chuàng)建一個對象并打印鍵的數(shù)組。
// Initialize an object const employees = { boss: "Michael", secretary: "Pam", sales: "Jim", accountant: "Oscar" }; // Get the keys of the object const keys = Object.keys(employees); console.log(keys);
Output ["boss", "secretary", "sales", "accountant"]
Object.keys() 還可用于迭代對象的鍵和值。
// Iterate through the keys Object.keys(employees).forEach(key => { let value = employees[key]; console.log(`${key}: ${value}`); });
Output boss: Michael secretary: Pam sales: Jim accountant: Oscar
for-in 循環(huán)和Object.keys()返回的可枚舉屬性有一個區(qū)別:
for-in 循環(huán)同時也會遍歷原型屬性
Object.keys() 只會返回自有(實(shí)例)屬性
Object.keys() 對于檢查對象的長度也很有用。
// Get the length of the keys const length = Object.keys(employees).length; console.log(length);
Output 4
使用該 length 屬性,我們能夠計算employees包含4個自有屬性。
Object.values()Object.values() 創(chuàng)建一個包含對象值的數(shù)組。
// Initialize an object const session = { id: 1, time: `26-July-2018`, device: "mobile", browser: "Chrome" }; // Get all values of the object const values = Object.values(session); console.log(values);
Output [1, "26-July-2018", "mobile", "Chrome"]
Object.keys()和Object.values()允許您從對象返回數(shù)據(jù)。
Object.entries()Object.entries() 創(chuàng)建對象的鍵/值對的嵌套數(shù)組。
// Initialize an object const operatingSystem = { name: "Ubuntu", version: 18.04, license: "Open Source" }; // Get the object key/value pairs const entries = Object.entries(operatingSystem); console.log(entries);
Output [ ["name", "Ubuntu"] ["version", 18.04] ["license", "Open Source"] ]
一旦我們有了鍵/值對數(shù)組,我們就可以使用該forEach()方法循環(huán)并處理結(jié)果。
// Loop through the results entries.forEach(entry => { const [key, value] = entry; console.log(`${key}: ${value}`); });
Output name: Ubuntu version: 18.04 license: Open Source
Object.entries() 方法僅返回對象實(shí)例自己的屬性,而不返回可通過其原型繼承的任何屬性。
Object.assign()Object.assign() 用于把一個對象的值復(fù)制到另一個對象。
我們可以創(chuàng)建兩個對象,使用Object.assign()方法將它們合并。
// Initialize an object const name = { firstName: "Philip", lastName: "Fry" }; // Initialize another object const details = { job: "Delivery Boy", employer: "Planet Express" }; // Merge the objects const character = Object.assign(name, details); console.log(character);
Output {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}
也可以使用展開語法(Spread syntax)來完成相同的任務(wù)。在下面的代碼中,我們將通過展開語法合并name和details對象,來聲明character對象。
// Initialize an object const name = { firstName: "Philip", lastName: "Fry" }; // Initialize another object const details = { job: "Delivery Boy", employer: "Planet Express" }; // Merge the object with the spread operator const character = {...name, ...details} console.log(character);
Output {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}
展開語法(Spread syntax) 在對象語法中也成為淺層克隆(shallow-cloning)。
Object.freeze()Object.freeze() 防止修改對象的屬性和值,并防止在對象中添加或刪除屬性。
// Initialize an object const user = { username: "AzureDiamond", password: "hunter2" }; // Freeze the object const newUser = Object.freeze(user); newUser.password = "*******"; newUser.active = true; console.log(newUser);
Output {username: "AzureDiamond", password: "hunter2"}
在上面的例子中,我們試圖重寫密碼用*******覆蓋hunter2,但password的值能保持不變。我們還嘗試添加一個新屬性active,但沒有添加。
Object.isFrozen() 可用于確定對象是否已凍結(jié),并返回布爾值。
Object.seal()Object.seal()阻止將新屬性添加到對象,但允許修改現(xiàn)有屬性。這種方法類似于Object.freeze()。在實(shí)現(xiàn)下面的代碼之前刷新控制臺以避免錯誤。
// Initialize an object const user = { username: "AzureDiamond", password: "hunter2" }; // Seal the object const newUser = Object.seal(user); newUser.password = "*******"; newUser.active = true; console.log(newUser);
Output {username: "AzureDiamond", password: "*******"}
新active屬性未添加到密封對象,但password屬性已成功更改。
Object.isSealed() 可用于確定對象是否已封閉,并返回布爾值。
Object.getPrototypeOf()Object.getPrototypeOf()用于獲取[[Prototype]]對象的內(nèi)部隱藏,也可通過 __proto__ 屬性訪問。
在這個例子中,我們可以創(chuàng)建一個可以訪問Array原型的數(shù)組。
const employees = ["Ron", "April", "Andy", "Leslie"]; Object.getPrototypeOf(employees);
Output [constructor: ?, concat: ?, find: ?, findIndex: ?, pop: ?, …]
我們可以在該原型輸出中看到employees數(shù)組訪問pop,find以及其他數(shù)組原型方法。我們可以通過測試employees原型來證實(shí)這一點(diǎn)Array.prototype。
Object.getPrototypeOf(employees) === Array.prototype;
Output true
此方法可用于獲取有關(guān)對象的更多信息或確保它可以訪問另一個對象的原型。
還有一種相關(guān)Object.setPrototypeOf()方法將一個原型添加到另一個對象。建議您使用Object.create(), 因?yàn)樗欤阅芨摺?/p> 結(jié)論
對象有許多有用的方法可以幫助我們修改,保護(hù)和迭代它們。在本教程中,我們回顧了如何創(chuàng)建和分配新對象,迭代對象的鍵和/或值,以及凍結(jié)或密封對象。
如果您需要查看JavaScript對象,可以閱讀“了解 JavaScript中的對象” 。如果您想熟悉原型鏈,可以查看“ 了解JavaScript中的原型和繼承”。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/103735.html
摘要:在中,當(dāng)使用關(guān)鍵字調(diào)用函數(shù)構(gòu)造函數(shù)時,函數(shù)構(gòu)造函數(shù)中也有這個概念,但是它不是惟一的規(guī)則,而且常常可以引用來自不同執(zhí)行上下文的不同對象。因此,我們使用調(diào)用函數(shù),可以看到這是對象,并且的屬性是正常的。 一直以來,javascript里邊的this都是一個很難理解的東西,之前看的最多的就是阮一峰老師關(guān)于this的理解: http://www.ruanyifeng.com/blo... htt...
摘要:操作符構(gòu)造步驟有三步構(gòu)造一個類的實(shí)例這個實(shí)例是一個空對象,并且他的屬性指向構(gòu)造函數(shù)的原型。不優(yōu)化原生的或自定義的作為構(gòu)造函數(shù)是及其不高效的。 原文地址:Javascript – How Prototypal Inheritance really works 在網(wǎng)上可以看到各種關(guān)于Javascript原型繼承的文章,但Javascript規(guī)范中只提供了new操作符這一種實(shí)現(xiàn)原型繼承的方法...
摘要:正在失業(yè)中的課多周刊第期我們的微信公眾號,更多精彩內(nèi)容皆在微信公眾號,歡迎關(guān)注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關(guān)于的不好之處。淺談超時一運(yùn)維的排查方式。 正在失業(yè)中的《課多周刊》(第3期) 我們的微信公眾號:fed-talk,更多精彩內(nèi)容皆在微信公眾號,歡迎關(guān)注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大的...
摘要:正在失業(yè)中的課多周刊第期我們的微信公眾號,更多精彩內(nèi)容皆在微信公眾號,歡迎關(guān)注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關(guān)于的不好之處。淺談超時一運(yùn)維的排查方式。 正在失業(yè)中的《課多周刊》(第3期) 我們的微信公眾號:fed-talk,更多精彩內(nèi)容皆在微信公眾號,歡迎關(guān)注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大的...
閱讀 3609·2021-11-15 11:37
閱讀 2974·2021-11-12 10:36
閱讀 4403·2021-09-22 15:51
閱讀 2381·2021-08-27 16:18
閱讀 882·2019-08-30 15:44
閱讀 2164·2019-08-30 10:58
閱讀 1769·2019-08-29 17:18
閱讀 3269·2019-08-28 18:25