# <font class="h2">陣列與物件混合應用</font>

###### tags: `javascript`

<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>
<br>

:::info
### 陣列與物件使用時機
- 陣列使用時機：當資料需要使用大量且同性質的資料
- 物件使用時機：要描述一個東西對應的特徵和行為。
:::

| | 陣列 | 物件 |
| -------- | ----------------------------------------- | ---------------------------------------------- |
| 型式 | `[]` | `{}` |
| 讀取資料 | 陣列名稱[第幾筆] | 物件名稱.屬性名稱<br>物件名稱[屬性名稱] |
| 新增資料 |`.push()`往後寫入<br>`.unshift()`往前寫入 | 物件名稱.屬性名稱=值<br> 物件名稱[屬性名稱]=值 |
| 刪除資料 |`.pop()`刪除最後一筆<br>`.shift()`刪除最前面一筆<br>`.splice()`刪除其中資料 |delete 物件名稱.屬性名稱<br>delete 物件名稱[屬性名稱]|

<br>

| | 物件包陣列 | 陣列包物件 |
| --- | ------------------------- | ----------------------------- |
|取資料| 物件名稱.陣列名稱[第幾筆] | 陣列名稱[第幾筆物件].屬性名稱 |

<br>

| | 物件包陣列包物件 | 陣列包物件包陣列 |
| --- | -------------------------------------- | --------------------------------------------- |
|取資料| 物件名稱.陣列名稱[第幾筆物件].屬性名稱 | 陣列名稱[第幾筆物件].屬性名稱[第幾筆陣列資料] |

//有兩個水果攤
//第一個水果攤，老闆Tom，香蕉有6個，蘋果有5個，還沒關店
//第二個水果攤，老闆叫John，香蕉有9個，蘋果有8個，還沒關店

let market = [
    {
    bossName: "Tom";
    bananaNum:6,
    appleNum:5,
    isClose:false
    }
    {
    bossName: "John";
    bananaNum:9,
    appleNum:8,
    isClose:false
    }
]

### <font class="h3">讀取資料</font>

let market = [
    {
    bossName: "Tom";
    bananaNum:6,
    appleNum:5,
    isClose:false
    }
    {
    bossName: "John";
    bananaNum:9,
    appleNum:8,
    isClose:false
    }
]

console.log(market[0].bassName);//"Tom"
console.lot(market[1].appleNum);//8

:::info
:bulb:當要尋找陣列時使用`[]`，當要尋找物件裡面屬性使用`.`
:::
<br>

### <font class="h3">物件搭配 if</font>

let tomStatus = {
    name:"Tom",
    age:"30",
    status:""
}
tomStatus.degree = 36.5;

if(tomStatus.degree>=37.5){
    console.log("您不得進入");
    tomStatus.status = "您不得進入"
}else{
    console.log("您可以進入");
    tomStatus.status = "您可以進入"
}
console.log(tomStatus)

<br>

### <font class="h3">陣列物件搭配 if </font>

let peopleStatus = [
    {
        name:"Tom",
        age:"30",
        status:""
    }
]

peopleStatus[0].degree = 36.5;

if(peopleStaus[0].degree>=37.5){
    peopleStatus[0].status ="您不得進入"
    console.log("您不得進入")
}else{
    peopleStatus[0].status ="您可以進入"
    console.log("您可以進入")
}

console.log(peopleStatus[0])

<br>

### <font class="h4">範例:</font>
**範例1.**
母親今年的狀態需要更新，還請協助她修改物件資料
流程一:母親多了一歲了，幫他累加一歲在age屬性對應的value上
流程二:母親多了一位小孩，幫她在sons屬性新增一位"John"
請新增一行Code，寫console.log來印出motherStatus

let motherStatus = [
    {
        name:"mary";
        age:31;
        sons:["Tom","Bob"]
    }
]

:::spoiler

let motherStatus =[
  {
    name:"mary",
    age:31,
    sons:["Tom","Bob"]
  }
]
motherStatus[0].age += 1;
motherStatus[0].sons.push("John");
console.log(motherStatus)

也可以運用變數

let motherStatus = [
    {
        name: "Mary",
        age: 31,
        sons: ["Tom", "Bob"]
    }
];
let mom = motherStatus[0];//運用變數
mom.age += 1;
mom.sons.push("John");
console.log(mom)

:::
<br>

**範例2.**
老闆想要幫公司兩人都加薪到40000元
請透過以下資訊修改，幫老闆做加薪的動作

let salaryData = {
  company: 'circle center',
  bossName: 'casper',
  staff: [
    {
      name: "Bob",
      salary: 32000
    },
    {
      name: "Jack",
      salary: 28000
    }
  ]
}
// 第一位員工加薪邏輯
if(salaryData.staff[0].salary < 40000){
  salaryData.staff[0].salary = 40000; 
}

// 第二位員工加薪邏輯
if(salaryData.staff[1].salary < 40000){
  salaryData.staff[1].salary += 40000 - salaryData.staff[1].salary; 
}