物件 Object

JS-6: 物件全解析

電資鼠

發佈於前端網頁程式設計入門

更新於 2025/03/03發佈於 2025/03/03閱讀時間約 10 分鐘

物件 Object

定義:

物件是一種無序的鍵值對（key-value pair）的集合。
每個鍵（key）都是唯一的，鍵的值可以是任何型別。

創建物件:

let person = {
    name: "Alice",
    "age year": 25, //age year中間有空白，故需用""包裹起來作為鍵值。
    isStudent: true,
};

存取和確認屬性:

console.log(person.name);  // "Alice"（點表示法）
console.log(person["age year"]); // 25（方括號表示法）
console.log(person.hasOwnProperty("name"));  // true (確認有沒有特定的屬性)
console.log("name" in person);  // true (確認有沒有特定的屬性)

新增或修改屬性:

person.height = 170; // 新增屬性
person.name = "Bob"; // 修改屬性
console.log(person);  // 輸出: { name: 'Bob', 'age year': 25, isStudent: true, height: 170 }

刪除屬性:

delete person.isStudent;
console.log(person); // { name: "Bob", 'age year': 25, height: 170 }

或者:

const {isStudent, ...remainingProperties} = person;
console.log(remainingProperties);  // { name: 'Bob', 'age year': 25, height: 170 }

遍歷物件:

let person = {
    name: "Alice",
    "age year": 25,
    isStudent: true,
};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
/* 輸出
name: Alice
age year: 25
isStudent: true
*/

基礎方法使用:

let person = {
    name: "Alice",
    "age year": 25,
    isStudent: true,
};
let keys = Object.keys(person);   // 獲取所有鍵 [ 'name', 'age year', 'isStudent' ]
console.log(keys);
let values = Object.values(person); // 獲取所有值 [ 'Alice', 25, true ]
console.log(values);
let entries = Object.entries(person); // 獲取鍵值對 [ [ 'name', 'Alice' ], [ 'age year', 25 ], [ 'isStudent', true ] ]
console.log(entries);

好，目前你對於物件的概念有了初步掌握，我們接著繼續探索更多內容。

嵌套物件

let person = {
    name: "Alice",
    details: {
        age: 25,
        hobbies: ["reading", "swimming"]
    }
};

console.log(person.details.hobbies[1]);  // 輸出: "swimming"

帶有方法的物件

const person = {
    name: "Alice",
    age: 25,
    sayhello: function() {
        return `Hello, my name is ${this.name}, I'm ${this.age} years old`
    },
};

console.log(person.sayhello());  // 輸出: Hello, my name is Alice, I'm 25 years old

this表示這個物件本身。
方法與物件相關聯，而函數是獨立的。

Object 構造函數

用於創建和初始化對象，透過 Object 構造函數，你可以建立物件、操作物件屬性，並存取物件相關的工具方法。

雖然日常開發中更常用物件字面值 {}，但對於進階功能如凍結物件等，Object 提供了不可或缺的方法。

創建:

const obj1 = new Object();  // 相當於 const obj2 = {};

凍結物件:

const obj = { a: 1 };
Object.freeze(obj);  // 凍結物件，防止添加、修改或刪除屬性。
obj.a = 2; // 無效，屬性無法修改
console.log(obj); // { a: 1 }

const obj2 = { a: 1 };
Object.seal(obj2);  // 封閉物件，防止添加或刪除屬性，但允許修改現有屬性值。
obj2.a = 2; // 可以修改
obj2.b = 3; // 無效，無法添加屬性
console.log(obj2); // { a: 2 }

?.

安全地訪問物件，而不必擔心他們是否存在。

let car = {
    brand: "Toyota",
    model: "Corolla"
};

console.log(car?.color);  // undefined
console.log(car?.brand);  // Toyota

展開運算符

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }

const person = {
    name: "Alice",
    details: {
        age: 25,
        hobbies: ["reading", "swimming"]
    }
};
const {name, details} = person;
console.log(name);  // Alice
console.log(details);  // { age: 25, hobbies: [ 'reading', 'swimming' ] }

解構

const person = { 
  address: { 
    street: "sample-street"
  } 
}
const { address: { street } } = person;
console.log(street);  // "sample-street"

JSON 與物件的轉換

JSON 是一種輕量級的資料交換格式，通常用於在伺服器和客戶端之間傳輸數據。

它是以文字（String）的形式編寫的，遵循特定的語法規範，且設計上類似於 JavaScript 的物件字面值。

JSON 範例:

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "skills": ["JavaScript", "Python"]
}

JSON 與物件的轉換:

使用 JSON.parse() 將 JSON 字串轉換為 JavaScript 物件。

const jsonString = '{"name":"Alice","age":25}';
const obj = JSON.parse(jsonString);
console.log(typeof obj);  // object
console.log(obj); // { name: "Alice", age: 25 }

使用 JSON.stringify() 將 JavaScript 物件轉換為 JSON 字串。

const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(typeof jsonString);  // string
console.log(jsonString); // '{"name":"Alice","age":25}'