陣列裡面放物件
let fruits = [
{
name: "蘋果",
price: 35,
stock: 20
},
{
name: "香蕉",
price: 15,
stock: 50
}
];
console.log(fruits); //輸出(2) [{…}, {…}]
讀取陣列中的物件資料
console.log(fruits[0].name); //輸出 蘋果
console.log(fruits[1].price); //輸出 15
JSON格式跟Javascript的物件格式很像
JSON是一種輕量級的純文字資料交換格,是目前前後端資料傳輸與API開發的主流標準。
JSON 支援以下幾種基本值:
字串 (String):必須使用雙引號
數字 (Number):整數或浮點數
布林值 (Boolean):true 或 false
空值 (Null):null
JSON讀取方式
以這個範例作為題目
[
{
"name": "珍珠奶茶",
"price": 60,
"size": "大杯",
"sugar": "半糖"
},
{
"name": "紅茶拿鐵",
"price": 55,
"size": "中杯",
"sugar": "微糖"
},
{
"name": "檸檬綠茶",
"price": 45,
"size": "大杯",
"sugar": "無糖"
}
]
首先先將JSON資料宣告成一個變數
let data =[{},{},{}]; //複製JSON到[]裡面
選取物件裡的資料
console.log(data[2].size); //輸出 大杯
console.log(data[0].sugar);//輸出 半糖
console.log(data[1].price);//輸出 55
console.log(data.length); // 輸出3
陣列包物件 → 抓資料
let foods = [
{"name":"排骨便當","price":90,"category":"主餐","spicy":false},
{"name":"雞腿便當","price":100,"category":"主餐","spicy":false},
{"name":"滷肉飯","price":45,"category":"小吃","spicy":false},
{"name":"麻辣鴨血","price":60,"category":"小吃","spicy":true},
{"name":"酸辣湯","price":35,"category":"湯品","spicy":true}
];
// 先用 [索引] 選出第幾筆,再用 .屬性 取值
console.log(foods[0].name); // 排骨便當
console.log(foods[3].spicy); // true
物件包陣列 → 抓資料
let order = {
"customer": "林小華",
"table": 5,
"items": [
{"name":"排骨便當","price":90,"category":"主餐","spicy":false},
{"name":"酸辣湯","price":35,"category":"湯品","spicy":true}
]
};
// 最外層直接用 .屬性 取值
console.log(order.customer); // 林小華
console.log(order.table); // 5
// items 是陣列,要先 .items 再用 [索引]
console.log(order.items[0]); // 輸出{name: '排骨便當', price: 90, category: '主餐', spicy: false}
console.log(order.items[1].spicy); // true
篩選出資料格式,並賦予變數
let data = {
order :{
"customer": "林小華",
"table": 5,
"items": [
{"name":"排骨便當","price":90,"category":"主餐","spicy":false},
{"name":"酸辣湯","price":35,"category":"湯品","spicy":true}
]
},
foods :[
{"name":"排骨便當","price":90,"category":"主餐","spicy":false},
{"name":"雞腿便當","price":100,"category":"主餐","spicy":false},
{"name":"滷肉飯","price":45,"category":"小吃","spicy":false},
{"name":"麻辣鴨血","price":60,"category":"小吃","spicy":true},
{"name":"酸辣湯","price":35,"category":"湯品","spicy":true}
]
}
let ary = data.foods;// 將這筆資料重新宣告一個變數(乾淨的資料)
console.log(ary);//輸出 (5) [{…}, {…}, {…}, {…}, {…}]
console.log(ary.length);//輸出 5
物件加if判斷式
const member = {
name: "小明",
age: 17,
totalSpent: 8000,
hasVIPCard: false
};
//宣告一個檢查member的檢查函式
function checkEligibility(member) {
if (member.age >= 18 && member.totalSpent >= 5000) {
console.log(member.name + " 符合升級 VIP 資格");
} else if (member.age < 18) {
console.log(member.name + " 未成年,不開放升級");
} else {
console.log(member.name + " 消費金額不足");
}
}
checkEligibility(member);
// 輸出 小明 未成年,不開放升級
陣列加上if判斷式
const members = [
{ name: "小明", age: 25, totalSpent: 8000 },
{ name: "小華", age: 17, totalSpent: 12000 },
{ name: "小美", age: 30, totalSpent: 2000 }
];
//使用forEach 把陣列裡「每一個」物件都拿出來做同一件事(判斷 + 印出結果)
members.forEach(function(member) {
if (member.age >= 18 && member.totalSpent >= 5000) {
console.log(member.name + " 符合升級 VIP 資格");
} else {
console.log(member.name + " 不符合資格");
}
});
//小明 符合升級 VIP 資格
//小華 不符合資格
//小美 不符合資格