物件 Object

1建立物件

建立屬性

• 通常只使用字母（絕對必要情況下可以混用數字）
• 不能有空格和標點符號
• 不能是 JavaScript 關鍵字
• 不需加引號

1. 物件語法（new 運算子）

          var obj = new Object();                                         //建立空物件
          var obj = new Object(num: 6, title: 'Complex Variable Types');  //建立多個屬性
        

2. 文字語法

          var obj = {};                                            //建立空物件
          var obj = {num: 6, title: 'Complex Variable Types'};     //建立多個屬性
          var obj = {                                              //分行寫法使定義更清楚
            num: 6,
            title: 'Complex Variable Types'
          };

          var obj = {
            num: 4,
            name: 'May',
            car:{
                brand: 'Honda',
                model: 'Fit',
                year: 2008
            },
            favoriteColor: ['Black', 'Blue', 'Red']               //屬性不限簡單類型，甚至可以是物件或陣列
          };
        

          
陣列與物件的比較
          與其他語言相比，JavaScript 的陣列相當獨特，它只是特定類型的物件，就像 JavaScript 裡的布林值、數值、字串、函數都是物件。

          而應該使用哪種物件類型？何時使用？是個邏輯問題：
          

            

              如果只呈現單一值──布林值、數值或字串，建議使用簡單類型及文字語法：

              var option = true; 而非 var option = new Boolean(true);
            
            

              如果需要表是日期和時間，就利用 Date 物件，而非普通物件。
            
          
          與陣列相比，較適合使用物件的特性有：
          

            
物件是無序的屬性集合，無法有意義排序物件值，若要排序就改用陣列
            
除了必須為值配上有意義標籤情況下，應改用物件取代
            
不同於陣列，物件沒有 length 屬性，無法得知屬性的數量
          
          

            
物件呈現與一種事物相關的不同資訊，例如：員工、書中的章節
            
陣列表現許多事物的相同資訊，例如：級別、姓名清單
          
        

2存取單一物件屬性

1. 物件標記法

            var obj = {
              name: 'May',
              age: 24,
              car:{
                  brand: 'Honda',
                  model: 'Fit',
                  year: 2008
              },
              favoriteColor: ['Black', 'Blue', 'Red']
            };

            obj.age;
            obj.car;                          //取得 car 屬性的物件
            obj.car.model;                    //取得 car 屬性中的 model 屬性
            obj.favoriteColor;                //取得 favoriteColor 屬性中的陣列
            obj.favoriteColor[2];             //取得陣列中的第 2 個元素

            obj.age = 18;                     //更改 age 屬性
            obj.favoriteColor[2] = 'Pink';    //更改陣列中第 2 個元素的屬性
            obj.sex = 'Female';               //新增屬性
          

2. 陣列標記法

            //此寫法與上述物件標記法相同
            var obj = {
              name: 'May',
              age: 24,
              car:{
                  brand: 'Honda',
                  model: 'Fit',
                  year: 2008
              },
              favoriteColor: ['Black', 'Blue', 'Red']
            };

            obj['name'];
            obj['car'];
            obj['car']['brand'];
            obj['favoriteColor'];
            obj['favoriteColor'][2];

            obj['age'] = 18;
            obj['favoriteColor'][2] = 'Pink';
            obj['sex'] = 'Female';
          

          
為什麼會有陣列標記法？
          在有些情況下無法使用物件標記法，可以使用陣列標記法，因其允許以「運算式代替文字值」，以便動態找尋屬性。

          如果存在 obj 物件，假設一個字串代表屬性名稱： var prop = 'title';

          若使用 obj.prop 會找到 obj 裡的 prop 屬性，但使用 obj[prop] 會找到 obj 下的 title 屬性。

        

確認屬性存在

1. 使用objName.propertyName，但可能因為屬性質是 false、空字串、0，而被當作不存在。

                 if( obj.prop ){
                   ...
                 }
               

   
   
2. 用 in 運算子，語法為 'propertyName' in objName，找到屬性就返回 true。

                 if( 'prop' in obj ){
                   ...
                 }
               

   
   
3. 用 typeof 運算子，前提是已知屬性的類型。

                 if( typeof obj.prop == 'number' ){
                   ...
                 }
               

   
   

3存取所有物件屬性

1. 屬性不會以任何特定順序返回，甚至不會以建立物件時的順序回傳
2. 根據物件不同，可能最終看到並未建立的屬性（此情況與 JavaScript 原型繼承（prototypes）有關）
3. 必須以「陣列標記法」尋找每個屬性值
4. for-in 迴圈是較慢的結構，應該只出現在沒有其他迴圈可用的時候

          for(var prop in obj){
            ...
          }
        

          if( typeof obj[prop] == 'function' ){
            ...
          }
        

            var obj = {
              name: 'Lisa',
              age: 24,
              weight: 55,
              height: 160,
              BMI: function(){                                     //方法，計算 BMI
              	return (obj.weight/Math.pow(obj.height, 2)).toPrecision(4)*10000;
              },
              favoriteFood: ['Salad', 'Bread', 'spaghetti']
            };

            for(var prop in obj){                                  //用 for-in 迴圈輸出並檢查是方法或屬性
              if(typeof obj[prop] == 'function'){
                document.write(prop + '(方法): ' + obj[prop]() + '
');
              }else{
                document.write(prop + '(屬性): ' + obj[prop] + '
');
              }
            }
          

          
JavaSciprt 中不可變和可變的物件
          在 JavaScript 中幾乎一切都是物件或作為物件處理，例如下列程式建立字串

          var name = 'Domo';

          但之後呼叫該變數的方法時，仍是一個字串物件：name.toLowerCase()

          簡單類型和複雜類型實際上的區別是：複雜類型（Data、Array、Object）是易變的，內容值隨時可變。

          當在修改簡單類型的值，JavaScript 在背景建立一個新的變數並摧毀舊的，這些方法並不修改原來的值，而是返回修改後的值。
        

4刪除物件屬性

• delete 物件名稱 . 屬性名稱： 直接使用物件標記法刪除元素

            var obj = {
              name: 'May',
              age: 24,
              car:{
                  brand: 'Honda',
                  model: 'Fit',
                  year: 2008
              },
              favoriteColor: ['Black', 'Blue', 'Red']
            };

            delete obj.name;

            delete obj.car;