【譯】如何在 JavaScript 中使用物件的方法

JavaScript · 發表 2019-04-22 03:03:34

摘要：原文：How To Use Object Methods in JavaScript 作者：Tania Rascia 譯者：博軒介紹 JavaScript 中，物件是鍵/值對的集合。值可以包含屬...

原文：How To Use Object Methods in JavaScript

作者：Tania Rascia

譯者：博軒

介紹

JavaScript 中，物件是鍵/值 對的集合。值可以包含屬性和方法，並且可以包含所有其他 JavaScript 資料型別，例如字串，數字和布林值。

JavaScript中的所有物件都來自父Object 的建構函式。Object 為我們提供了很多實用的內建方法，並且可以在單個物件中直接使用。不同於陣列的原型方法例如sort() 和reverse() 只能被陣列例項使用，物件方法直接來自Object 建構函式，並使用物件例項作為引數。這稱為靜態方法。

本教程將介紹重要的內建物件方法，下面的每個部分都涉及特定方法並提供使用示例。

前提

為了充分利用本教程，您應該熟悉建立，修改和使用物件，您可以在“ 瞭解JavaScript中的物件 ” 一文中檢視這些物件。

有關JavaScript的其他指導，您可以檢視“ JavaScript 如何編碼 ” 系列。

Object.create()

Object.create() 方法用於建立一個新物件，並將其連結到現有的物件原型。

我們可以建立一個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();

Output

The barista position is hourly and is accepting applications.

barista 物件現在有一個position 屬性 - 但是所有其他屬性和方法都可以通過job 的原型獲得。通過Object.create() 來實現最小化重複，對於保持程式碼DRY 十分有效。

Object.keys()

Object.keys() 會建立一個包含物件鍵的陣列。

我們可以建立一個物件並列印鍵的陣列。

// 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 迴圈和Object.keys() 返回的可列舉屬性有一個區別：

for-in 迴圈同時也會遍歷原型屬性

Object.keys() 只會返回自有（例項）屬性

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() 建立一個包含物件值的陣列。

// 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() 允許您從物件返回資料。

Object.entries()

Object.entries() 建立物件的鍵/值 對的巢狀陣列。

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

一旦我們有了鍵/值 對陣列，我們就可以使用該forEach() 方法迴圈並處理結果。

// 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() 方法僅返回物件例項自己的屬性，而不返回可通過其原型繼承的任何屬性。

Object.assign()

Object.assign() 用於把一個物件的值複製到另一個物件。

我們可以建立兩個物件，使用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) 來完成相同的任務。在下面的程式碼中，我們將通過展開語法合併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() 可用於確定物件是否已凍結，並返回布林值。

Object.seal()

Object.seal() 阻止將新屬性新增到物件，但允許修改現有屬性。這種方法類似於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);

Output

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

新active 屬性未新增到密封物件，但password 屬性已成功更改。

Object.isSealed() 可用於確定物件是否已封閉，並返回布林值。

Object.getPrototypeOf()

Object.getPrototypeOf() 用於獲取[[Prototype]] 物件的內部隱藏，也可通過__proto__ 屬性訪問。

在這個例子中，我們可以建立一個可以訪問Array 原型的陣列。

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

Object.getPrototypeOf(employees);

Output

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

我們可以在該原型輸出中看到employees 陣列訪問pop ，find 以及其他陣列原型方法。我們可以通過測試employees 原型來證實這一點Array.prototype 。

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

Output

true

此方法可用於獲取有關物件的更多資訊或確保它可以訪問另一個物件的原型。

還有一種相關Object.setPrototypeOf() 方法將一個原型新增到另一個物件。建議您使用Object.create() ，因為它更快，效能更高。

結論

物件有許多有用的方法可以幫助我們修改，保護和迭代它們。在本教程中，我們回顧瞭如何建立和分配新物件，迭代物件的鍵和/或值，以及凍結或密封物件。

如果您需要檢視JavaScript物件，可以閱讀“瞭解 JavaScript中的物件” 。如果您想熟悉原型鏈，可以檢視“ 瞭解JavaScript中的原型和繼承” 。