[快速入门前端 52] JavaScript：Object 物件

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() 取得所有的属性值。
语法：

// 取得物件中所有的 keyObject.keys(物件); // 会回传一个阵列// 取得物件中所有的 valueObject.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'; // 加入新的属性 - petconsole.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); // trueconsole.log("name12" in object); // false

上一篇：[快速入门前端 51] JavaScript：Array 阵列 (2) 阵列值的新增、删除、修改和判断
下一篇：[快速入门前端 53] JavaScript：Function 函式 (1) 函式的种类
系列文章列表：[快速入门前端] 系列文章索引列表