知識文章JavaScript 物件

JavaScript 物件

物件到底是什麼東西!其實不用硬去記他的定義,而你只需要知道他幾個特徵即可!

基本上 JavaScript 物件比起一般物件語言的物件其實不大一樣!引用 developer.mozilla.org 上的說法,物件是一些屬性的集合,而屬性是鍵與值之間的關聯。一個屬性能夠是一個函數 (Function)。此外,有些物件是瀏覽器預定義的,你也可以定義你自己的物件。

說這麼多,總結一下,也就是說物件是用左右大括號表示,那物件的形象是什麼,其實就是一個集合啦,只是要稍微記一下他的格式,通常會由 key 與 val 作為一組,每一組中間會用逗號隔開

 

如下範例,就是一個物件,該物件內有一個 a 的 key,而該 a 的值就是字串 "Hello World!"

{
  a: "Hello World!"
}

 

而物件一樣可以藉由變數儲存,如下範例,宣告一個變數名稱為 obj,並且等於剛剛的物件

var obj = {
  a: "Hello World!"
};
  
console.log (obj);

 

這麼一來,當你要使用這個物件內的變數 a 就只要打 obj.a 就可以取得其值 "Hello World!",如下藉由 Console 印出的範例可以看到印出了 "Hello World!"

var obj = {
  a: "Hello World!"
};
  
console.log (obj.a);

 

那一樣都是存資料,那為什麼不一開始就用變數 obj_a 或者陣列來存 "Hello World!" 呢!?當然可以呀,只是用物件的話,對於之後開發與管理會更加方便,例如變數的分類就更前顯易懂了!

 

物件在一開始定義中有提到,值不只可以給予字串或數字,更可以放置 function,沒錯如下範例,依照剛剛的物件,我們定義裡面有兩組 key,分別是 a、b,而且對應到不同的 val,a 是字串,而 b 則是一個 function

var obj = {
  a: "Hello World!",
  b: function (num) {
    return num + 5;
  }
};

 

依照上面的例子推理一下,就知道我如果要呼叫 obj.b 的話,就直接寫 obj.b () 就可以了!

如下範例,呼叫了 obj.b 並且給予一個數字,回傳後存入變數 b_return,再用 Console 印出。

var obj = {
  a: "Hello World!",
  b: function (num) {
    return num + 5;
  }
};
  
var b_return = obj.b (5);
  
console.log (b_return);

其用法跟呼叫函式(function)一樣,或許你可想成 obj.b = function () {...}

 

所以總結一下,依照上面的例子可以知道 obj 他是很多變數的集合,所以回想一下定義,不就是這樣嗎!

當然對於 JavaScript 的物件內容,不只是這樣,但是如果你是初階的開發者,就先這樣記吧!

 

若是之前有看過陣列介紹的文章,那就將物件與陣列做結合,產生出物件陣列,也就是說一個陣列其元素是物件變數

如範例,宣告一個 users 的空陣列,分別指定第一個元素與第二個元素值都是物件,最後都用 Console 印出結果

var users = [];
  
users[0] = {
  name: "OA",
  ages: 18,
};
users[1] = {
  name: "Teresa",
  ages: 16,
};
  
console.log (users);
  
console.log ("=================");
  
console.log (users[0]);
console.log ("-----------------");
console.log (users[0].name);
console.log (users[0].ages);
  
console.log ("=================");
console.log (users[1]);
console.log ("-----------------");
console.log (users[1].name);
console.log (users[1].ages);

 

輸出結果如下


相對應的印出

 

若是對陣列夠熟的人更可修改得更簡短,如之前介紹過的方式使用 push 與 for 迴圈!

var users = [];
  
users.push ({
    name: "OA",
    ages: 18,
  });
  
users.push ({
    name: "Teresa",
    ages: 16,
  });
  for (var i = 0; i < users.length; i++) {
  console.log (users[i].name);
  console.log (users[i].ages);
  console.log ("-----------------");
}

 

甚至可以加入之前提到的函式,甚至可以針對產生 user 做成獨立函式,如此英文語意上都可以更加了解程式流程與管理了!

function createUser (n, a) {
  return {
    name: n,
    ages: a,
  };
}
  
var users = [];
users.push (createUser ("OA", 18));
users.push (createUser ("Teresa", 16));
  
for (var i = 0; i < users.length; i++) {
  console.log (users[i].name);
  console.log (users[i].ages);
  console.log ("-----------------");
}

 

在寫程式中,可以用物件去定義出簡單格式,當然 JavaScript 物件玩法不只這樣,這只是初階的用法,日後會慢慢介紹更多的相關應用!

這次的程式範例一樣放在 GitHub 的這裡,若是對以上講解的變數、陣列、函數、迴圈有所不了解的可以看一下之前就介紹過的 JavaScript 變數JavaScript 函式JavaScript 迴圈JavaScript 陣列

張貼者:吳政賢發佈。
瀏覽人數:49 人