陣列是什麼?

陣列（Array）是一種資料的集合，其中的值被稱之為元素，我的理解是，陣列就像是一個櫃子，裡面裝了性質類似的連續變數，他們使用同一個變數名字（櫃子名稱），用 索引值 來指定使用第幾個變數，且陣列基本上都是有序的，索引基本上都是由 0 開始！

陣列的宣告方式

var cabinet =Array();                           
var cabinet =[];
var cabinet =Array(10);                         //宣告 0 ~ 9 共 10 個的陣列，但現在裡面的東西是undefined
var cabinet =['red','yellow','black'];

讀取陣列中的元素

var fruits = ['apple', 'banana'];

var first = fruits[0];            
> apple

var last = fruits[fruits.length - 1];          //此陣列長度為 2 , 但是索引是從 0 開始 [0]、[1]，所以須 - 1
> banana

更改陣列中某個元素的值

var fruits = ['apple','banana'];

fruits[0] = 'orange';
fruits[1] = 666;

console.log(fruits);
>['orange',666]

稀疏陣列 vs 密集陣列

密集陣列

陣列是一片連續的儲存空間，有固定的長度，密集陣列元素之間是緊密相連的，不存在空隙！

var megi = [9,4,5,6];          //緊密相連，裡面沒有空隙的陣列

稀疏陣列 （Sparse Array）

稀疏聽起來跟掉髮有關（並不是），稀疏陣列是指陣列中有插槽（slot）可能未定義其值或被略過而導致存放 undefined 元素的狀況！

const list = [];
list[0] = 'apple';
list[2] = 'banana';
console.log(list.length);
>3                            //list[1]會變成 undefined，list.length 是 3

鍵值的強制轉型
若使用很像數字的字串當成鍵值來存資料，鍵值會被強制轉型為數字！

const list = [];
list[0] = 'Hello';
list['20'] = 'World';

console.log(list.length);
>21

length 長度永遠大於陣列最高索引數
為了保持這個不變式，會自動變為length + 1！

var a = [1,2,3];
a[10] = 1;
console.log(a.length) ;
>11                      //想不到吧，居然不是 10

陣列常用內建函式

Push()

• push()可以將值加入陣列的最後一個位置，沒有限制添加數量，添加內容用 , 隔開即可，加入後陣列長度會增加！

  使用 push() 後會改變原本的陣列內容。

var a =[1,2,3,4,5,6];
a.push(7,8);               //在這陣的最後位置添加 7,8
console.log(a);
>[1,2,3,4,5,6,7,8]

pop()

• pop()會移除（取出）陣列的最後一個元素。

  使用 pop() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6,7,8];
var b = a.pop();

console.log(a);
>[1,2,3,4,5,6,7]       //被拿走最後一個元素的陣列

console.log(b);        //被拿出的最後一個元素
>8

shift()

• shift()會移除（取出）陣列的第一個元素。

  使用 shift() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6,7,8];
var b =a.shift();

console.log(a);
>[2,3,4,5,6,7,8]      //被拿走第一個元素的陣列

console.log(b)
> 1                   //被拿出的第一個元素

unshift()

• unshift() 會將指定的元素添加到第一個位置。

  使用 unshift() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6];
a.unshift(666,777,888);

reverse()

reverse()會將陣列反轉。

使用 reverse() 後會改變原本的陣列內容。

var a = [1,2,3,4,5,6,7,8];
a.reverse();
console.log(a);
[8,7,6,5,4,3,2,1]

splice()

splice()可以移除或新增陣列的元素，他包含了三個參數，第一個是要移除或添加的序列號碼(必填)，第二個是移除的長度設定為0的話，就不會有元素被移除，第三個則是要添加的內容。

var a =[1,2,3,4,5,6];
a.splice(2,0,100);
console.log(a);
>[1,2,100,3,4,5,6]                     //沒有元素被清除，100被加到了位置 2

var a =[1,2,3,4,5,6,7,8];
a.splice(5,3,100,200,300);
console.log(a);
>[1,2,3,4,5,100,200,300]             //100、200、300取代原本位置在 5、6、7的元素

－－－

join()

join()可以將陣列中的元素，藉由指定的字符合併，變成字串呈現，沒有指定則會用,合併喔！

var a = [1,2,3,4,5,6,7,8];

console.log(a.join());
>1,2,3,4,5,6,7,8

console.log(a.join(''));
>12345678

console.log(a.join('!!'))
>1!!2!!3!!4!!5!!6!!7!!8

map()

map()會建立一個新的陣列，內容為原陣列的每一個元素，經由回乎韓式運算後索回傳的結果之集合。

var a = [1,2,3,4,5];
var newa = a.map(x => x * 2);
console.log(newa);

>[2,4,6,8,10]

filter()

filter() 接收一函式，但函map不同的是，filter把傳入的函示依次作用於每個元素，然後根據返回值 true 還是 false 決定保留還是丟棄該元素。

 var a = [1,2,3,4,5,6,7];
 var r = a.filter(function(x){
     return x % 2 !== 0;
 });
 console.log(r);

 >[1,3,5,7]

var a = ['A','','B',null,'c','   '];
var r = a.filter(function(s){
    return s && s.trim();       //.trim將字串去空白
});
console.log(r);

>["A","B","C"]

參考資料來源:
Lidemy 鋰學院-Huli老師的課程
你懂 JavaScript 嗎？#5 值（Values）Part 1 - 陣列、字串、數字
JS 陣列 Array 是什麼 ?
JavaScript Array (陣列)
javascript稀疏陣列(sparse array)和密集陣列用法分析
Javascript大全 - 05(一) 陣列
JavaScript Array 陣列操作方法大全
Array.prototype.map()
Javascript中關於Array.filter()的妙用詳解