什麼是物件？

物件就是一個先決條件下形成的大集合，在集合中的各種屬性。舉例來說，以一個班級當作物件，裡面的屬性就像是：

1. 是老師是誰
2. 有多少學生
3. 班級幹部是哪些人
4. 是否需要一樓教室

在上述的例子中，1所賦予的值是字串、2是數字、3是陣列（列出班級幹部都有誰）、4是布林值。由此可知，物件內可以放字串、數字、布林、陣列，甚至還有後續會特別提到的函式。

通常在使用時，物件和陣列不同之處在於，陣列內的資料，彼此的相似度很高，就像HTML中<ul>下的<li>列表。物件內的屬性相似度很低，但彼此在某個先決條件下，會將這些屬性看成一個個體，就像是上述例子的班級，裡面的屬性有很多，相似度也很低，但先決條件就是在同一個班級。

因為丟出物件再做處理既簡潔又方便，所以物件常常被被運用在API或後端資料庫。

物件的寫法

先用var來宣告物件，再為物件命名，接著用一個半形等號（=），再用一個半形大括弧（{}）包覆所有資料，每筆資料前為屬性（property），後為值（value），中間用半形冒號（:）分開，兩筆資料間用半形逗號（,）區隔且建議換行，最後一筆資料後不用半形逗號（,），最後的最後不要忘記，要在半形右大括弧（}）後加半形分號（;）。

var class = {
  tracherName: "John",
  students: 30,
  leaders: ["Rose", "Agnes", "Andy"],
  firstFloor: true
};

物件內的屬性命名

物件的屬性命名非常自由，可以用中文，甚至是以數字或字元來命名（但仍不能用半形連字號（ -）和半形句號（ .）），但取值操作時，中文名不會有問題，但數字或字元命名的屬性有可能會出現錯誤，因此在面對這類會出錯的屬性時，不能用平常的物件名.屬性名來取值，要用物件名['屬性名']，這樣就可以順利的取得值做後續操作了。

var example = {
  $: false,
  64: true,
  "加密檔案": true,
  紙質文件: true
};

example.64;//出現錯誤
example."加密檔案";//出現錯誤
example.$;//可以運行
example["64"];//可以運行
example.加密檔案;//可以運行
example["加密檔案"];//可以運行
example.紙質文件;//可以運行
example["紙質文件"];//可以運行

物件的運用

新增空物件

和在使用陣列時相同，新增空物件是一種常用的起手式。

var family = {};

下方的程式碼，只要物件名稱為family，都以此空物件為例。

新增資料

用物件名稱接半形句號（.），再接要新增的屬性名，之後接著用一個半形等號（=），再寫上該屬性的值。

family.father = "Bruce";
family.kidsName = ["John", "Jason", "Tim"];
family.haveCar = false;

讀取資料

用物件名稱接半形句號（.），再接要讀取的屬性名。

如果屬性是陣列，就按照陣列的方式操作。

family.father;
family.kidsName[0];

修改資料

用物件名稱接半形句號（.），再接要修改的屬性名，之後接著用一個半形等號（=），再寫上該屬性修改後的值。

family.haveCar = true;

在這裏，等號為賦予的意思，直接覆蓋掉原資料，賦予新值。

物件內的函式

要在物件內的放入函式，函式在這裡是屬於值，所以前面屬性的寫法一樣是屬姓名後接半形冒號（:），而後面屬於值的函式部分比較特別，直接寫function宣告函式，但不用為函式命名，直接接一個半形小括弧（()），緊跟著一個半形大括弧（{}），在大括弧中寫下要執行的程式。

要執行物件內的函式時，用物件名稱接半形句號（.）再接函式名稱後加半形小括弧呼叫。

var auto = {
  pw: function(){
    console.log("請輸入密碼");
  }
};

auto.pw();//執行函式

增加物件內的函式

像平常物件新增屬性的方式就可以，用物件名稱接半形句號（.），再接要新增的屬性名，之後接著用一個半形等號（=），後面就和寫函式的方法相同，只是不用命名函式。

auto.user = function(){
  console.log("請輸入用戶名");
}

陣列內的物件

陣列裡面可以放物件，只要按照陣列的方式操作即可。物件的表現方式為半形大括弧（{}），裡面放屬性與值，按照物件原本的撰寫方式。

var school = [
  {
    className: "3-A",
    teacherName: "Judy",
    student: 30,
    leaders: ["Amy", "Tom"]
  },{
    className: "2-A",
    teacherName: "Alex",
    student: 20,
    leaders: ["Ruby", "Jason"]
  }
];

讀取陣列內的物件資料

className為3-A的物件中student

school[0].student;

className為2-A的物件中第二位leaders

school[1].leaders[1];

內容參考課程範圍

• 六角學院 JavaScript 入門篇 - 學徒的試煉 Section 5 lecture37到40
• 六角學院JS 學徒特訓直播 JS 陣列與物件、forEach 56:40到1:21:19