# [Day04] 物件型別
###### tags: `鐵人賽`

# 物件 Object
### 除了基本型別其他都可以歸類至物件型別
建立一個自定義的物件主要有兩種方式，一個是透過 new 關鍵字來建立一個物件實體，再替此物件新增屬性與方法，另一個是**物件實字**(Object literal)直接用大括號 `{}`建立物件，並且在建立的同時直接指定屬性或方法。
* 建立函式(new 關鍵字)

var person = new Object();

person.name = "Rex";
person.age = "25";
person.sayName = function() {
  alert( this.name );
};

* 物件實字(Object literal)

var person = { // 或直接指定屬性跟方法
  name: "Rex",
  age: "25",
  001: "abc-000",
  sayName: function() {
  alert( this.name );
  }
};  

因為相對於建構式來說更為簡短，而且在易讀性跟效能都優於建構函式，所以普遍會比較建議使用物件實字。
而我覺得在新增屬性後面是加`,`的部分自己較容易搞錯，檢查時可多加留意。

### 物件屬性存取
可以用透過`.`跟`[]`中括號來進行存取，兩者最大的不同是，當物件的索引鍵命名剛好是不符合 JS 的規則時，`[]`中括號可以正確存取。

person.name; // 'Rex'
person.001; // 報錯 Uncaught SyntaxError: Unexpected number
person["name"]; // 'Rex'
person["001"]; // 'abc-000'

### 物件屬性新增、刪除
新增屬性跟變數一樣直接用`=`，若想要刪除則透過 delete 關鍵字來刪除：

var person = {};
person.name2 = "Tom";

person.name2; // "Tom"

delete person.name2; // true
person.name2; // 被刪除變 undefined

### 判斷屬性是否存在
屬性不存在會回傳 undefined，如果想要檢查該屬性是否存在有三個方式

console.log(person.name); // 缺點是如果不存在或該屬性剛好是 undefined，則都會顯示 undefined
person.hasOwnProperty("name"); // 只會檢查物件本身
console.log("name" in person); // in 運算子會繼續順著原型鏈上檢查

# 陣列 Array
JS 的陣列可視作一種特別的物件，沒有規定一定要放什麼東西，可以是原始資料類型、另一個陣列、物件甚至函數。
要注意的是，陣列是有順序性的集合，所以只能透過`[]`加上索引來存取。
跟物件一樣可以透過
* new 關鍵字來建立

var a = new Array();

a[0] = "Tom";
a[1] = "Mike";
a[2] = "Jerry";

a.length; // 3

* 陣列實字的方式(實務上較常見的方式)

var b = [];

b[0] = "Tom";
b[1] = "Mike";
b[2] = "Jerry";

b.length; // 3

或者直接輸入值，不用再次輸入變數跟順序，各有利弊看情況使用

var c = ["Tom", "Mike", "jerry"];
c.length; // 3

陣列與字串一樣可以透過 length 屬性取得，而在陣列時 length 又可以被覆寫，如果原本 b.length = 3，覆寫成 b.length = 1, 後面的值就會被移除，如果覆寫成 b.length = 5，沒有的值會顯示 empty。
*b.length = 1, 剩下 Tom，Mike 跟 Ｊerry 被移除*
*b.length = 5，沒有的值會顯示 empty*

參考資料：
[卡斯柏 - JS 物件名詞解釋及常見觀念問題](https://wcc723.github.io/development/2020/09/21/js-object/)
[008天重新認識JavaScript](https://www.tenlong.com.tw/products/9789864344130)