第二章 陣列

幾乎所有的程式語言都原生支援陣列型別，因為陣列是最簡單的記憶體資料結構。JavaScript裡也有陣列型別，雖然它的第一個版本並沒有支援陣列。本章將深入學習陣列資料結構和它的能力。

為什麼用陣列

需求：儲存所在城市每個月的平均溫度，可以這麼實現

var averageTemp1 = 43.3;
var averageTemp2 = 53.2;
var averageTemp3 = 14.2;
var averageTemp4 = 42.8;
var averageTemp5 = 14.8;
var averageTemp6 = 78.9;

只是儲存前六個月就用了6個變數，顯然這種方式不適合儲存這類需求。通過陣列可以簡單地實現我們的需求。

var averageTemp = [];
averageTemp[0] = 43.3;
averageTemp[1] = 53.2;
averageTemp[2] = 14.2;
averageTemp[3] = 42.8;
averageTemp[4] = 14.8;
averageTemp[5] = 78.9;

建立和初始化陣列

宣告、建立和初始化陣列的方式很簡單

var temp = new Array(); // 使用 new 關鍵字，簡單宣告並初始化一個數組
var temp = new Array(8);  // 還可以建立一個指定長度的陣列
var temp = new Array(1,2,4,9); // 直接將陣列元素作為引數傳遞給它的構造器
 

除了用 new建立陣列，還可以通過中括號 []簡單建立陣列。

var temp = [1,2,4,9];

訪問元素和迭代陣列

通過在數組裡指定特定位置的元素，可以獲取該值或者賦值。而要知道一個數組裡所有的元素，可以通過迴圈遍歷陣列。

for(var i = 0; i < temp.length; i++){
    console.log(temp[i]); // 1,2,4,9
}

案例：斐波那契數列

已知斐波那契數列中的第一個數字是1，第二個數字是2，從第三項開始，每一項都等於前兩項之和。求斐波那契數列的前20個數

var fibonacci = [];
fibonacci[1] = 1;
fibonacci[2] = 2;

for(var i =3; i < 20; i++){
    fibonacci[i] = fibonacci[i-1] + fibonacci[i-2];
}
console.log(fibonacci); // [ 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765]
 

新增元素

var number = [1,2,3];
number[number.length] = 4;
number // 1,2,3,4

上述程式碼可以在陣列的最後一位新增元素，但其實還有更加簡便的方法：

push

push 能新增任意個元素在陣列的末尾

number.push(5); // 5
number.push(6,7); //7
number // [1,2,3,4,5,6,7]

陣列使用 push 會返回陣列的長度

插入元素到陣列首位

首先我們要騰出陣列的第一個元素的位置，把所有的元素向右移動一位。我們可以迴圈陣列中的元素，從最後一位+1（長度）開始，將其對應的前一個元素的值賦給它，依次處理，最後把我們想要的值賦給第一個位置（-1）上。

for(var i = number.length; i>=0; i--){
    number[i] = number[i-1];
}
number[0] = -0;

unshift

或者直接 使用 unshift 方法，可以將數值插入陣列的首位：

var number = [1,2,3,4];
number.unshift(-2); // 5
number.unshift(-4,-3); // 7
number // [-4, -3, -2, 1, 2, 3, 4]

陣列使用 unshift 會返回陣列的長度

刪除元素

從陣列尾部刪除元素

pop

要刪除最靠後的元素可以使用 pop 方法，會刪除並返回陣列的最後一個元素。如果陣列已經為空，則 pop() 不改變陣列，並返回 undefined 值。

var number = [1,2,3,4];
number.pop(); //4
number // [1,2,3]
number.pop() // 3
number // [1]

從陣列首部刪除元素

如果要移除數組裡的第一個元素，可以使用下面的程式碼

var number = [1,2,3,4];
for(var i = 0;i < number.length; i++){
    number[i] = number[i+1];
}
number // [2, 3, 4, undefined]

可以看出，我們將陣列左移了一位，但陣列的長度仍然沒有變化，這意味著陣列中有一個額外的元素，因為沒有定義，所以是 undefined

shift

shift() 方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值。 陣列的長度也會發生變化。如果陣列是空的，那麼 shift() 方法將不進行任何操作，返回 undefined 值。

小結

push() 方法和 pop() 方法，能用陣列模擬基本的棧的資料結構（先進後出）。

