介紹

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)余姚,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

JavaScript 中，對象是 鍵/值 對的集合。值可以包含屬性和方法，并且可以包含所有其他 JavaScript 數(shù)據(jù)類型，例如字符串，數(shù)字和布爾值。

JavaScript中的所有對象都來自父 Object 的構(gòu)造函數(shù)。Object 為我們提供了很多實(shí)用的內(nèi)置方法，并且可以在單個(gè)對象中直接使用。不同于 數(shù)組的原型方法 例如 sort() 和 reverse() 只能被數(shù)組實(shí)例使用，對象方法直接來自 Object 構(gòu)造函數(shù)，并使用對象實(shí)例作為參數(shù)。這稱為靜態(tài)方法。

本教程將介紹重要的內(nèi)置對象方法，下面的每個(gè)部分都涉及特定方法并提供使用示例。

前提

為了充分利用本教程，您應(yīng)該熟悉創(chuàng)建，修改和使用對象，您可以在“ 了解JavaScript中的對象 ”一文中查看這些對象。

有關(guān)JavaScript的其他指導(dǎo)，您可以查看“ JavaScript 如何編碼 ”系列。

Object.create()

Object.create() 方法用于創(chuàng)建一個(gè)新對象，并將其鏈接到現(xiàn)有的對象原型。

我們可以創(chuàng)建一個(gè)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)在有一個(gè) position 屬性 - 但是所有其他屬性和方法都可以通過 job 的原型獲得。通過Object.create()來實(shí)現(xiàn)最小化重復(fù)，對于保持代碼DRY十分有效。

Object.keys()

Object.keys() 會創(chuàng)建一個(gè)包含對象鍵的數(shù)組。

我們可以創(chuàng)建一個(gè)對象并打印鍵的數(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()返回的可枚舉屬性有一個(gè)區(qū)別：

for-in 循環(huán)同時(shí)也會遍歷原型屬性

Object.keys() 只會返回自有(實(shí)例)屬性

Object.keys() 對于檢查對象的長度也很有用。

 
 
 
  
  
  
// Get the length of the keys  
  
  
  
const length = Object.keys(employees).length;  
  
  
  
console.log(length);  
 
 

 
 
 
  
  
  
Output  
  
  
  
4  
 
 

使用該 length 屬性，我們能夠計(jì)算employees包含4個(gè)自有屬性。

Object.values()

Object.values() 創(chuàng)建一個(gè)包含對象值的數(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()允許您從對象返回?cái)?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() 用于把一個(gè)對象的值復(fù)制到另一個(gè)對象。

我們可以創(chuàng)建兩個(gè)對象，使用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的值能保持不變。我們還嘗試添加一個(gè)新屬性active，但沒有添加。

Object.isFrozen() 可用于確定對象是否已凍結(jié)，并返回布爾值。

Object.seal()

Object.seal()阻止將新屬性添加到對象，但允許修改現(xiàn)有屬性。這種方法類似于Object.freeze()。在實(shí)現(xiàn)下面的代碼之前刷新控制臺以避免錯(cuò)誤。

 
 
 
  
  
  
// 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__ 屬性訪問。

在這個(gè)例子中，我們可以創(chuàng)建一個(gè)可以訪問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)對象的更多信息或確保它可以訪問另一個(gè)對象的原型。

還有一種相關(guān)Object.setPrototypeOf()方法將一個(gè)原型添加到另一個(gè)對象。建議您使用Object.create()， 因?yàn)樗?，性能更高?/p>

結(jié)論

對象有許多有用的方法可以幫助我們修改，保護(hù)和迭代它們。在本教程中，我們回顧了如何創(chuàng)建和分配新對象，迭代對象的鍵和/或值，以及凍結(jié)或密封對象。

如果您需要查看JavaScript對象，可以閱讀“了解 JavaScript中的對象” 。如果您想熟悉原型鏈，可以查看“ 了解JavaScript中的原型和繼承”。

網(wǎng)站欄目：如何在JavaScript中使用對象的方法
分享鏈接：http://uogjgqi.cn/article/cojehhp.html