iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

從零開始的JS學習之路系列 第 4

[Day04] 物件型別

物件 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 跟 Jerry 被移除

b.length = 5,沒有的值會顯示 empty

參考資料:
卡斯柏 - JS 物件名詞解釋及常見觀念問題
0 陷阱!0 誤解!8 天重新認識 JavaScript!

下一篇 運算式與運算子


上一篇
[Day03] 基本型別
下一篇
[Day05] 運算式與運算子
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言