shift()方法和unshift()方法，能用陣列模擬基本的佇列的資料結構（先進先出 ）。

在任意位置新增或者刪除元素

已經知道如何刪除陣列開頭和結尾的元素，那麼該怎麼在陣列中的任意位置刪除或者新增元素？

splice

splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。 splice() 方法可刪除從 index 處開始的零個或多個元素，並且用引數列表中宣告的一個或多個值來替換那些被刪除的元素。

語法

arrayObject.splice(index,howmany,item1,.....,itemX)

例子

var number = [1,2,3,4];
number.splice(2,0,4,4,5); // []
number //[1, 2, 4, 4, 5, 3, 4]
number.splice(2,5,7); // [4, 4, 5, 3, 4]
number //[1, 2, 7]

二維或者多維陣列

我們知道如果要記錄數天內每個小時的氣溫，可以使用陣列來儲存這些資料。那麼要儲存兩天每小時氣溫的資料的時候可以這樣。

var averageTemp1 = [32,53,45,23,46,53];
var averageTemp2 = [98,32,74,34,63,73];

然而這不是最好的方法。可以使用矩陣（二維陣列）來儲存這些資訊。矩陣的行儲存每天的資料，列對應小時級別的資料。

var averageTemp = [];
averageTemp[0] = [32,53,45,23,46,53];
averageTemp[1] = [98,32,74,34,63,73];

JavaScript只支援一維陣列，並不支援矩陣。但是，可以用陣列套陣列來模擬矩陣或者任一多維陣列。

迭代二維陣列的元素

如果想看到這矩陣的輸出，可以建立一個通用函式，專門輸出其中的值：

function printMatrix(x){
    for(var i = 0; i < x.length; i++){
        for(var j = 0; j< x[i].length; j++){
            console.log(x[i][j]);
        }
    }
}
printMatrix(averageTemp);

多維陣列

我們也可以用這種方式來處理多維陣列。假如我們要建立一個3x3x3的矩陣，每一個格子裡包含矩陣的i（行）、j（列）、z（深度）之和：

var matrix3x3x3 = [];

for(var i = 0; i < 3; i++){
    matrix3x3x3[i] = [];
    for(var j = 0; j < 3; j++){
        matrix3x3x3[i][j] = [];
        for(var z = 0; z < 3; z++){
            matrix3x3x3[i][j][z] = i+j+z;
        }
    }
}

資料結構中有幾個維度都沒有關係，都可以用迴圈遍歷每個維度來訪問所有格子

    for(var i = 0; i < matrix3x3x3.length; i++){
        for(var j = 0; j< matrix3x3x3[i].length; j++){
            for(var z = 0; z < matrix3x3x3[i][j].length; z++){
                console.log(matrix3x3x3[i][j][z]);
            }
        }
    }

如果是一個3x3x3x3的矩陣，程式碼中就會用四層巢狀的 for 語句，以此類推。

JavaScript 的陣列方法參考

在JavaScript裡，陣列是可以修改的物件。這意味著建立的每一個數組都有一些可用的方法。

下面表格是陣列的一些核心方法。

數組合並

有多個數組，需要合併起來成為一個數組。我們可以迭代各個陣列，然後把每個元素加入最終的陣列。

JavaScript也有提供相對應的方法 concat()

var a = 0;
var b = [1,2,3];
var c = [-3,-2,-1];
var s = c.concat(a,b);
s // [-3, -2, -1, 0, 1, 2, 3]

迭代器函式

有時候，我們需要迭代陣列中的元素。可以使用迴圈語句（前面提到的for語句等）。而其實 JavaScript 內建了許多陣列可以使用的迭代方法。

對於本節的例子，我們需要函式和陣列。假如有一個數組，值是從1到15，如果數組裡面的元素可以被2整除（偶數），函式就要返回true,否則就返回false:

var isEven = function(x){
    // 如果是 2的倍數，就返回 true
    return (x % 2 == 0);
}
var number = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

every

every 會迭代陣列中的每個元素，直到返回 false。

number.every(isEven)

在這個例子中，陣列number第一個元素是1，不是2的倍數，因此 isEven 函式返回false,然後 every 執行結束。

some

some 方法和 every 相似，不過some方法會迭代陣列中的每個元素，直到函式返回true

number.some(isEven)

這個例子中，陣列的第二個引數是2，為2的倍數，因此返回true，迭代結束

forEach

