iT邦幫忙

0

[JavaScript學習筆記] - 陣列與物件應用

  • 分享至 

  • xImage
  •  

陣列裡面放物件

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 資格
//小華 不符合資格
//小美 不符合資格

圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言