摘要：中的所有對(duì)象都來(lái)自父的構(gòu)造函數(shù)。不同于數(shù)組的原型方法例如和只能被數(shù)組實(shí)例使用，對(duì)象方法直接來(lái)自構(gòu)造函數(shù)，并使用對(duì)象實(shí)例作為參數(shù)。這稱為靜態(tài)方法。創(chuàng)建對(duì)象的鍵值對(duì)的嵌套數(shù)組。可用于確定對(duì)象是否已凍結(jié)，并返回布爾值。

原文：How To Use Object Methods in JavaScript
作者：Tania Rascia
譯者：博軒

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

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

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

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

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

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();

Output

The barista position is hourly and is accepting applications.

barista 對(duì)象現(xiàn)在有一個(gè) position 屬性 - 但是所有其他屬性和方法都可以通過(guò) job 的原型獲得。通過(guò)Object.create()來(lái)實(shí)現(xiàn)最小化重復(fù)，對(duì)于保持代碼DRY十分有效。

Object.keys() 會(huì)創(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);

Output

["boss", "secretary", "sales", "accountant"]

Object.keys() 還可用于迭代對(duì)象的鍵和值。

// 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í)也會(huì)遍歷原型屬性
Object.keys() 只會(huì)返回自有（實(shí)例）屬性

Object.keys() 對(duì)于檢查對(duì)象的長(zhǎng)度也很有用。

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

console.log(length);

Output

4

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

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);

Output

[1, "26-July-2018", "mobile", "Chrome"]

Object.keys()和Object.values()允許您從對(duì)象返回?cái)?shù)據(jù)。

Object.entries() 創(chuàng)建對(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);

Output

[
    ["name", "Ubuntu"]
    ["version", 18.04]
    ["license", "Open Source"]
]

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

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);

Output

{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

也可以使用展開(kāi)語(yǔ)法(Spread syntax)來(lái)完成相同的任務(wù)。在下面的代碼中，我們將通過(guò)展開(kāi)語(yǔ)法合并name和details對(duì)象，來(lái)聲明character對(duì)象。

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

展開(kāi)語(yǔ)法(Spread syntax) 在對(duì)象語(yǔ)法中也成為淺層克隆(shallow-cloning)。

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);

Output

{username: "AzureDiamond", password: "hunter2"}

在上面的例子中，我們?cè)噲D重寫密碼用*******覆蓋hunter2，但password的值能保持不變。我們還嘗試添加一個(gè)新屬性active，但沒(méi)有添加。

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

Object.seal()阻止將新屬性添加到對(duì)象，但允許修改現(xiàn)有屬性。這種方法類似于Object.freeze()。在實(shí)現(xiàn)下面的代碼之前刷新控制臺(tái)以避免錯(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屬性未添加到密封對(duì)象，但password屬性已成功更改。

Object.isSealed() 可用于確定對(duì)象是否已封閉，并返回布爾值。

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

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

const employees = ["Ron", "April", "Andy", "Leslie"];

Object.getPrototypeOf(employees);

Output

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

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

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

Output

true

此方法可用于獲取有關(guān)對(duì)象的更多信息或確保它可以訪問(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ì)象，可以閱讀“了解 JavaScript中的對(duì)象” 。如果您想熟悉原型鏈，可以查看“ 了解JavaScript中的原型和繼承”。