---
# System prepended metadata

title: 物件
tags: [物件, ' obj']

---

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

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

### 物件的格式
```javascript=
Object = {
    物件屬性1: 屬性值1,
    物件屬性2: 屬性值2,
    物件屬性3: 屬性值3,
};
```
- **實際用物件方式描述一間房子**

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

  以例子來看，變數house裡的door，每個門所屬位置都不同，材質不同、數量也不同，要詳細描述就以==陣列包物件==的方式來呈現。
    ```javascript=
    let house = {
      levelGround: 30,
      door: [
        {
          area: 'bedroom',
          material: 'wood',
          num: 1,
        },
        {
          area: 'bathroom',
          material: 'plastic',
          num: 1,
        },
      ],
    };
    ```
### 如何==取==物件的值

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

```物件名稱.要取值的物件屬性```

```javascript=16
console.log(house.levelGround);    //30

// 把levelGround的值取出，再賦予給變數houseLevelGround
let houseLevelGround = house.levelGround;
```
也可以把物件屬性值取出，在賦予給新的變數。==物件是傳址不傳值==
<br>

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

新增了一個空物件```person```。
```javascript=
let person = {};
```
要新增name、age、sex、isWakeUp這幾個屬性，並賦予值。

```物件名稱.要新增的物件屬性 = 賦予的屬性值```

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

// {name: "john", age: 20, sex: "male", isWakeUp: true}
```
<br>

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

```物件名稱.要修改屬性值的屬性名稱 = 賦予新的屬性值```

```javascript=
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>

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

```delete 物件名稱.物件屬性``` 

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

```javascript=13
delete person.age;
console.log(person);
// {name: "mary", sex: "female", isWakeUp: false}
```
<br>

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

```物件名稱[]```，[]內以**字串形式放入物件屬性**。```物件名稱['物件屬性']```

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

或是把字串形式的物件屬性，**賦予其他變數**，再把變數放到中括號內。
```javascript=
let person = {
    name: "john",
    age: 20,
    sex: "male", 
    isWakeUp: true,
};
let text = 'name';
console.log(person[text]);    // john
```

#### 為什麼要用這種方式讀取物件資料
在JSON格式資料，可能會出現```'001'```這種格式的屬性。
在**物件取值.的後面無法使用數字**，這時就要用==物件屬性字串取值==的方式
```javascript=
let person = {
    name: "john",
    age: 20,
    sex: "male", 
    isWakeUp: true,
    '001': 'hello',
};
console.log(person['001']);    //hello
```
<br>

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

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

```javascript=
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`的資料長度。
```javascript=
console.log(Object.keys(userInfo).length);
```