掌握 JavaScript 中的對象

JavaScript 中的對象

在 JavaScript 中，物件 是鍵值對的集合，其中值可以是資料（屬性）或函數（方法）。物件是 JavaScript 的基礎，因為 JavaScript 幾乎所有東西都是對象，包含陣列、函數，甚至是其他物件。

---

1.建立物件

A.對象字面量

建立物件最簡單的方法是使用大括號 {}。

範例：

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

B.物件建構子

使用物件建構函式建立一個空物件。

範例：

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

C.使用 Object.create()

此方法建立一個具有指定原型的新物件。

範例：

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

---

2.存取物件屬性

A.點符號

使用點 (.) 存取屬性。

範例：

console.log(person.name); // Output: Alice

B.括號表示法

使用方括號 ([]) 存取屬性。對於動態屬性名稱很有用。

範例：

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

---

3.新增、修改和刪除屬性

• 加：

person.country = "USA";
console.log(person.country); // Output: USA

• 修改：

person.age = 26;
console.log(person.age); // Output: 26

• 刪除：

delete person.age;
console.log(person.age); // Output: undefined

---

4.物件中的方法

當函數是物件的屬性時，它被稱為方法。

範例：

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!

---

5.迭代物件屬性

A.用於...

迭代物件的所有可枚舉屬性。

範例：

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

B.使用 Object.keys()

傳回物件鍵的陣列。

範例：

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});

C.使用 Object.entries()

傳回[鍵，值]對的陣列。

範例：

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

---

6.物件方法

JavaScript 提供了幾種內建方法來處理物件。

• Object.assign()：將屬性從一個物件複製到另一個物件。

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!

• Object.freeze()：防止修改物件。

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!

• Object.seal()：防止新增或刪除屬性，但允許修改現有屬性。

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!

---

7.原型與繼承

JavaScript 中的物件有一個原型，這是它們繼承屬性和方法的另一個物件。

範例：

console.log(person.name); // Output: Alice

---

8.物件解構

解構允許將物件的屬性提取到變數中。

範例：

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25

---

9.總結

• 物件是可以儲存屬性和方法的鍵值對。
• 使用物件文字進行簡單的物件建立。
• 使用點或括號表示法存取物件屬性。
• 使用 Object.keys()、Object.assign() 和 Object.freeze() 等內建方法進行有效的物件操作。
• 掌握物件對於理解原型和繼承等高階 JavaScript 概念至關重要。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握 JavaScript 中的對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！