`#JavaScript` `#六角前端課程` `#學習筆記` `#骨力走傱`

## 陣列進階操作
### 新增
#### `unshift`

let arr = [1, 2, 3];
arr.unshift(0);

console.log(arr); // [0, 1, 2, 3];

* `變數.unshift ( 要寫入的值 );`
* `unshift` 為 JavaScript 提供的方法，可將資料寫入至陣列**前端**。

### 刪除
#### `shift`

let arr = ["red", "pink", "blue"];
arr.shift();

console.log(arr); // ["pink", "blue"];

* `變數.shift ( 空白 );`
* 刪除陣列中，**第一筆**資料。

#### `pop`

let arr = [a, b, c];
arr.pop();

console.log(arr); // [a, b];

* `變數.pop ( 空白 );`
* 因為是要刪除資料，故 `()` 空白即可。
* 刪除陣列中，**最後一筆**資料。

### 新增與刪除
#### `splice`

let pets = ["cat", "dog", "fish"];
pets.splice(3, 1, "brid");

console.log(pets); // ['cat', 'dog', 'fish', 'brid']

* `變數.splice( 參數一, 參數二, 參數三 );`
* 參數一：刪除對象的索引值。
* 參數二：刪除幾筆（包含自己）。
* 參數三：要新增的內容。
* `pets.splice(3, 1, "brid");` 表示刪除陣列中，索引值為 3 的值，刪除一筆，並寫入 `"brid"`。
* 可以只寫 `pets.splice(0, 1);`，表示只有刪除的功能，未寫入新的值。

### 取得長度
#### `length`

let foods = ["beef", "pork", "chicken"];

console.log(foods.length); // 3

* `變數.length`
* `length` 也可以應用在取得最後一筆資料。
* `foods[foods.length-1]; // "chicken"`

## 物件進階操作
### 修改
#### `.`

let band = {
    musicGenre : "rock",
    bassNum : 1,
    guitarNum : 1,
    drumNum : 1,
};

band.musicGenre = "post-rock";
band.guitarNum += 1;

console.log(band); // {musicGenre: 'post-rock', bassNum: 1, guitarNum: 2, drumNum: 1}

* `變數.屬性名稱 = 要修改的值;`

### 刪除
#### `delete`

let band = {
    musicGenre : "rock",
    bassNum : 1,
    guitarNum : 1,
    drumNum : 1,
};

band.musicGenre = "post-rock";
delete band.guitarNum;

console.log(band); // {musicGenre: 'post-rock', bassNum: 1, drumNum: 1}

* 使用 `delete` 運算子，刪除物件中的屬性。

### 讀取資料
#### 使用點記法 `.` 讀取

let band = {
    musicGenre : "rock",
    bassNum : 1,
    guitarNum : 1,
    drumNum : 1,
};

console.log(band.musicGenre); // rock

* 可以使用 `.` 讀取物件中屬性的資料。

#### 使用括弧記法 `[""]` 讀取

let band = {
    musicGenre : "rock",
    bassNum : 1,
    guitarNum : 1,
    drumNum : 1,
};

console.log(band["musicGenre"]); // rock

* `變數["屬性名稱"];`
* 若使用 `[]` 讀取屬性資料，記得加上 `""`，否則會被電腦視為變數，那又是另一種讀取的方法了。

#### 使用 `[變數]` 讀取

let band = {
    musicGenre : "rock",
    bassNum : 1,
    guitarNum : 1,
    drumNum : 1,
};

let type = "musicGenre";

console.log(band[type]); // rock

* 可以將屬性名稱賦值在一個變數上，若要讀取 `"rock"` 這個值，語法為 `band[type]`，也就是 `物件變數[儲存屬性值的變數]`。
* 此時 `type` 指向了 `band` 的記憶體位置（傳址特性），因此可以用 `band[type]` 讀取 `"rock"`。
* 這個讀取方式稱為**動態取值**，在進階應用上經常出現。

### 如何操作非英文字母的屬性名稱？
#### 修改

let band = {
    musicGenre : "rock",
    bassNum : 1,
    guitarNum : 1,
    drumNum : 1,
};

band["吉祥物"] = "土虱";

console.log(band); // {musicGenre: 'rock', bassNum: 1, guitarNum: 1, drumNum: 1, 吉祥物: '土虱'}

#### 讀取

