# { 物件教學 Object }
<div class="block">
**本篇會談到**
- 物件宣告
- 物件寫法
- 新增、讀值、刪除 delete
- 屬性可以被刪除，那變數可以嗎？
</div>
陣列是有幾筆資料在裡面，物件是一個東西裡面<font color="red">有哪些詳細細部的資訊</font>，是複合資料型態。
## ✐ 物件宣告
可以透過 Object Literal 或 Object Constructor 去宣告物件
### ➤ Object Literal (物件實字)
利用大括號去定義物件，裡面插入屬性與值，值可以是 number, string, function 都可以，而兩個屬性中間可以利用逗號`,` 去隔開。
```javascript=
// 1. 物件用大括號包起
var object1 = {
property: 'value',
// 2. 屬性property(可自訂名稱)，提供屬性值用冒號刮起。
// 3. 值value 可以是任何資料型態
// 4. 物件區隔用 逗號 , 分開
}
```
:::info
屬性定義一律要使用字串
:::
### ➤ Object Constructor (物件建構式)
利用 `new 加上 Object()`，直接插入一個物件，所產生的結果是物件，但大多情況下還是會比較常用『物件實字』的方式新增物件，這樣比較容易閱讀。
```javascript=
var object1 = {
property: 'value',
}
var object2 = new Object(object1);
// 宣告一個 object2 ，新增物件 object1 到 object2 中
```
如果插入一個數，會得到 number
```javascript=
var object2 = new Object(1);
// Number{1}
// 出現 number 的物件
```
如果插入一個字串，會得到 string
```javascript=
var object2 = new Object('1');
// String{1}
// 出現 string 的物件
```
## ✐ 物件寫法
### ➤ <font color="green">新增</font> 屬性與值到物件內
新增物件的屬性也有兩種方法：
#### ➷ （一） 使用 <font color="red">`.`</font> 點記法
**`物件名稱.屬性 = value`**
```javascript=
let farm={
farmer: 'Tom',
}
farm.chicken = 15;
console.log(farm);
// Object:{farmer: 'Tom',chicken:15}
console.log(farm.chicken);
// 15
```
#### ➷ （二） 使用 <font color="red">`[' ']`</font> 括弧記法
- 使用中括號的方式，不只可以使用『字串』去取值，也可以使用『變數』方式取值。
- 物件中有些屬性是數字 number ，這時候用點記法取值，無法取得，所以要改用中括號
- 可以插入**變數或特殊字元**
```javascript=
var family = {
name: '小明家',
1: '123'
}
// 1. 字串賦值
family['dog']='Tommy';
family['$'] = 311;
console.log(family);
// {name: "小明家", dog: "Tommy", $: 311}
// 2. 字串取值
console.log(family['name']);
// 小明家
// 2. 變數取值
let a = 'name';
consol.log(family[a])
// 小明家
console.log(family[1])
// 1
```
### ➤ 物件<font color="green">讀值</font>
物件讀取物件也有兩種方式：
#### ➷ （一） 使用 <font color="red">`.`</font> 點記法
- 通常情況下會使用.取值
- 以**字串**的方式尋找該object的屬性
```javascript=
var family = {
'name': '小明家',
};
console.log('1',family.name);
// 1 小明家
```
- **執行物件裡的方法**（點記法與括弧記法都可以！）
```javascript=
var family = {
name: ‘小明家’,
deposit: 1000,
members: {
mom: ‘老媽’,
ming: ‘小明’
},
callFamily: function() {
console.log(‘聯絡小明家’);
}
};
family.callFamily(); // 聯絡小明家
```
#### ➷ （二） 使用 <font color="red">`[' ']`</font> 括弧記法
-
```javascript=
var family = {
'name': '小明家',
};
console.log('2',family['name']);
// 2 小明家
```
:::success
**屬性為各種數字或特殊字元**時，或要**讀取變數**的情況下皆會使用[]。
:::
- **允許以變數**的方式取到值
```javascript=
var family = {
name: '小明家'
};
var a = 'name';
console.log(family.a); // undefined
// 利用 . 點記法方式取值，因為 family 沒有 a ，所以 undefined
console.log(family[a]); // 小明家
// 利用 a = 'name' 代入中括號，得到 family['name']，可以取得值
```
- **執行物件裡的方法**（點記法與括弧記法都可以！）
```javascript=
var family = {
name: '小明家',
deposit: 1000,
members: {
mom: '老媽',
ming: '小明'
},
callFamily: function() {
console.log('聯絡小明家');
}
};
family['callFamily'](); // 聯絡小明家
```
### ➤ 物件<font color="green">刪除</font>物件屬性
#### ➷ 使用[`delete`](https://hackmd.io/@3Ll7zkxzTdm0GYvz8VoF6g/HyzWz9R0u/%2FChGlG0E0Qsy3rhnwtUN0Lg#%E2%9E%A4-%E4%B8%80%E5%85%83%E9%81%8B%E7%AE%97%E5%AD%90)操作符。
範例1:
```javascript=
var family = {
name: '小明家',
deposit: 1000,
members: {
mom: '老媽',
ming: '小明'
},
$:300,
}
delete family.members.ming;
delete family['$'];
```
[範例2](https://hackmd.io/@unayojanni/HyzWz9R0u/%2Fm5NKLfVcROu_iC7DCMDX0w#全域、污染)
## ✐ 屬性可以被刪除，那變數可以嗎？
#### 變數不可以被刪除，屬性才可以
下方 JavaScript 中，a 宣吿後給予值， b 沒有宣告就給值，會發生？
```javascript=
var a = 1;
// a 賦予到 window 上
b = 2;
// b 也會賦予到 window 上
// 可看成 window.b = 2;
console.log(window);
// 操作 delete 看看
delete a; // false 無法被刪除
delete b; // true
console.log(window);
// b 消失， a 還存在
// 現在，再看一下 a, b
console.log(a);
// 1
console.log(b);
// b id not defined
```
a 與 b 同時出現在 window 下
###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}
Sign in with Wallet
Connect another wallet