詳解JavaScript中數組的相關知識_JavaScript

建立陣列

js中陣列的宣告可以有以下幾種方式：

var arr = [];  // 简写模式
var arr = new Array(); // new一个array对象
var arr = new Array(arrayLength); // new一个确定长度的array对象

要說明的是：

•     雖然第三種方法宣告了陣列的長度，但實際上陣列長度是可變的。也就是說，即使指定了長度為5，仍然可以將元素儲存在規定長度之外，這時陣列的長度也會隨之改變。
• 此外，還需要明確的一點：
•     js是弱型別語言，也就是陣列中的元素型別不需要一樣。

舉個陣列中元素類型不一致的例子：

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

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

陣列元素存取

JavaScript數組的索引值也是從0開始的，我們可以直接透過數組名稱 下標的方式對數組元素進行存取。

範例程式碼如下：

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

此外，陣列的遍歷推薦使用連續for迴圈的模式，不推薦for-in，具體原因參考：Loop through array in JavaScript

遍歷陣列範例程式碼如下：

var arr = [1, 2, 3, 4, 'wangzhengyi', 'bululu'];

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

注意：

    上述程式碼中，一個小最佳化在於事先取得陣列的大小，因此不需要每次遍歷都去查詢陣列大小。對於超大數組來說，能提高一定的效率。

新增陣列元素

有三種方法可以在一個陣列中加入新的元素，分別是：push、unshift、splice。下面我分別來介紹這三種方法。
push

push方法，在陣列末尾加入元素。範例程式碼如下：

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

執行結果為：

1
2
3

unshift

unshift方法，是在陣列頭部加入元素。範例程式碼如下：

var arr = [];
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);


for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

執行結果如下：

3
2
1

splice

splice方法是在陣列的指定位置插入新元素，之前的元素則是自動順序後移。注意splice的函數原型為：

array.splice(index, howMany, element...)

howMany表示要刪除的元素個數，如果只是加入元素，此時howMany需要置為0。

範例程式碼如下：

var arr = [1, 2, 3, 4];

arr.splice(1, 0, 7, 8, 9);

for (var i = 0, len = arr.length; i < len; i ++) {
  console.log(arr[i]);
}

執行結果如下：

1
7
8
9
2
3
4

刪除陣列元素

與增加陣列元素一樣，刪除陣列中的元素也有三種方法，分別是：pop、shift和splice。接下來，分別來講解這三個函數的用法。
pop

pop方法是移除陣列中的最後一個元素。 push和pop的組合可以將陣列實現類似於堆疊（先入後出）的功能。範例程式碼如下：

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

while (arr.length != 0) {
  var ele = arr.pop();
  console.log(ele);
}

shift

shift方法是移除第一個元素，陣列中的元素自動前移。 （這種方法肯定對應著效率問題，時間複雜度是O(n)）。

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

while (arr.length != 0) {
  var ele = arr.shift();
  traverseArray(arr);
}

大家可以自己考慮運作結果。
splice

在增加陣列元素的時候，我們就講過splice，這個函數原型中有一個howMany參數，代表從index開始刪除之後的幾個元素。
範例程式碼如下：

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

function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

arr.splice(1, 3);
traverseArray(arr);

執行結果為：

1
5
7

陣列的拷貝和截取

舉個例子，程式碼如下：

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;

這時候，arr2只是保存arr1數組在堆內存的地址，並沒有在堆內存重新申請內存搞一個數組出來。所以對arr2的修改會同時影響到arr1。因此，如果我們需要拷貝一份陣列該怎麼做呢？這就引出了需要學習的slice和concat函數。
slice

這裡的slice和python語法的slice是一樣的，都是傳回陣列的切片。 slice函數原型為：

array.slice(begin, end)

傳回所有從begin到end的元素，注意包含begin，但不包含end。
缺省begin，預設從0開始。缺省end，預設到數組末尾。

因此，拷貝數組我們可以透過以下程式碼實現：

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice();
arr2[2] = 10000
function traverseArray(arr) {
  for (var i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
  }
}

traverseArray(arr1);
traverseArray(arr2);

執行結果如下：

1
2
3
4
1
2
10000
4

concat

concat方法將建立一個新數組，然後將呼叫它的物件(this 指向的物件)中的元素以及所有參數中的數組類型的參數中的元素以及非數組類型的參數本身按照順序放入這個新數組,並傳回該數組.

範例程式碼如下：

var alpha = ["a", "b", "c"];
var number = [1, 2, 3]

// 新数组为["a", "b", "c", 1, 2, 3]
var complex = alpha.concat(number);