數組方法彙總

原生javascript方法

建立數組

var colors = [];
var colors = ['red', 'blue'];

檢測數組

if(arr instanceof Array) {}

若是網頁中包含多個框架，則須要使用下面的方式檢測數組

if(Array.isArray(arr)) {}

arr.valueOf()

var colors = ['red', 'yellow'];
colors.valueOf();
// > ['red', 'yellow']

arr.toString()

var colors = ['red', 'yellow'];
colors.toString();
// > "red,yellow"

arr.push(item)

從數組末尾添加元素，並返回新數組的長度

var colors = ['red', 'yellow'];
colors.push('pink');
// > 3

arr.pop()

從數組末尾刪除元素，並返回被刪除的元素

var colors = ['red', 'yellow'];
colors.pop();
// > 'yellow'

arr.unshift(item)

從數組頭部添加元素，並返回新數組的長度

var colors = ['green', 'pink'];
colors.unshift('pink');
// > 3

arr.shift()

從數組頭部刪除元素，並返回被刪除的元素

var colors = ['yellow', 'orange'];
colors.shift();
// > 'yellow'

arr.reverse()

反轉數組的順序，並返回從新排序以後的數組， 原數組會被改變

[1, 2, 3, 'reer', 'game', 2, 5].reverse();
// > [5, 2, "game", "reer", 3, 2, 1]

arr.sort(fn)

若是不傳參數，默認狀況下數組內的元素會被轉換爲字符串進行比較，所以通常不推薦直接使用默認的arr.sort()進行排序。
返回值爲排序後的新數組。原數組會被改變

• 將數組內數值元素從小到大排序。

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b)) {
    return a - b;
}
// > [1, 2, 4, "reee", "name", "9", "doc"]

• 將數組內數值元素從大到小排序

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b) {
    return b - a;
})
// > [4, 2, 1, "reee", "name", "9", "doc"]

arr.concat(otherArr)

參數中傳入元素或者數組， 會將該參數合併到arr中，返回合併後新的數組，原數組不會改變

var arr = [1, 3, 'jake'];
arr.concat('rose', [2, 'fi']);
// > [1, 3, 'jake', 'rose', 2, 'fi']

arr.slice()

剪切數組，返回剪切以後的數組，元素不會改變

• 傳入一個參數，表示起始位置，結束位置爲最末尾

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2);
// > [1, "reee", "name", "9", "doc"]

• 傳入2個參數，表示起始位置與結束位置，但不包括結束位置所在的元素

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2, 4);
// > [1, "reee"]

arr.splice()

根據參數的不一樣，能夠分別實現刪除，插入，替換元素的做用，會改變原始數組

• 刪除

傳入2個參數， 分別表示起始位置與要刪除元素的個數，返回被刪除掉的元素組成的數組

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.splice(2, 3);
// > [1, "reee", "name"]
// arr: [4, 2, "9", "doc"]

• 插入

傳入3個參數， [起始位置 | 要刪除的項數 爲0 | 要插入的元素]， 最終返回刪除掉的元素組成的數組，由於這裏刪除項數爲0，所以會返回空數組

var arr = [2, 4, 6];
arr.splice(2, 0, 'red', 'green'); 
// > []
// arr: [2, 4, "red", "green", 6]

• 替換

傳入三個參數， [ 起始位置 | 要刪除的項數 爲1 | 要插入的元素 ]，最終返回被刪除掉的元素組成的數組

var arr = [2, 4, 9];
arr.splice(1, 1, ['tim', 'tom']);
// > [4]
// arr: [2, ['tim', 'tom'], 9]

• 總結 所以，這個方法會由於參數的不一樣而實現不一樣的功能，全部的參數從頭至尾依次爲

[ 起始位置 | 要刪除元素的個數 | 要插入元素的值，能夠寫入多個值 ]

arr.indexOf(item)

驗證數組中是否含有某個元素，返回第一個匹配到的元素在數組中所在的位置，若是沒有，則返回 -1

var arr = [2, 'tim', 4, 5, 2];
arr.indexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

arr.lastIndexOf(item)

驗證數組中是否含有某個元素，不過是從數組尾部開始查找，返回第一個匹配到的元素所在的位置，若是沒有，則返回-1

var arr = [2, 'tim', 4, 5, 2];
arr.lastIndexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

IE6, 7, 8 不支持indexOf與lastIndexOf方法

arr.every()

對數組中的每一項運行給定函數，若是該函數對每一項都返回true，則返回true。會有一個函數做爲every的參數，該函數也有3個參數，分別爲
[ 調用every的數組的每一項元素 | 對應元素所在的位置 | 表示該數組 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.every(function(item, index, array) {
    return item > 2;
})
// > false

arr.some()

對數組中的每一項運行給定函數，若是該函數對其中一項返回true，則返回true。會有一個函數做爲every的參數，該函數也有3個參數，分別爲
[ 調用every的數組的每一項元素 | 對應元素所在的位置 | 表示該數組 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.some(function(item, index, array) {
    return item > 2;
})
// > true

arr.filter(fn)

過濾方法。返回知足條件的元素組成的數組。fn的參數爲
[ 調用every的數組的每一項元素 | 對應元素所在的位置 | 表示該數組 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]

arr.map(fn)

對數組的每一項進行計算等處理，返回處理結果組成的數組，fn的參數爲
[ 調用every的數組的每一項元素 | 對應元素所在的位置 | 表示該數組 ]

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]

arr.forEach(fn)

遍歷數組，沒有返回值，fn的參數爲
[ 調用every的數組的每一項元素 | 對應元素所在的位置 | 表示該數組 ]

numbers.forEach(function(item, index) {
    // do something
})

arr.reduce(fn)

縮減方法。fn的參數爲
[ 前一個元素 | 當前元素，從1開始 | 後一個元素的序列，從1開始計數 | 表示該數組 ]

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// > 15 
//每一次迭代以後的結果分別爲
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15

arr.reduceRight(fn)

與reduce如出一轍，只是方向相反。

jQuery相關方法

$.each(arr, fn)

遍歷數組或者對象，fn有2個參數，分別爲， 比原生的for in 更加健壯
[ 數組的索引或者對象的key值 | 索引或者key值對應的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

• 跳過一次循環 return | return true
• 終止循環 return false

$.grep(arr, fn)

過濾方法，功能類同原生中的arr.filter(fn)。此處fn的參數以下
[ value: 對象/數組的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不會改變

$.map(arr, fn)

對每項進行處理，返回處理結果組成的數組，此處fn的參數以下
[ value: 對象/數組的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原數組不受影響

$.inArray(item, array)

檢測某一個元素item是否存在與數組之中，返回其所在的位置，若是不在，則返回-1

$.inArray(3, [1, 2, 3]);
// > 2

$.merge(arr1, arr2)

合併數組，會改變第一個參數的數組爲合併以後的數組，返回合併以後的數組

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 爲了防止第一個數組被改變，可使用下面的方式來寫
$.merge($.merge([], arr), arr2);

$.unique(arr)

過濾DOM數組中重複的元素

$.makeArray(obj)

將類數組對象轉換爲數組

$(elem).toArray()

將jQuery對象集合恢復成DOM數組