JavaScript 小學 — Array 陣列
什麼是陣列？
Array 是一個有序的序列，陣列中可以儲存不定數量的任何值(數字、字串、物件...等)。來看下面的語法結構，是透過宣告產生一個陣列，用[]包住內容，每個內容要使用 , 逗號分開。
var arrayName = [item1, item2, ...];為什麼要用陣列？
因為如果每個資料都要用變數去儲存，那要多少個變數呢？來用我有三隻狗當作例子看看實際效果，比較一下是不是覺得用陣列好一點🤯🤯？
var myDogName1= "Yui";
var myDogName2= "King";
var myDogName3= "Daring";
var myDog=["Yui","King","Daring"]也不用擔心說我要單獨拿出或改變資料怎辦？都可以單獨抽出來使用的喔，但要記得陣列的第一筆資料是[0]開頭：
console.log(myDog[0])//Yui
myDog[0]="John" //不爽要改名字也可以陣列的操縱之法
另外陣列還有什麼好處？就是它本身內建有很多操縱方法，例如：新增、刪除、排序、查找等，再來一一來看我個人有在使用的幾個吧。
Array.length 陣列長度
myDog=["Yui","King","Daring","Jordan"];
console.log(myDog.length);//4長度這個數值非常實用，最實用就是可以搭配 for迴圈來處理陣列：
myDog=["Yui","King","Daring","Jordan"];
for (let i=0;i< myDog.length;i++){
console.log(myDog[i]);
}上面就是如果 i 小於 陣列長度，就會依序執行 console 輸出陣列每一個值。
Array.push 新增
push() 會將 () 中的值加入到陣列的最後。
myDog=["Yui","King"]
myDog.push("Daring");
console.log(myDog);// 輸出 ["Yui","King","Daring"]Array.unshift 新增
unshift() 會將 () 中的值加入到陣列最前方。
myDog=["Yui","King"]
myDog.unshift("Daring","Jordan");
console.log(myDog);
// 輸出 ["Daring","Jordan","Yui","King"]Array.pop 刪除
pop() 會將陣列最後一個值刪除
myDog=["Yui","King","Daring","Jordan"]
myDog.pop();
console.log(myDog);
// 輸出 ["Yui","King","Daring"]Array.shift 刪除
shift() 會將陣列第一個值刪除
myDog=["Yui","King","Daring","Jordan"]
myDog.shift();
console.log(myDog);
// 輸出 ["King","Daring","Jordan"]如果把這幾個方法比喻成神明施法：新增是生小孩，而刪除就是去世。一次只能針對一個人，
pop()和shift()都是指定一個人死亡💀💀💀，只是pop()是死走最慢的，shift()是死走最快的💀💀💀。
Array.reverse 反轉
reverse() 會將陣列反轉，滿實用的，常出現在表格排序上面。
myDog=["Yui","King","Daring","Jordan"]
myDog.reverse();
console.log(myDog);
// 輸出 ["Jordan", "Daring", "King", "Yui"]Array.splice 新增、刪除、置換
splice() 可以對陣列中的值，選擇新增、刪除、置換。因為它包含了下列三個參數：
陣列名稱.splice(指定要操作的陣列位置,移除的長度,添加的內容）- 第一個是指定要操作的陣列位置，不論是要移除或新增就是從這開始。 ( 必填 )。
- 第二個是要移除的長度 ( 選填），若不填則第一個號碼位置後方的所有元素都會被移除，若設定為 0 則不會有元素被移除 。
- 第三個是要添加的內容 ( 選填 )。
我們來試試看各種情況：
var myDog = ["Yui","King","Daring","Jordan"];
//在第1格之後，刪除2個，再加入Ruby
myDog.splice(1,2,"Ruby");
console.log(myDog);
//在第1格之後不刪除任何，直接加入100
myDog.splice(1,0,100);
console.log(myDog);
//刪除第3格之後
myDog.splice(3)
console.log(myDog);Array.slice 擷取
slice() 可以擷取出陣列某段的值，該方法有兩個參數：
- 第一個是擷取的起始位置。
- 第二個是結束的位置。
注意
slice()並不會破壞原本陣列😇，所以要取得值必須把他們賦予到一個變數中，如下：
var myDog = ["Yui","King","Daring","Jordan"];
//取出在第0格至第2格
let myLoveDog = myDog.slice(0,2);
console.log(myDog);
//輸出["Yui", "King", "Daring", "Jordan"]
console.log(myLoveDog);
//輸出["Yui", "King"]Array 有各種操縱陣列排序、增刪、查找的方法
先來看看陣列如何建立？😜😜
var myPet =["Yui","King","Daring"];var pet1=myPet[0];
var pet2=myPet[1];
var pet3=myPet[2];
console.log(`$(pet1)+$(pet2)+$(pet3)`)var myChildren=[];myChildren.push("Harry Potter");
console.log(myChildren)
Array 比大小排列
sort() 會對一個陣列的所有值進行排序，會改變並回傳此陣列，此方法需要指定一個函式作為參數來定義陣列內的排序，且函式包含兩個參數，以 a 跟 b 為例，若 a - b < 0，則 a 會排在 b 前面；若 a - b > 0，則 a 會排在 b 的後面；若 a - b = 0，則 a 跟 b 兩者的排序不會變動。
參數是否有放會影響排列順序：
- 如果沒有給予參數，陣列預設將根據各個值轉為字串後的每一個字元之 Unicode 編碼位置值進行排序。
- 有給參數就是依照參數函式來做比較
這一次我們先用數字來做舉例：
var num = [66, 82, 32, 51, 24, 13, 86, 11, 69, 70, 88];
//沒給
num.sort();
console.log(`沒給參數會得到 ${num}`);
//有給
num.sort((a, b) => b - a);
console.log(`有給參數會得到 ${num}`);
// 第一次傳入 a = 66, b = 82，由於 b > a 故 66 會在 82 的後面。
// 第二次傳入 a = 32, b = 66，32 會在 66 的後面。文字也會依照 Unicode 編碼位置值進行排序唷～
var myDog = ["Yui","King","Daring","Jordan"];
myDog.sort();
console.log(myDog);
myDog.sort((a, b) => {
if (a > b)
return -1;
if (a < b)
return 1;
return 0;
});
console.log(myDog);從文字排序的方法就可以看到，其實
sort()就是拿兩個值去做動作，最後結果如果是負就是放前面，正的就是放後面，有點神奇🤗！！
處理陣列與字串
Array.join 結合
join() 是把陣列轉換成字串， () 中的參數代表連結字串的東西，不填的話就維持原樣：
var myDog = ["Yui","King","Daring","Jordan"];
var aString = myDog.join();
console.log("aString:"+aString);
var bString = myDog.join('嘿 嘿 嘿 ');
console.log("bString:"+bString);
var cString = myDog.join('');
console.log("cString:"+cString);join()輸出結果很酷吧～參數可以填入任何值，空白也可以。
Array.split 分離
split() 跟 join() 相反，它是把字串拆解並組合成陣列，拆解時需要給定一個拆解基準的符號或空白，通常是用逗號( , )分隔：
var myDog = "Yui,King,Daring,Jordan";
var myDogArray = myDog.split(",");
console.log(myDogArray);
//輸出 ["Yui", "King", "Daring", "Jordan"]其實還有很多方法，但是一次也介紹不完，先以這幾個常用且基礎的來記憶吧🥳🥳🥳
