###### tags: `學習` `Array` `Javascript`
{%hackmd BJrTq20hE %}
# 陣列與物件
## 陣列是什麼?能吃嗎?
陣列是一種能存放多個資料的一種寫法，可以儲存多種資料，而且不用一值宣告變數。

舉個例子，水果店的水果種類如果用一般宣變數的情況下宣告很多變數才能把水果種類給列舉完。

let fruit1 ='apple';
let fruit2 ='piapple';
let fruit3 ='watermelon';
let fruit4 ='raspberry';

使用陣列的情況

let fruits =['apple','piapple','watermelon','raspberry',]

是不是比較好一些了呢?

陣列內不只可以存放字串，也可以放數字、布林、陣列、物件....

也可以是空陣列

let data = ['string',0,['data1','data2'],{name:'Joy'},true];

let data1 = [];

## 那我要怎麼讀取陣列呢??

這裡先說明一下，在Javascript裡的數字大多數都是從0開始。

我們先讀取上述水果店的第1個水果

let fruits =['apple','piapple','watermelon','raspberry',]

console.log(fruits[0])//'apple'

你沒看錯第'一'個水果是從0開始算。

提取第二個水果就是fruits[1]，就是這照樣子只要知道位置就可以提取陣列所要的內容。

## 那我要怎麼讀取陣列並宣告取出的內容為變數??

步驟1，要先有一個陣列
步驟2，宣告一個變數，並且賦值讀取陣列

寫這兩步驟最好是看得懂啦

一樣取的水果店為例子

let fruits =['apple','piapple','watermelon','raspberry',];

let buyFruit = fruits[1];

console.log(buyFruit)//'piapple'

上面的例子是不是步驟1-2一樣呢?

## 那我要怎麼知道陣列的長度??

先說陣列的長度，不是現實生活中的長度單位喔，而是陣列裡面有多少筆資料，而且用逗號隔開就算一筆，不管這一筆資要到底有多少東西，就像選舉投票的時候跟郭台銘一樣只有一票~~人生中少數與郭台銘一樣的時刻~~

arrya.length 就可以得到陣列長度了

let data = ['string',0,['data1','data2'],{name:'Joy',
                                          home:'Taipei',
                                          country:'Taiwan',
                                          familyNum:88,
                                          catNum:5},true];
let dataLeng = data.length;
console.log(dataLeng)//5

不要被object給嚇到，裡面寫得再多東西也只算一筆

## 那我要怎麼寫入資料到陣列中呢??

再把水果店搬出來，今天水果店要加入一個新的品項請問要怎麼加入呢?
新增水果店第五種水果

let fruits =['apple','piapple','watermelon','raspberry'];

fruits[4] = 'lemon'

console.log(fruits);

與讀取一樣選擇第'五'個， 節下來是賦值。

那如果我的fruits[]寫成fruits[0]呢?

let fruits =['apple','piapple','watermelon','raspberry'];
fruits[0] = 'lemon'

console.log(fruits);//['lemon','piapple','watermelon','raspberry']

原本第一個位置的apple會去取代成lemon喔

那如果我不按照順序呢?我硬要把lemon加入第7個!!

OK喔沒有問題。

let fruits =['apple','piapple','watermelon','raspberry'];

fruits[6] = 'lemon'

console.log(fruits);//['apple','piapple','watermelon','raspberry',empty x 2 ,'lemon']

因為把'lemon'加入第七個，原來陣列有4筆資料，要加到第7個，只好拿它東西補滿第五個與六個。

"那個東西"就會顯示為empty，型別屬於undefined

而且資料長度也會算進去喔

let fruits =['apple','piapple','watermelon','raspberry'];

fruits[6] = 'lemon';

console.log(fruits[4])//undefined

console.log(fruits.length)//7

## 那還有其他寫入陣列的方法嗎??

一直使用array[index] = 寫入的內容 這樣也不是辦法，畢竟如果陣列太長很容易算錯，~~我就懶~~要怎麼辦??

科技始終來自於人性 ~~惰性~~

於是有了array.push(寫入的內容)與array.ushift(寫入的內容)
### 1.push

