JavaScript中的對象是鍵/值(key/value)對的集合皇钞。值可以包含屬性和方法,并且可以包含所有其他JavaScript數(shù)據(jù)類型松捉,例如字符串夹界,數(shù)字和布爾值。
JavaScript中的所有對象都來自父對象構(gòu)造函數(shù)隘世。對象有許多有用的內(nèi)置方法可柿,我們可以使用和訪問這些方法來簡化處理單個對象的工作。與數(shù)組實例上使用的sort()和reverse()等數(shù)組原型方法不同丙者,對象方法直接用于對象構(gòu)造函數(shù)复斥,并將對象實例用作參數(shù)。這就是所謂的靜態(tài)方法械媒。
Object.create()
Object.create()用于創(chuàng)建一個新對象并鏈接現(xiàn)有對象的原型目锭。
我們可以創(chuàng)建一個job對象實例,并將其擴展到更特定的對象纷捞。
// 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()
輸出:
The barista position is hourly and is accepting applications.
barista
對象現(xiàn)在有一個屬性—position
痢虹,但是job中的所有其他屬性和方法都可以通過原型獲得。Object.create()
有助于通過最小化重復(fù)來保持代碼的干爽主儡。
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)
輸出:
["boss", "secretary", "sales", "accountant"]
Object.keys
可用于迭代對象的鍵和值缀辩。
// Iterate through the keys
Object.keys(employees).forEach(key => {
let value = employees[key]
console.log(`${key}: ${value}`)
})
輸出:
boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar</pre>
Object.keys
對于檢查對象的長度也很有用臭埋。
// Get the length of the keys
const length = Object.keys(employees).length
console.log(length)
輸出:
4
使用length
屬性,我們可以計算employee
的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)
輸出:
[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)
輸出:
[
["name", "Ubuntu"]
["version", 18.04]
["license", "Open Source"]
]
一旦我們有了鍵/值對數(shù)組荣恐,我們就可以輕松地使用該forEach()方法循環(huán)并處理結(jié)果。
const entries = Object.entries(operatingSystem)
// Loop through the results
entries.forEach(entry => {
let key = entry[0]
let value = entry[1]
console.log(`${key}: ${value}`)
})
輸出:
name: Ubuntu
version: 18.04
license: Open Source</pre>
Object.entries()方法方法將只返回對象實例本身的屬性,而不返回可能通過其原型繼承的任何屬性叠穆。
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)
輸出:
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}</pre>
也可以使用spread運算符(...)來完成相同的任務(wù)硼被。
// Merge the object with the spread operator
const character = { ...name, ...details }
console.log(character)
輸出:
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}</pre>
對象文字中的這種擴展語法也稱為淺層克隆示损。
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)
輸出:
{username: "AzureDiamond", password: "hunter2"}
在本例中检访,我們試圖用******重寫密碼 hunter2
,但是password
屬性保持不變仔掸。我們還嘗試添加一個新屬性active
脆贵,但是沒有添加。
isfrozen()可用來確定對象是否被凍結(jié)起暮,并返回一個布爾值卖氨。
Object.seal()
Object.seal()可防止將新屬性添加到對象,但允許修改現(xiàn)有屬性负懦。這種方法類似于Object.freeze()筒捺。
// 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)
輸出:
{username: "AzureDiamond", password: "*******"}
新屬性active
未添加到密封對象,但password
屬性已成功更改密似。
Object.getPrototypeOf()
Object.getPrototypeOf()用于獲取[[Prototype]]
對象的內(nèi)部隱藏焙矛,也可通過__proto__
屬性訪問。
在這個例子中残腌,我們可以創(chuàng)建一個可以訪問Array原型的數(shù)組村斟。
const employees = ['Ron', 'April', 'Andy', 'Leslie']
Object.getPrototypeOf(employees)</pre>
輸出:
[constructor: ?, concat: ?, find: ?, findIndex: ?, pop: ?, …]
我們可以在該原型輸出中看到employees
數(shù)組訪問pop
,find
以及其他數(shù)組原型方法抛猫。我們可以通過測試employees
原型來證實這一點Array.prototype
蟆盹。
Object.getPrototypeOf(employees) === Array.prototype;
輸出:
true
此方法可用于獲取有關(guān)對象的更多信息或確保它可以訪問另一個對象的原型。還有一種相關(guān)Object.setPrototypeOf()
方法將一個原型添加到另一個對象闺金。建議您使用逾滥,Object.create()
因為它更快,性能更高败匹。
結(jié)論
對象有許多有用的方法可以幫助我們修改寨昙,保護和迭代它們。在本教程中掀亩,我們回顧了如何創(chuàng)建和分配新對象舔哪,迭代對象的鍵和/或值,以及凍結(jié)或密封對象槽棍。
原文地址:如何在JavaScript中使用對象方法捉蚤?