JavaScript原生Array常用方法

JavaScript原生Array常用方法

在入門Vue時, 列表渲染一節中提到數組的變異方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不屬於變異方法. 在這里就復習一下Array所提供的這幾個方法的使用.

棧方法

push方法和pop方法, 可以使數組的行為類似於棧, 先進后出, 並且推入和彈出操作只發生在一端.

push方法

push方法可以接收一個或多個參數, 把它們追加到數組末尾, 並返回修改后數組的長度.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.push('f');
console.info('temp: ' + temp); // temp: 6
console.info(arr); // ["a", "b", "c", "d", "e", "f"]

temp = arr.push('g', 'h');
console.info('temp: ' + temp); // temp: 8
console.info(arr); // ["a", "b", "c", "d", "e", "f", "g", "h"]

合並兩個數組
我們可以通過Array.prototype.push.apply()來合並兩個數組, 示例如下:

var arr1 = ['a', 'b', 'c'],
    arr2 = ['x', 'y', 'z'];
var temp = Array.prototype.push.apply(arr1, arr2);
console.info(arr1); // ["a", "b", "c", "x", "y", "z"]
console.info(arr2); // ["x", "y", "z"]
console.info(temp); // 6

pop方法

pop方法是將數組的最后一項移除, 將數組長度減1, 並返回移除的項.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.pop();
console.info('temp: ' + temp); // temp: e
console.info('length: ' + arr.length); // length: 4

如果在一個空數組上使用pop方法, 則返回undefined

隊列方法

隊列的訪問規則是先進先出, 並且隊尾添加項, 隊頭移除項. push方法和shift方法結合使用, 就可以像操作隊列一樣操作數組.

shift方法

shift方法將移除數組的第一項, 將數組長度減1, 並返回移除的項.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.shift();
console.info('temp: ' + temp); // temp: a
console.info('length: ' + arr.length); // length: 4

unshift方法

相反地, 還有一個unshift方法, 它的用途與shift方法相反
unshift也可以在接收一個或多個參數, 把它們依次添加到數組的前端, 並返回修改后數組的長度.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.unshift('x', 'y', 'z');
console.info('temp: ' + temp); // temp: 8
console.info(arr); // ["x", "y", "z", "a", "b", "c", "d", "e"]

重排序方法

sort方法和reverse方法

sort方法和reverse方法是可以直接用來重排序的兩個方法.
其中, reverse方法是用來反轉數組的.

var arr = [1, 3, 2, 5, 4];
arr.reverse();
console.info(arr); // [4, 5, 2, 3, 1]

關於sort方法, 默認情況下, 它是對數組的每一項進行升序排列, 即最小的值在前面. 但sort方法會調用toString方法將每一項轉成字符串進行比較(字符串通過Unicode位點進行排序), 那么這種比較方案在多數情況下並不是最佳方案. 例如:

var arr = [1, 3, 2, 5, 4];
arr.sort();
console.info(arr); // [1, 2, 3, 4, 5]

arr = [1, 5, 10, 20, 25, 30];
arr.sort();
console.info(arr); // [1, 10, 20, 25, 30, 5]

因此, sort方法可以接收一個比較函數作為參數, 由我們來決定排序的規則. 比較函數接收兩個參數, 如果第一個參數小於第二個參數(即第一個參數應在第二個參數之前)則返回一個負數, 如果兩個參數相等則返回0, 如果第一個參數大於第二個參數則返回一個正數, 例如:

var arr = [1, 5, 10, 20, 25, 30];
arr.sort(function(value1, value2){
    if(value1 < value2) {
        return -1;
    } else if(value1 > value2) {
        return 1;
    } else {
        return 0;
    }
});
console.info(arr); // [1, 5, 10, 20, 25, 30]

操作方法

concat方法

concat方法可以將多個數組合並成一個新的數組. concat可以接收的參數可以是數組, 也可以是非數組值.

var arr1 = ['a', 'b', 'c'],
    arr2 = ['x', 'y', 'z'],
    val = 'hello';