let fruits =['apple','piapple','watermelon','raspberry'];

fruits.push('lemon');

console.log(fruits)//['apple','piapple','watermelon','raspberry','lemon']

看到了嗎，'lemon'被加到陣列的最後面啦
### 2.unshift

let fruits =['apple','piapple','watermelon','raspberry'];

fruits.nushift('lemon');

console.log(fruits)//['lemon','apple','piapple','watermelon','raspberry']

與push不同的是unshift是將資料加到第一個。

## 那有寫入陣列的方法應該也有刪除的方法吧??

沒錯，接下來就是要刪除陣列裡的資料。

刪除的語法有pop、ushift、splice

### 1.pop
刪除陣列最後一個資料

let fruits =['apple','piapple','watermelon','raspberry'];

fruits.pop();

console.log(fruits)//['lemon','apple','piapple','watermelon']

原陣列內最後的內容'raspberry'被刪掉啦

### 2.unshift
刪除陣列第一個資料

let fruits =['apple','piapple','watermelon','raspberry'];

fruits.pop();

console.log(fruits)//[piapple','watermelon','raspberry']

原陣列內第一個的內容'apple'被刪掉啦

### 3.splice
刪除所選的資料範圍
array.splice(從第幾個開始刪,要刪幾個)

我打算刪掉第'二'個'的piapple'與下一個的'watermelon'

let fruits =['apple','piapple','watermelon','raspberry'];

fruits.splice(1,2);

console.log(fruits)//['apple','raspberry']

fruits.splice(1,2)翻成白話就是從fruits這個陣列的第二個資料開始刪，一次刪兩個。也就是第二號資料與第三號資料被刪掉了

## 什麼是物件

舉例來說，陣列像是一個大的倉庫，可以整個貨櫃進去，那物件有點像是可以分門別類擺放東西的整理盒

## 那為甚麼要用物件

舉個學生姓名與成績的例子

let student1 = 'May';
let mayMath = 95;
let mayEnglish = 65;
let student2 = 'Harvey';
let harveryMath = 77;
let harverEnglish = 84;
let student3 = 'John';
let johnMath = 50;
let johnEnglish=77;
let student4 = 'Joy';
let joyMath = 52;
let joyEnglist = 66;

但是這個樣子的話變數會變得很多。

所以先將一個人的姓名與成績寫成物件的格式

let students = {name:'Mary',Math:95,English:65}

以上就完成一個人的物件格式，其中name,Math,English為物件中的屬性，那在冒號後面為值

## 我要怎麼讀取物件的資料呢?
舉個例子我要讀取學生的姓名要怎麼做呢?

let students = {name:'Mary',Math:95,English:65};
let showStudentName = students.name;
console.log(shoeStudentName)//Mary

要讀取數學成績的話只要把name這個屬性換成Math就行，這裡要注意的是屬性的的大小寫不同會被視為不同的屬性，如果是用math做為屬性讀取的話，會因為找不到而出現undefined

## 比較不一樣的讀取方法

let students = {name:'Mary',Math:95,English:65};
let showStudentName = students['name'];
console.log(shoeStudentName)//Mary

就是把.換成['']這樣子屬性就會以字串的方式取得屬性的值
此外也可以把屬性的字串宣告為變數，然後再[]內放入變數

let students = {name:'Mary',Math:95,English:65};
let studentName = 'name' ;
let showStudentName = students[studentName];
console.log(shoeStudentName)//Mary

注意到了對吧，[]內已經改為studentName這個變數名稱了

那為什麼要使用屬性字串的方始讀取值呢，因為在JSON的格式中，key也就是Javescript中的屬性可以是數字或是中文，遇到這種情況要取值的時候就可以使用['key']的方法取到值了
## 要怎麼新增新的屬性與值到物件內呢?

以Mary要新增Science與History的學科成績為例

let students = {name:'Mary',Math:95,English:65};

students.Science = 99

students.History = 72

console.log(students)//{name:'Mary',Math:95,English:65,Science:99,History:72}

## 要怎麼新增新的屬性與值到物件內容呢?
假設Mary改名為Lisa而且English的分數要加5分程式碼要怎麼執行?