let band = {
    musicGenre : "rock",
    bassNum : 1,
    guitarNum : 1,
    drumNum : 1,
    "吉祥物" : "土虱"
};

console.log(band["吉祥物"]); // 土虱

* 屬性名稱為非英文字母、空格、特殊符號時，必須使用 `[""]` 讀取，否則語法會錯誤。
* 相對的，若寫入的資料也是上述情形，必須使用 `[""]` 寫入資料。

## 陣列與物件的混合應用
### 範例
> 描述市場裡的攤位。

let mark = [
    {
        bossName: "Tom",
        sale: "fruit",
        isOpen: false
    },
    {
        bossName: "Peter",
        sale: "fish",
        isOpen: true 
    }
];

console.log(mark);
// {bossName: 'Tom', sale: 'fruit', isOpen: false}
// {bossName: 'Peter', sale: 'fish', isOpen: true}

### 讀取
#### 請讀取第一筆物件資料

let mark = [
    {
        bossName: "Tom",
        sale: "fruit",
        isOpen: false
    },
    {
        bossName: "Peter",
        sale: "fish",
        isOpen: true 
    }
];

* `console.log(mark[0]); // {bossName: 'Tom', sale: 'fruit', isOpen: false}`

#### 請讀取第二筆物件中 sale 的資料

let mark = [
    {
        bossName: "Tom",
        sale: "fruit",
        isOpen: false
    },
    {
        bossName: "Peter",
        sale: "fish",
        isOpen: true 
    }
];

* `console.log(mark[1].sale); // fish`

#### 小結

| | 讀取方法 | 備註 |
| ---- | -------- | ---------------------------------------- |
| 陣列 | `[]` | 使用索引值表示，要查詢陣列中第幾筆資料。 |
| 物件 | `.` | 用 `.` 讀取屬性名稱儲存的值。 |

## JSON
### 介紹
* JSON（JavaScript Object Notation）是一種輕量級資料交換格式。
* 雖然以 JavaScript 語法為基礎，但可獨立使用，許多程式語言可讀取並產生 JSON。
* 經常用於傳遞與儲存資料，例如前、後端交換資料，或與 API 交換資料。

#### 資料來源
* [使用 JSON 資料](https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/JSON)

### 讀取

[
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "新興區公所 ",
        Address: " 高雄市新興區中正三路34號1樓(室內停車場)"
    },
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "高雄市民權停車場(機車停車場) ",
        Address: " 高雄市新興區民權一路221號"
    },
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "為鑫機車行 ",
        Address: " 高雄市新興區民族二路126號"
    }
];

由於 JSON 的基礎是 JavaScript，因此資料格式非常類似，可以將 JSON 賦值在變數上，並透過陣列或物件的方法，讀取需要的資料。

### 篩選
> 試著篩選出第三筆資料

#### 資料

[
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "新興區公所 ",
        Address: " 高雄市新興區中正三路34號1樓(室內停車場)"
    },
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "高雄市民權停車場(機車停車場) ",
        Address: " 高雄市新興區民權一路221號"
    },
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "為鑫機車行 ",
        Address: " 高雄市新興區民族二路126號"
    }
];

#### 處理結果

let data = [
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "新興區公所 ",
        Address: " 高雄市新興區中正三路34號1樓(室內停車場)"
    },
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "高雄市民權停車場(機車停車場) ",
        Address: " 高雄市新興區民權一路221號"
    },
    {
        Kind: "公共充電站",
        Charge: "免費",
        Location: "為鑫機車行 ",
        Address: " 高雄市新興區民族二路126號"
    }
];

let obj = data[2];

console.log(obj); // {Kind: '公共充電站', Charge: '免費', Location: '為鑫機車行 ', Address: ' 高雄市新興區民族二路126號'}

## 與邏輯判斷的混合應用
### 範例
> 觀察客人體溫。

let flixStatus = {
    name : "Flix",
    age : "18",
    status: ""
};

flixStatus.degree = 37;

if (flixStatus.degree >= 37.5) {
    console.log("您不得進入。");
    flixStatus.status = "您不得進入。" // 寫入狀態
} else {
    console.log("您可以進入。");
    flixStatus.status = "您可以進入。" // 寫入狀態
};

console.log(flixStatus); // {name: 'Flix', age: '18', status: '您可以進入。', degree: 37}