---
title: 物件
tags: 物件, obj,
description:
---
物件 Object
===
### 什麼是物件
物件可將變數資訊描述的**較詳細**。

例如：用物件**描述**一間房子。坪數、窗戶、門、電燈、馬桶、陽台....
<br>

### 物件的格式

Object = {
    物件屬性1: 屬性值1,
    物件屬性2: 屬性值2,
    物件屬性3: 屬性值3,
};

- **實際用物件方式描述一間房子**

物件的**屬性值**除了常見的```string``` ```number```...，可以是==物件==，也可以是==陣列包物件==。

以例子來看，變數house裡的door，每個門所屬位置都不同，材質不同、數量也不同，要詳細描述就以==陣列包物件==的方式來呈現。

    let house = {
      levelGround: 30,
      door: [
        {
          area: 'bedroom',
          material: 'wood',
          num: 1,
        },
        {
          area: 'bathroom',
          material: 'plastic',
          num: 1,
        },
      ],
    };

### 如何==取==物件的值

以上面的例子來看，要取得```levelGround```屬性值該怎麼寫？

console.log(house.levelGround); //30

// 把levelGround的值取出，再賦予給變數houseLevelGround
let houseLevelGround = house.levelGround;

也可以把物件屬性值取出，在賦予給新的變數。==物件是傳址不傳值==
<br>

### 如何==新增==物件屬性

新增了一個空物件```person```。

let person = {};

要新增name、age、sex、isWakeUp這幾個屬性，並賦予值。

person.name = 'john';
person.age = 20;
person.sex = 'male';
person.isWakeUp = true;
console.log(person);

// {name: "john", age: 20, sex: "male", isWakeUp: true}

<br>

### 如何==修改==物件屬性值

let person = {
name: "john",
age: 20,
sex: "male",
isWakeUp: true,
};
person.name = 'mary';
person.age = 18;
person.sex = 'female';
person.isWakeUp = false;
console.log(person);
// {name: "mary", age: 18, sex: "female", isWakeUp: false}

<br>

### 如何==刪除==物件屬性

接續上面的例子，把物件```person```屬性```age```**刪除**後，回去看物件```person```已經**沒有**```age```這個屬性。

delete person.age;
console.log(person);
// {name: "mary", sex: "female", isWakeUp: false}

<br>

### 另一種讀取屬性值的方式

let person = {
name: "john",
age: 20,
sex: "male",
isWakeUp: true,
};
console.log(person['name']); // john

或是把字串形式的物件屬性，**賦予其他變數**，再把變數放到中括號內。

let person = {
name: "john",
age: 20,
sex: "male",
isWakeUp: true,
};
let text = 'name';
console.log(person[text]); // john

#### 為什麼要用這種方式讀取物件資料
在JSON格式資料，可能會出現```'001'```這種格式的屬性。
在**物件取值.的後面無法使用數字**，這時就要用==物件屬性字串取值==的方式

let person = {
name: "john",
age: 20,
sex: "male",
isWakeUp: true,
'001': 'hello',
};
console.log(person['001']); //hello

<br>

### 如何取得物件==資料長度==

**`Object.kets()`**，可以將物件內的屬性（不含值）全部取出，依序放置在陣列內，並回傳。

const userInfo = {
age: 20,
name: '小明',
sex: 'male',
hobby: ['前端開發', '讀書', '跑步'],
favoriteFood: '滷肉飯',
isVegetarian: false,
};
console.log(Object.keys(userInfo));

// ["age", "name", "sex", "hobby", "favoriteFood", "isVegetarian"]

再使用**取陣列長度**的方式取`Object.keys(userInfo)`的資料長度，就能得知物件`userInfo`的資料長度。

console.log(Object.keys(userInfo).length);