【JS學習筆記】Objects 物件

  做個課堂筆記,今天是物件。

在文章最前頭先做個小測試吧↓

var objvalue = { name: "pluto" , age:20 , };
document.write("objvalue[name]:"+ objvalue[name] +"<br>");
document.write("objvalue['name']:"+ objvalue['name'] +"<br>");
document.write("objvalue[\"name\"]:"+ objvalue["name"] +"<br>");
document.write("objvalue.name:"+ objvalue.name +"<br>");
document.write("objvalue[age]:"+ objvalue[age] +"<br>");
document.write("objvalue['age']:"+ objvalue['age'] +"<br>");
document.write("objvalue[\"age\"]:"+ objvalue["age"] +"<br>");
document.write("objvalue.age:"+ objvalue.age +"<br>");

輸出為何?有哪些會正常顯示值?哪些會有錯誤?

objvalue[name]:undefined
objvalue['name']:pluto
objvalue["name"]:pluto
objvalue.name:pluto
//objvalue[age] 錯誤
objvalue['age']:20
objvalue["age"]:20
objvalue.age:20

這是為什麼呢?先從基礎開始說吧。

資料型別

最新的 ECMAScript 標準定義了七種資料型別:

有八種資料型別是原始型別:

  • Boolean
  • Null
  • Undefined
  • Number
  • BigInt
  • String
  • Symbol(於 ECMAScript 6 新定義)

另外還有 Object

為什麼要將Object分開說呢?

  因為除了object外其他七種類型都稱為原始(primitive),它們的值只能包含一個東西(字串、數字…等),相反,物件用於存儲資料和更複雜的實體的集合。

:function、array、date 都屬於 Object的一種,function是可呼叫的object,array是結構較嚴謹的object。

建立物件

有兩種方式可以創建物件,先直接看例子↓

建構形式(constructed form)

首先建立一個物件並逐一新增name、age、website屬性。

var myObj = new Object();
myObj.name = 'pluto';
myObj.age = 20;
myObj.website = 'https://namepluto.com/';

務必注意大小寫,必須與屬性名稱完全相同,關於屬性/變數的命名又是另一回事了…放在額外補充吧。

document.write(myObj.age); // 20
document.write(myObj.Age); // undefined

宣告式(declarative)

透過 {key : value , key : value , }; 建立一個物件並新增name、age屬性。

var myObj = {
  name: "pluto",
  age:20,
};
document.write(myObj.name); // pluto
document.write(myObj.age); // 20

這兩種方式差在哪呢?

  簡單說,這兩種建立物件的方式主要的差別為新增屬性時,宣告式可在物件建立時一次全部加入,但建構形式必須在物件建立後一筆一筆新增。而一次一次新增屬性會導致程式執行效率降低,程式碼排版也很雜亂,因此這種方式很少使用。


一個小提示:當你需要使用包含空格的屬性名稱時,請將名稱用雙引號” ” 括起來。

var myObj = { "Hello World" : "Hello ! " , };

當你輸出 myObj.Hello World 時就會發生錯誤,為什麼?

因為電腦理解的是你要輸出 myObj.Hello 而它不知道 World 是什麼東西。

那應該如何解決呢?

// 使用中括號
document.write(myObj["Hello World"]);
// 使用變數
var str = "Hello World";
document.write(myObj[str]);

存取物件屬性

  我們都知道,物件的內容是由屬性組成的,而屬性又是由 key 跟 value 一對一對而組成,那麼今天我們要如何來存取物件的屬性呢?一樣有兩種方法。

特性存取(property access)

使用 . 來存取物件屬性。

var myObj = {
  name : 'JavaScript',
  year : 1995 ,
};
document.write(myObj.name); // JavaScript
document.write(myObj.year); // 1995

鍵值存取(key access)

使用 [ ] 來存取物件屬性。

var myObj = {
  name : 'JavaScript',
  year : 1995 ,
};
document.write(myObj['name']); // JavaScript
document.write(myObj['year']); // 1995

  但是一開始使用鍵值存取真的會遇到很多問題,比如該加雙引號還是單引號,該不該加引號,加不加引號有什麼差別?想我剛開始學的時候也是為了引號一直在測試 …

  我個人測試的結果是不管新增還是存取屬性時使用單雙引號都沒差,Key是否要加引號也沒差 ( 除了特殊情況,例如剛剛上面示範的屬性名稱有空格時 ),但是存取屬性時務必要加引號 ( 單雙皆可 ) 否則會有錯誤,因為屬性名稱只能是字串,就算不是也會被強制轉為字串。

var Obj = { name : "Hens" , name2 : 'Judy' , age : 20 , };
//document.write(Obj[name] + "<br>");  錯誤
document.write(Obj['name'] + "<br>");  // Hens
document.write(Obj["name"] + "<br>");  // Hens
//document.write(Obj[name2] + "<br>");  錯誤
document.write(Obj['name2'] + "<br>");  // Judy
document.write(Obj["name2"] + "<br>");  // Judy
document.write(Obj['age'] + "<br>");  // 20

額外補充

指定增加屬性到物件中

除去建立物件時新增屬性,也可以使用指定的方式來新增屬性。

// 建立物件時新增
var myObj = {  
  key1: 'value1',
  key2: 'value2',
}
// 直接指定進物件
myObj['key3'] = 'value3';   //myObj.key3 = 'value3';
console.log(myObj['key3']);  // value3

屬性名稱含特殊符號

請使用鍵值存取

var Obj = {'@Email' : 'abcd@gmail.com' , };
document.write(Obj.@Email + "<br>"); // Uncaught SyntaxError: Invalid or unexpected token
document.write(Obj['@Email'] + "<br>"); // abcd@gmail.com

動態屬性名

可以利用變數來達到這個效果。

var pre = 'Pre-'; //可任意更動屬性名稱的前綴
var myObj = {
  [pre + 'a']: 1,
 };
document.write(myObj['Pre-a']);  // 1

新增物件方法

為 objMyCard 物件新增方法 nameCard,猜猜下方程式碼的輸出結果為何?

// 物件的建構函數
function nameCard(name,age,phone,email){
   this.name = name;
   this.age = age;
   this.phone = phone;
   this.email = email;
   this.print = function(){
	   document.write("姓名:" + this.name + "<br>");
	   document.write("年齡:" + this.age + "<br>");
	   document.write("電話:" + this.phone + "<br>");
	   document.write("Email:" + this.email + "<br>");
	   }
}
// 建立自訂物件
var objMyCard = new nameCard('Pluto', 20, '02-22222222','abcd@gmail.com');
// 顯示objMyCard物件屬性
objMyCard.print();

輸出結果:

姓名:Pluto
年齡:20
電話:02-22222222
Email:abcd@gmail.com

參考資料

推薦閱讀:Day15-淺談JS版本差異!ES5、ES6

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論