let students = {name:'Mary',Math:95,English:65};

students.name = 'Lisa'

students.English +=5

console.log(students)//{name:'Lisa',Math:95,English:70}

從上面的例子可以看到物件內屬性的值可以修改，就像重新賦值一樣，此外屬性也可以與變數一樣使用 += 、-=做計算，計算的結果也會寫入物件內。

## 要怎麼刪除物件的內容呢?
要刪除物件的內容，首先屬性與值是一體的，會一起被刪除。
我們要刪除Mary的English成績要怎麼做?

let students = {name:'Mary',Math:95,English:65};

delete students.English;

console.log(students)//{name:'Mary',Math:95}

這樣子English成績就刪除了

## 把陣列與物件一起連用吧!

接著我們用一個array把所有學生的資料放入

let students = [{name:'Mary',
                 Math:95,
                 English:65},
                 {name:'Harvey',
                 Math:77,
                 English:84},
                 {name:'John',
                 Math:50,
                 English:77},
                 {name:'Joy',
                 Math:52,
                 English:66}]

這個時候就會有疑問了那到底要怎麼取資料呢?

已取Jone的English成績來看好了

let students = [{name:'Mary',
                 Math:95,
                 English:65},
                 {name:'Harvey',
                 Math:77,
                 English:84},
                 {name:'John',
                 Math:50,
                 English:77},
                 {name:'Joy',
                 Math:52,
                 English:66}];
let getJhonEnglishScore = students[2].English
console.log(getJhonEnglishScore)//77                

分析一下到底是怎麼取道資料的。

1.首先先看看students的資料格式是甚麼?? 是陣列。

所以需要使用陣列的方式讀取資料 student[]

2.看看資料在內容是甚麼?? 資料內容是物件，而且在陣列的第3個

所以student[2]

3.再來看看我們想要資料屬性是甚麼?? 是English

最後student[2].English，這樣就取道資料啦

## 你知道嗎?陣列可以包物件，也可以陣列包陣列、物件包陣列、物件包物件喔

let students = [{name:'Mary',
                 Math:95,
                 English:{firstEnglishScore:80,
                 secondEnglishScore:60,
                 thirdEnglishScore:99}},
                 {name:'Harvey',
                 Math:77,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:85,
                 thirdEnglishScore:74}},
                 {name:'John',
                 Math:50,
                 English:{firstEnglishScore:55,
                 secondEnglishScore:68,
                 thirdEnglishScore:72}},
                 {name:'Joy',
                 Math:52,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:56,
                 thirdEnglishScore:88}}];

我們可以看到其中的English這個屬性裡面包了一個物件裡面有三次的考試成績

那我要如何取得Joy的第二次English成績呢?

let students = [{name:'Mary',
                 Math:95,
                 English:{firstEnglishScore:80,
                 secondEnglishScore:60,
                 thirdEnglishScore:99}},
                 {name:'Harvey',
                 Math:77,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:85,
                 thirdEnglishScore:74}},
                 {name:'John',
                 Math:50,
                 English:{firstEnglishScore:55,
                 secondEnglishScore:68,
                 thirdEnglishScore:72}},
                 {name:'Joy',
                 Math:52,
                 English:{firstEnglishScore:53,
                 secondEnglishScore:56,
                 thirdEnglishScore:88}}];
                 
let getJoySecondEnglishScore = students[3].English.secondEnglishScore;
console.log(getJoySecondEnglishScore)//56

1.首先先看看students的資料格式是甚麼?? 是陣列。

所以需要使用陣列的方式讀取資料 student[]

2.看看資料在內容是甚麼?? 資料內容是物件，而且在陣列的第4個

所以student[3]

3.再來看看往我們想要的資料的下次是甚麼?? 是物件中的屬性English

student[2].English，

4.再來是第二次的English屬性secondEnglishScore

students[3].English.secondEnglishScore
## 補充資料
[JavaScript Array 陣列操作方法大全](https://www.oxxostudio.tw/articles/201908/js-array.html)

## 參考資料
[六角學院-JavaScript 必修篇 - 前端修練全攻略](https://courses.hexschool.com/courses/enrolled/1463822)