物件簡單介紹

物件是什麼?日常中可以看到的東西就能稱為物件，而網頁的物件只是將該東西的屬性列出。

(圖片來源: Unsplash)

上面的咖啡杯就是物件，以 JavaScript 的物件格式表達的話就會呈現如下：

var drinkCoffee = function(){
    console.log('喝一口咖啡');
}
var cup = {
    name: 'coffee cup',
    color: 'white',
    material: 'ceramics',
    content: null,
    '中文名字': '咖啡杯',
    NAME: 'COFFEE CUP',
    1: 1,
    have: true,
    drink: drinkCoffee,
}

上面程式碼會先定義一個變數，而 cup 就是物件的名稱。
大括弧 {} 內的值稱為屬性，屬性由 (key/index) 和 value 組成。
每個屬性以逗號區分，該物件的最後一個屬性可以不用使用逗號。
忘記加 , 的話會出現 Uncaught SyntaxError: Unexpected identifier 錯誤訊息喔~

會寫 key 和 index 是因為這兩個說法都聽過有人講，怕之後在閱讀其他文章時搞不清楚所以先提及。以下以 key 為主。

如上面表示的 key 的命名：

• 有英文大小寫之分
• 能以數字開頭
• 能以中文命名

而 value 可以賦予字串、數值、布林值、function、null...物件型別。

抓取物件

要取出物件裡面的屬性，就在物件名稱後面用 . 再加上屬性名稱即可

console.log(cup.中文名字); // 咖啡杯

有抓過 JSON 檔案的話，常看到陣列及物件一起使用。這點是搭配陣列的索引值與物件的屬性特性來配合。對於大量資料來說這樣的組合運用起來相當順手。

以物件作為參數

之前在提及 function 的時候，有提到參數。Day10. JavaScript 基礎常識介紹(二) - function
在參數過多的時候，

function oneself (name, height, weight, gender, age, education...) {...}

使用物件來代替參數

function oneself (people) {...}
var people = {
    name: '',
    height: '',
    weight: '',
    gender: '',
    ...
}

這樣不僅增加程式碼的閱讀性，也因為改由物件型式，所以就算少輸入一個欄位，也不會造成整個 function 出錯。

明天是要來介紹控制判斷，就期待明天吧~