Object 物件

陣列通常放的是較有相關性的資料，而物件則由多組 key (屬性): value (屬性名) 的格式組成，所以通常會包含各種類型的資料，其中 value 可以放入任何值，包含純值、陣列、或甚至是另一個物件。
完整 Object 格式：

let ObjectName = {
    key: value,
    key: value
}

宣告物件

// 宣告一個空的物件
// 方法一：直接創建一個空物件 (常見)
let object = {};

// 方法二：利用建構式創建一個新物件
let object = new Object();

// 方法三：宣告 + 賦值，直接創建一個有值的物件
let object = {name: 'amy', age: 18, gender: 'male'};

取出物件中的值

從物件中取值的方法有兩種，第一種為 object.key 簡單來說就是以物件和屬性名 (key) 來找某個值，第二種方法則是 object['key']，通常用在無法直接使用 object.key 的情況，例如要以變數中的字串來當作屬性名。
語法：

// 方法一
object.key;

// 方法二
object[key];

範例：

let object = {
    name: 'Amy',
    age: 14,
    gender: 'female'
};

console.log(object.name); // 'Amy'
console.log(object['age']); // 14 (使用此方法時屬性行需要加引號讓 JS 知道它是字串)
let text = 'gender';
console.log(object[text]); // 'female' (以變數的值作為 key 去物件中尋找)

取出物件中所有值

當我們不確定一 object 有多少個屬性 (key)，或屬性的名稱為何時，可以先取得所有的 屬性名 (key)，再利用每個屬性名取得該項的值，或者可以直接使用 Object.values() 取得所有的屬性值。
語法：

// 取得物件中所有的 key
Object.keys(物件); // 會回傳一個陣列

// 取得物件中所有的 value
Object.values(物件);

範例：

let object = {
    name: 'Amy',
    age: 14,
    gender: 'female'
};
console.log(Object.keys(object)); // ['name', 'age', 'gender']
console.log(Object.values(object)); // ['Amy', 14, 'female']

迴圈枚舉物件的 key

語法：

for (let 變數 in 物件名) {
    // 每次迴圈變數的值就會是物件的 key
};

let object = {
    name: 'Amy',
    age: 14,
    gender: 'female'
};

for (let key in object) {
    console.log(key); // 取得每一個 key
    console.log(object[key]); // 用 key 取得每個值
};

修改物件

Object 的新增和修改其實跟陣列差不多，可以直接以 object.key = 值 的方式加入或修改。

let object = {
    name: 'Amy',
    age: 14,
    gender: 'female'
};
object.age = 11;
console.log(object.age); // 11 (被修改)
object.pet = 'dog'; // 加入新的屬性 - pet
console.log(Object.keys(object)); // ['name', 'age', 'gender', 'pet']

刪除物件屬性

語法：

delete object.key;

範例：

let object = {
    name: 'Amy',
    age: 14,
    gender: 'female'
};
delete object.name; // 刪除 name 屬性
console.log(object); // {age: 14, gender: 'female'}

判斷陣列是否包含某屬性

在 Object 中，我們可以使用 in 來判斷物件中是否包含某 key (屬性)，會回傳一個 Boolean 值。
語法：

"key" in object;

範例：

let object = {
    name: 'Amy',
    age: 14,
    gender: 'female'
};
console.log("name" in object); // true
console.log("name12" in object); // false

上一篇：[快速入門前端 51] JavaScript：Array 陣列 (2) 陣列值的新增、刪除、修改和判斷
下一篇：[快速入門前端 53] JavaScript：Function 函式 (1) 函式的種類
系列文章列表：[快速入門前端] 系列文章索引列表