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 陣列！