image

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

JavaScript中的所有對(duì)象都來(lái)自父對(duì)象構(gòu)造函數(shù)。對(duì)象有許多有用的內(nèi)置方法，我們可以使用和訪(fǎng)問(wèn)這些方法來(lái)簡(jiǎn)化處理單個(gè)對(duì)象的工作。與數(shù)組實(shí)例上使用的sort()和reverse()等數(shù)組原型方法不同，對(duì)象方法直接用于對(duì)象構(gòu)造函數(shù)，并將對(duì)象實(shí)例用作參數(shù)。這就是所謂的靜態(tài)方法。

Object.create()

Object.create()用于創(chuàng)建一個(gè)新對(duì)象并鏈接現(xiàn)有對(duì)象的原型。

我們可以創(chuàng)建一個(gè)job對(duì)象實(shí)例，并將其擴(kuò)展到更特定的對(duì)象。

// 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對(duì)象現(xiàn)在有一個(gè)屬性—position，但是job中的所有其他屬性和方法都可以通過(guò)原型獲得。Object.create()有助于通過(guò)最小化重復(fù)來(lái)保持代碼的干爽。

Object.keys()

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

我們可以創(chuàng)建一個(gè)對(duì)象并打印鍵數(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 可用于迭代對(duì)象的鍵和值。

// 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 對(duì)于檢查對(duì)象的長(zhǎng)度也很有用。

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

console.log(length)

輸出：

4

使用length屬性，我們可以計(jì)算employee的4個(gè)屬性。

Object.values()

Object.values()創(chuàng)建一個(gè)包含對(duì)象值的數(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()是從對(duì)象返回?cái)?shù)據(jù)的簡(jiǎn)單直接的方法。

Object.entries()

Object.entries()創(chuàng)建一個(gè)對(duì)象的鍵/值對(duì)的嵌套數(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"]
]

一旦我們有了鍵/值對(duì)數(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()方法方法將只返回對(duì)象實(shí)例本身的屬性，而不返回可能通過(guò)其原型繼承的任何屬性。

Object.assign()

Object.assign()用于將值從一個(gè)對(duì)象復(fù)制到另一個(gè)對(duì)象。

我們可以創(chuàng)建兩個(gè)對(duì)象，并將它們與'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運(yùn)算符（...）來(lái)完成相同的任務(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>

對(duì)象文字中的這種擴(kuò)展語(yǔ)法也稱(chēng)為淺層克隆。

Object.freeze()

Object.freeze()可防止修改對(duì)象的屬性和值，并防止在對(duì)象中添加或刪除屬性。

// 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"}

在本例中，我們?cè)噲D用******重寫(xiě)密碼 hunter2，但是password屬性保持不變。我們還嘗試添加一個(gè)新屬性active，但是沒(méi)有添加。

isfrozen()可用來(lái)確定對(duì)象是否被凍結(jié)，并返回一個(gè)布爾值。

Object.seal()

Object.seal()可防止將新屬性添加到對(duì)象，但允許修改現(xiàn)有屬性。這種方法類(lèi)似于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未添加到密封對(duì)象，但password屬性已成功更改。

Object.getPrototypeOf()

Object.getPrototypeOf()用于獲取[[Prototype]]對(duì)象的內(nèi)部隱藏，也可通過(guò)__proto__屬性訪(fǎng)問(wèn)。

在這個(gè)例子中，我們可以創(chuàng)建一個(gè)可以訪(fǎng)問(wèn)Array原型的數(shù)組。

const employees = ['Ron', 'April', 'Andy', 'Leslie']
Object.getPrototypeOf(employees)</pre>

輸出：

[constructor: ?, concat: ?, find: ?, findIndex: ?, pop: ?, …]

我們可以在該原型輸出中看到employees數(shù)組訪(fǎng)問(wèn)pop，find以及其他數(shù)組原型方法。我們可以通過(guò)測(cè)試employees原型來(lái)證實(shí)這一點(diǎn)Array.prototype。

Object.getPrototypeOf(employees) === Array.prototype;

輸出：

true

此方法可用于獲取有關(guān)對(duì)象的更多信息或確保它可以訪(fǎng)問(wèn)另一個(gè)對(duì)象的原型。還有一種相關(guān)Object.setPrototypeOf()方法將一個(gè)原型添加到另一個(gè)對(duì)象。建議您使用，Object.create()因?yàn)樗?，性能更高?/p>

結(jié)論

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