JS物件

目錄

1、定義物件的基本語法

2、如何訪問物件

3、陣列物件

4、遍歷陣列

5、資料型別轉換

5.1 object 轉換為 string

5.2 string 轉換為 object

5.3 型別轉換的意義

JS物件可以用來存盤資料

JS中創建物件的方式有多種，字面量方式創建物件是其中最簡單的一種

1、定義物件的基本語法

基本語法為：

var obj={"name":"yhb","age":18};

• obj 是變數名稱
• {} 用來定義物件
• 物件中的資料以鍵值對的方式存盤，上面物件中有兩個鍵值對
• 鍵值對語法為 鍵:值
• 多個鍵值對之間用逗號分隔
• 按照標準來說，所有的鍵都應該用雙引號包含起來，但是實際撰寫的時候，經常省略

下面放上幾個案例

    <script>
        // 定義物件，用于存盤你曾經養過的一個寵物的名字、類別
        var pets={name:'花花',type:'狗狗'}
        // 定義物件，用于存盤你今天一日三餐的計劃
        var food={morning:'牛奶面包',noon:'牛排',dinner:'咖啡'}
        // 定義物件，用于存盤今天演講同學的姓名、性別、和演講主題
        var speech={name:'李燦',gender:'女',subject:'漫談'}
    </script>  

2、如何訪問物件

下面代碼獲取物件中某個鍵的值，很多時候我們不稱作鍵，而是屬性

var speech={name:'李燦',gender:'女',subject:'漫談'}
console.log(speech.name);

可見，語法就是 物件.屬性名稱

也可以通過下面代碼改變屬性的值

 var speech={name:'李燦',gender:'女',subject:'漫談'}
 // 改變name屬性的值
 speech.name='李白'
 console.log(speech.name);

3、陣列物件

也可以使用物件存盤復雜的資料

        // 定義物件，用于存盤你曾經養過的3個寵物的名字、類別
        var pets = [
            { name: '花花', type: '貓' },
            { name: '黑子', type: '狗' },
            { name: '單身狗', type: '貓' }
        ]

是不是和PHP中的二維陣列有些像？

通過索引可以訪問陣列中某個元素

下面代碼訪問陣列中第一個元素

 console.log(pets[0])

輸出第一個元素的name屬性的值

console.log(pets[0].name)

下面代碼改變陣列中第二個元素中的type值為“狼”

pets[1].type='狼';

趁熱打鐵，多定義幾個看看

        // 定義物件，用于存盤你未來2天一日三餐計劃
        var foods = [
            { morning: '牛奶面包', noon: '牛排', dinner: '咖啡' },
            { morning: '包子', noon: '包子', dinner: '西北風' },
            { morning: '西北風', noon: '餃子', dinner: '胡辣湯' }
        ]
          // 定義物件，用于存盤未來33天演講同學的姓名、性別、和演講主題
        var speech = [
            { name: '李燦', gender: '女', subject: '漫談' },
            { name: '李白', gender: '男', subject: '七律' },
            { name: '李商隱', gender: '男', subject: '古詩' }
        ]

4、遍歷陣列

        var pets = [
            { name: '花花', type: '貓' },
            { name: '黑子', type: '狗' },
            { name: '單身狗', type: '貓' }
        ]
        for(var i=0;i<pets.length;i++){
            console.log(pets[i]);
        }

如果向輸出每個寵物的名字，稍作修改即可

console.log(pets[i].name);

或者可以使用更簡單的forEach函式

         var pets = [
            { name: '花花', type: '貓' },
            { name: '黑子', type: '狗' },
            { name: '單身狗', type: '貓' }
        ]
        pets.forEach(function(item,index){
            console.log(item);
        })

看到結果，同學們應該可以想到 forEach 函式的運行規則

如果想輸出每個寵物的名字，改成下面 這樣即可

console.log(item.name);

5、資料型別轉換

我們來看一下物件的資料型別

        var person={name:'yhb',age:20}
        console.log(typeof person); // 輸出物件的資料型別 object
        var pets = [
            { name: '花花', type: '貓' },
            { name: '黑子', type: '狗' },
            { name: '單身狗', type: '貓' }
        ]
       console.log(typeof pets); // 輸出陣列物件的資料型別 object

結論：都是 object 型別

5.1 object 轉換為 string

某些時候，需要將 object 型別轉換為string型別（后面案例會用到）

        var person={name:'yhb',age:20}
        // 將person由 object 轉換為 string 型別，回傳值就是轉換之后的值
        var str_person=JSON.stringify(person);
        console.log(typeof str_person); // 輸出資料型別 string
        var pets = [
            { name: '花花', type: '貓' },
            { name: '黑子', type: '狗' },
            { name: '單身狗', type: '貓' }
        ]
        // 將 pets 由 object 轉換為 string 型別，回傳值就是轉換之后的值
        var str_pets=JSON.stringify(pets);
       console.log(typeof str_pets); // 輸出的資料型別 string

結論：轉換為字串之后，雖然資料不變，但是就無法使用 .屬性的方式獲取資料了，如

        var person={name:'yhb',age:20}
        // 將person由 object 轉換為 string 型別，回傳值就是轉換之后的值
        var str_person=JSON.stringify(person);
        // 不能通過下面的方式獲取資料
        console.log(str_person.name);

5.2 string 轉換為 object

某些時候又需要將 string 型別，轉換為 object

下面代碼先將 person 轉換成 字串型別，再將字串型別轉換為 object 型別

        var person={name:"yhb",age:20}
        // 輸出型別
        console.log(typeof person);
        // 將 person 由 object 轉換為 string 型別
        var str_person=JSON.stringify(person);
        // 輸出型別
        console.log(typeof str_person);
        // 將 str_person 由 string 轉換為 object，回傳值就是轉換后的值
        var obj_person=JSON.parse(str_person);
        console.log(typeof obj_person);

5.3 型別轉換的意義

將物件轉換為字串型別，主要是為了存盤和資料傳輸

將字串型別轉換為物件型別，主要是為了獲取或者修改其中屬性的值方便，可以直接通過 物件.屬性 的方式操作其中的屬性，而字串型別是不可以的