JS物件
2020-10-22 11:01:07
目錄
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 型別轉換的意義
將物件轉換為字串型別，主要是為了儲存和資料傳輸
將字串型別轉換為物件型別，主要是為了獲取或者修改其中屬性的值方便，可以直接通過 物件.屬性 的方式操作其中的屬性，而字串型別是不可以的