var temp = arr1.concat(val, arr2);
console.info('arr1: ' + arr1); // arr1: a,b,c
console.info('arr2: ' + arr2); // arr2: x,y,z
console.info('val: ' + val); // val: hello
console.info('temp: ' + temp); // temp: a,b,c,hello,x,y,z

concat方法並不操作原數組, 而是新創建一個數組, 然后將調用它的對象中的每一項以及參數中的每一項或非數組參數依次放入新數組中, 並且返回這個新數組.

concat方法並不操作調用它的數組本身, 也不操作各參數數組, 而是將它們的每個元素拷貝一份放到新創建的數組中. 而拷貝的過程, 對於對象類型來說, 是將對象引用復制一份放到新數組中, 而對於基本類型來說, 是將其值放到新數組中.

slice方法

slice方法可以基於源數組中的部分元素, 對其進行淺拷貝, 返回包括從開始到結束(不包括結束位置)位置的元素的新數組.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp1 = arr.slice(),
    temp2 = arr.slice(1),
    temp3 = arr.slice(1, 2);
console.info(arr); // ["a", "b", "c", "d", "e"]
console.info(temp1); // ["a", "b", "c", "d", "e"]
console.info(temp2); // ["b", "c", "d", "e"]
console.info(temp3); // ["b"]

從示例中可以看出:

1. slice方法並沒有操作原數組, 而是創建了一個新的數組.
2. 當沒有傳參數給slice方法時, 則返回從索引0開始拷貝的新數組.
3. 傳入一個參數, 如: arr.slice(1), 表示從索引1位置開始拷貝, 一直到原數組的最后一個元素.
4. 傳入兩個參數, 如: arr.slice(1, 2), 表示從索引1位置開始拷貝, 一直拷貝到位置2但不包括位置2上的元素.

參數如果為負數, 表示從數組最后面的元素可以算起.
slice方法同樣不操作調用它的數組本身, 而是將原數組的每個元素拷貝一份放到新創建的數組中. 而拷貝的過程, 也於concat方法相同.

splice方法

splice方法可以用途刪除或修改數組元素. 它有如下幾種用法:

• 刪除:
  當給splice方法中傳入一個或兩個參數時, 就可以從數組中刪除任意元素.
  傳入一個參數: 要刪除的的第一個元素的位置, 此時將會刪除從要刪除的第一個元素的位置起, 后面的所有元素.
  傳入兩個參數: 要刪除的第一個元素的位置和要刪除的項數,
  返回值均為刪除的元素組成的數組, 例如:

  var arr = ['a', 'b', 'c', 'd', 'e'];
  var temp = arr.splice(2);
  console.info(arr); // ["a", "b"]
  console.info(temp); // ["c", "d", "e"]
  
  arr = ['a', 'b', 'c', 'd', 'e'];
  temp = arr.splice(2, 2);
  console.info(arr); // ["a", "b", "e"]
  console.info(temp); // ["c", "d"]
  

• 插入:
  使用splice方法可以向數組的指定位置插入任務數量的元素, 此時需要提供三個參數: 起始位置(要插入的位置), 0(表示要刪除的項數, 0為不刪除), 要插入的元素, 如果要插入多個元素可以添加更多的參數, 例如:

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.splice(2, 0, 'x', 'y', 'z');
console.info(arr); // ["a", "b", "x", "y", "z", "c", "d", "e"]
console.info(temp); // [], 並沒有刪除元素

• 替換:
  當splice接收三個參數, 且第二個參數不為0時, 可達到在數組中替換元素的效果. 例如:

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.splice(2, 2, 'x', 'y', 'z');
console.info(arr); // ["a", "b", "x", "y", "z", "e"]
console.info(temp); // ["c", "d"]

此示例表示, 從arr數組的位置為2的元素起, 刪除2個元素, 並在位置2添加三個元素.
如果移除的元素個數不等於添加的元素個數, 那么數組的長度將發生變化.

另外,
從ECMAScript5開始, 還提供了數組的迭代方法, 歸並方法等, 這些方法將在后面做出補充.