如果要迭代整個陣列可以用 forEach 方法，和使用 for 迴圈相同：

number.forEach(function(x){
    console.log((x % 2 == 0));
});

map & filter

JavaScript還有兩個會返回新陣列的遍歷方法。第一個是 map：

var myMap = number.map(isEven);
myMap // [false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]

從上面程式碼可以看出，myMap儲存了傳入 map 方法的 isEven函式執行的結果。這樣就可以很容易知道一個元素是否偶數。

還有一個filter方法，它返回的新陣列由使函式返回 true 的元素組成：

var evenNumbers = number.filter(isEven);
evenNumbers // [2, 4, 6, 8, 10, 12, 14]

reduce

reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。

語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

如果要對一個數組中所有元素進行求和，這就很有用

number.reduce(function(total,currentValue,index){
    return total + currentValue;
});
// 120

ES6 和陣列的新功能

下表是ES6/7新增的陣列方法

除了這些新的方法，還有一種用 for... of迴圈來迭代陣列的新做法，以及可以從陣列例項得到的迭代器物件。

使用 forEach 和箭頭函式

箭頭函式可以簡化使用 forEach迭代陣列元素的做法

number.forEach(function(x){
    console.log (x % 2 == 0);
})
// 等於
number.forEach(x => {
    console.log(x % 2 == 0);
});

使用 for...of 迴圈迭代

for(let n of number){
    console.log(n % 2 == 0);
}

使用ES6新的迭代器（@@iterator）

ES6還為 Array 類增加了一個 @@iterator 屬性，需要通過 Symbol.iterator來訪問。

let iterator = number[Symbol.iterator]();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // 4
console.log(iterator.next().value); // 5
console.log(iterator.next().value); // 6

因為number陣列中有15個值，所以需要呼叫15次 iterator.next().value ，陣列中所有值都迭代完之後，就會返回 undefined。

• 陣列的 entries、keys 和 values 方法

  ES6還增加了三種從陣列中得到迭代器的方法。

  entries 方法返回包含鍵值對的 @@iterator

  let aEntries = number.entries(); // 得到鍵值對的迭代器
  console.log(aEntries.next().value); // [0,1] -- 位置0的值為1
  console.log(aEntries.next().value); // [1,2] -- 位置1的值為2
  console.log(aEntries.next().value); // [2,3] -- 位置2的值為3

  number 陣列中都是數字，key是陣列中的位置，value是儲存在陣列中索引的值

  使用集合、欄位、散列表等資料結構時，能夠取出鍵值對是很有用的。後面會詳細講解。

  key 方法返回包含陣列索引的 @@iterator

  let aKeys  = number.entries(); // 得到陣列索引的迭代器
  console.log(aKeys.next()); // { value： 0， done: false}
  console.log(aKeys.next()); // { value： 1， done: false}
  console.log(aKeys.next()); // { value： 2， done: false}

  keys方法會返回number陣列的索引。一旦沒有可以迭代的值，aKeys.next() 就會返回一個value屬性為undefined，done屬性為 true的物件。如果 done屬性為false，就意味著還有可以迭代的值。

使用from方法

Array.from方法根據已有的陣列建立一個新數。比如複製number陣列：

let number2 = Array.from(number);
number2 // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

使用Array.of

Array根據傳入的引數建立一個新陣列、

let number3 = Array.of(1);
let number4 = Array.of(1,2,3,4,5,6);
number3 // [1]
number4 // [1,2,3,4,5,6]
// 複製已有的陣列
let numberCopy = Array.of(...number4);
numberCopy // [1,2,3,4,5,6]

使用fill方法

fill方法用靜態值充填陣列。

let numberCopy = Array.of(1,2,3,4,5,6);
numberCopy.fill(0); // [0, 0, 0, 0, 0, 0]
// 指定開始充填的索引
numberCopy.fill(2,1); // [0, 2, 2, 2, 2, 2]
// 指定結束的索引(結束的索引不包括本身)
numberCopy.fill(1,3,5); // [0, 2, 2, 1, 1, 2] 

建立陣列並初始化的時候，fill 方法就非常好用。

let ones = Array(6).fill(1); // 建立了一個長度為6，所有值都是1的陣列

使用copyWithin方法

copyWithin方法複製陣列中的一系列元素到同一個陣列指定的起始位置。

語法：

array.copyWithin(target, start, end)

