JavaScript 物件使用方法

發表於 2024-09-20 分類於 JavaScript

學習 JavaScript 物件的各種操作，包括如何讀取、修改和刪除屬性，以及使用 forEach() 遍歷物件的不同方法。

物件讀取方式

let home = {
    dogs: 10,
    people: 5,
    '789': 3
};

console.log(home.dogs); // 10
// console.log(home.789); // 會出錯
// 如果物件的屬性是數字，需使用以下方式讀取
console.log(home['789']); // 3

物件新增方式

let home = {
    dogs: 10,
    people: 5,
};

home.cat = 10;
console.log(home); // {dogs: 10, people: 5, cat: 10}

物件修改方式

let home = {
    dogs: 10,
    people: 5,
};

home.dogs = 5;
home.people = 24;
console.log(home); // {dogs: 5, people: 24}

刪除物件資料

let home = {
    dogs: 10,
    people: 5,
    cat: 3
};

delete home.cat;
console.log(home); // {dogs: 10, people: 5}

使用 `forEach()` 遍歷物件

使用 `Object.keys()`

const obj = {
    name: 'Jean-Luc Picard',
    rank: 'Captain'
};

console.log(Object.keys(obj)); // ['name', 'rank']

Object.keys(obj).forEach(key => {
    console.log(key, obj[key]);
    // name Jean-Luc Picard
    // rank Captain
});

使用 `Object.values()`

const obj = {
    name: 'Jean-Luc Picard',
    rank: 'Captain'
};

console.log(Object.values(obj)); // ['Jean-Luc Picard', 'Captain']

Object.values(obj).forEach(val => {
    console.log(val);
    // Jean-Luc Picard
    // Captain
});

使用 `Object.entries()`

const obj = {
    name: 'Jean-Luc Picard',
    rank: 'Captain'
};

console.log(Object.entries(obj)); 
// [
//   ["name", "Jean-Luc Picard"],
//   ["rank", "Captain"]
// ]

Object.entries(obj).forEach(([key, value]) => {
    console.log(key, value);
    // name Jean-Luc Picard
    // rank Captain
});

0%