iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

30天前端網頁技術超入門介紹系列 第 12

Day12. JavaScript 基礎常識介紹(四) - 物件

物件簡單介紹

物件是什麼?日常中可以看到的東西就能稱為物件,而網頁的物件只是將該東西的屬性列出。
https://ithelp.ithome.com.tw/upload/images/20200918/20119051VrWwKM2akK.jpg
(圖片來源: 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 出錯。


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


上一篇
Day11. JavaScript 基礎常識介紹(三) - 陣列
下一篇
Day13. JavaScript 基礎常識介紹(五) - 控制判斷(if...else、switch)
系列文
30天前端網頁技術超入門介紹30

尚未有邦友留言

立即登入留言