# 小細節(二)JavaScript物件建立：瞭解基本物件建立的方法

## 物件(Object)

* 第一種是原生的值（primitive），像是布林值（Boolean）、數值（Number）或是字串（String），而在物件當中，我們把這類的值稱做屬性（Property）。
* 第二種可以放入的值是物件（Object），也就是在一個物件裡面再嵌入一個物件，這種以物件為值的情況我們也把它稱作屬性（Property）。
* 第三種放入的值可以是函數（function），在物件的情況下，我們會把這種函式稱做方法（method）。 在物件中的每一個 Property 或是 Method 都會占據電腦當中一個記憶體的位置，在需要使用到的時候，把它們呼叫出來。

#### 使用 bracket notation `[ ]`

// 建立物件
var person = new Object();
person["firstName"] = "PJ";
person["lastName"] = "CHENder";

// 呼叫物件

var whatIWant = "lastName"
console.log(person[whatIWant]); // CHENder

#### 使用 dot notation `.`

// 建立物件
person.address   = new Object();
person.address.country = "Taiwan";
person.address.city  = "Taipei";
person.address.locate = "101";

// 呼叫物件
console.log(person.address);
console.log(person.address.country);
console.log(person["address"]["locate"]);

var person = new Object();
person.address = "123";
person.country = "Taiwan";
person.city = "Taipei";
person.locate = "101";
console.log("1", person.address);
console.log("2", person.country);
console.log("3", person["locate"]);
console.log(person);

#### 利用大括號{}建立物件

var pj = {
  firstname: "pj",
  lastname: "Chen",
  address: {
    country: "Taiwan",
    city: "city",
    locate: "101",
  },
};

function Say(n) {
  console.log("hi" + n.lastname);

}
Say(pj);

#### 直接在函式參數的地方建立物件

Say({firstname:"Raven", lastname:"Li"});

我們把這種直接在函式的參數中建立物件的方法稱做"creating object on the fly"。

一樣可以順利的回傳結果

#### 使用物件來達到namespace的效果

var chinese = {};
var english = {};

chinese.greet = "你好";
english.greet = "Hello";

console.log(chinese.greet);

## JavaScript中物件(object)和JSON格式的轉換

XML

過去相當常用的一種資料格式是XML（EXtensible Markup Language）格式，它的型式大概會長的像這樣子

<?xml version="1.0" encoding="big5" ?>
// 此為宣告 
<catalog>                                               
// 此為root標籤的開始 
    <product>
        <pname>HP printer</pname>     
        
// 標籤必須成對出現 
        <price currency="NT">12000</price>
        <mark />                                         
// 原來的寫法為 <mark></mark> 
    </product>
    <hr />
    <product>
        <pname>IBM notebook</pname>
        <price currency="NT">4900</price>   
        
// 屬性必須使用單引號或雙引號刮起來 
        <mark>10Percent off</mark>
    </product>
</catalog>             
// 此為root標籤的結束 

JSON

然而XML格式雖然可以傳遞資料，但這麼做似乎顯得不夠簡便，因為光是屬性名稱就必須要打兩次，當我們的資料量很大的時候，可能會使得檔案變得很大，影響到傳遞的時間，因此後來就有人發現，我們何不使用類似JavaScript中object literal syntax的方式來傳遞資料呢？

於是就出現了JSON

JSON的全名是JavaScript Object Notation，之所以取做這個名稱，只要是因為它是從JavaScript中建立物件用的Object literal syntax演變而來

1. JavaScript透過Ajax(非同步)方式將產品id傳送給伺服器
2. 伺服器收到id，將產品資料(價格,描述)編碼成JSON資料傳回給瀏覽器
3. JavaScript收到JSON資料，然後解碼將資料顯示在網頁上

* JSON就是一組字串。
* 在使用{ }建立物件時，屬性名稱是可以有引號也可以沒有的，但在JSON格式中，該屬性名稱一定要有引號。
* 若物件中的值為function，是無法透過JSON傳遞的。

#### 將物件轉成JSON格式
在JavaScript中，要將物件改為JSON格式非常容易，只要使用內建的函式`JSON.stringify()`就可以了

#### 將JSON格式轉成物件
在JavaScript中，要將JSON格式轉回物件也非常簡單，同樣是透過內建的函式`JSON.parse()`