let copyArray = [1,2,3,4,5,6];
copyArray.copyWithin(0,3); // [4, 5, 6, 4, 5, 6]

let copyArray1 = [1,2,3,4,5,6];
copyArray1.copyWithin(1,3,5); // [1, 4, 5, 4, 5, 6]

排序元素

反序輸出最開始的長度為15的number陣列。

number.reverse();
// [15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

嘗試使用JavaScript自帶的排序函式 sort();

number.sort();
//[1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]

跟我們預期的有些不一樣，這是因為 sort 方法在對陣列進行排序 的時候，把元素預設成字串進行相互比較。所以我們要自己定義一個比較函式。

number.sort((a,b) =>{
    return a -b;
})
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

上述程式碼，如果 b 大於 a，會返回負數，反之就是正數。如果相等的話，就會返回0。下面的寫法會清晰一點

function compare(a, b){
    if(a < b){
        return -1;
    }
    if(a > b){
        return 1;
    }
    return 0;
}
number.sort(compare);

sort 方法接受 compareFunction作為引數來比較元素。然後sort 會用它來排序陣列

自定義排序

我們可以對任何物件型別的陣列排序，也可以建立 compareFuntion 來比較元素。例如物件 Person 有名字和屬性，我們希望根據年齡排序。

var friends = [
    {name: 'John', age: 30},
    {name: 'Ana', age: 20},
    {name: 'Chris', age: 25}
];

friends.sort((a, b) =>{
    return a.age - b.age;
})
// {name: "Ana", age: 20}
   {name: "Chris", age: 25}
   {name: "John", age: 30}

字串排序

var names = ['Ana', 'ana', 'John', 'john'];
names.sort();
// ["Ana", "John", "ana", "john"] 

字串的比較是根據對應的 ASCⅡ值來比較的。例如 A、J、a、j對應分別是65、74、97、106。

雖然字母表的 a 是排靠前的，但是由於 ASCⅡ值 比較大，所以沒有排在首位。如果忽略大小寫呢？會是怎麼樣

names.sort((a, b) =>{
    if(a.toLowerCase() < b.toLowerCase()){
        return -1;
    }
    if(a.toLowerCase() > b.toLowerCase()){
        return 1;
    }
    return 0; 
})
// ["Ana", "ana", "John", "john"]

搜尋

搜尋有兩個方法：indexOf方法返回與引數匹配的第一個元素的索引，lastIndexOf返回與引數匹配的最後一個元素的索引。

number.indexOf(10); // 9
number.indexOf(100); // -1 （因為100不存在數組裡面）

number.puhs(10);
number.lastIndexOf(10); // 15
number.lastIndexOf(100) // -1

ES6 find 和 findIndex方法

let number =  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const multipleof13 = (element, index, array) => {
    return (element % 13 == 0);
}
number.find(multipleof13); //13
number.findIndex(multipleof13); // 12

find 和 findIndex方法接受一個回撥函式，搜尋一個滿足回撥函式條件的值。上面的例子中，我們要從數組裡找有個13的倍數。

ES7 使用includes方法

如果陣列存在某個元素，includes 方法就會返回 true,否則就返回 false。

number.includes(15) // true
number.includes(20) // false

number.includes(4,4) // false 第二個引數為開始搜尋的索引

輸出字串

toString 和 jion 方法

如果想把數組裡所有元素輸出位一個字串，可以使用 toString 方法

number.toString(); // "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15"

還可以用不同的分隔符將元素隔開

number.join('-'); // "1-2-3-4-5-6-7-8-9-10-11-12-13-14-15"

型別陣列

JavaScript由於不是強型別的，因此可以儲存任意型別的資料，而型別陣列則用於儲存單一的資料。

語法：

let myArray = new TypedArray(length);

let length = 5;
let int16 = new Int16Array(length);

let array16 = [];
array16.length = length;

for(let i = 0;i < length; i++){
    int16[i] = i + 1;
}
console.log(int16); // [1, 2, 3, 4, 5]

使用 webGl API、進行位操作、處理檔案和影象時候，型別陣列都可以大展拳腳。它用起來和普通陣列也毫無二致，本節所學的陣列方法和功能都可以用於型別陣列。

小結

學習了常見的資料結構：陣列。學習了怎麼宣告和初始化陣列，給陣列賦值後，以及新增和移除陣列元素，學了多維陣列和陣列的一些操作方法。

下一章，學習棧，一種具有特殊行為的陣列。