JavaScript數組經常使用操做

前言

相信你們都用慣了jquery或者underscore等這些類庫中經常使用的數組相關的操做，如$.isArray，_.some，_.find等等方法。這裏無非是對原生js的數組操做多了一些包裝。

這裏主要彙總一下JavaScript數組操做的經常使用API。相信對你們解決程序問題頗有幫助。

一、性質

JavaScript中的數組是一種特殊的對象，用來表示偏移量的索引是該對象的屬性，索引多是整數。然而，這些數字索引在內部被轉換爲字符串類型，這是由於JavaScript對象中的屬性名必須是字符串。

二、操做

2.1 判斷數組類型

var array0 = [];    // 字面量
var array1 = new Array();   // 構造器
// 注意：在IE6/7/8下是不支持Array.isArray方法的
alert(Array.isArray(array0));
// 考慮兼容性，可以使用
alert(array1 instanceof Array);
// 或者
alert(Object.prototype.toString.call(array1) === '[object Array]');

2.2 數組與字符串

很是簡單：由數組轉換爲字符串，使用join；由字符串轉換爲數組，使用split。

// join - 由數組轉換爲字符串，使用join
console.log(['Hello', 'World'].join(','));    // Hello,World
// split - 由字符串轉換爲數組，使用split
console.log('Hello World'.split(' '));    // ["Hello", "World"] 

2.3 查找元素

相信你們都經常使用字符串類型indexOf，卻不多知道數組的indexOf一樣能夠用於查找元素。

// indexOf - 查找元素
console.log(['abc', 'bcd', 'cde'].indexOf('bcd'));  // 1

// 
var objInArray = [
    {
        name: 'king',
        pass: '123'
    },
    {
        name: 'king1',
        pass: '234'
    }
];

console.log(objInArray.indexOf({
    name: 'king',
    pass: '123'
}));    // -1

var elementOfArray = objInArray[0];
console.log(objInArray.indexOf(elementOfArray));    // 0

從以上能夠看出，對於數組包含對象的這種數組，indexOf方法並不是是通過深度比較來獲得對應的查找結果，僅僅是比較對應元素的引用。

2.4 數組鏈接

使用concat，要注意，使用concat以後會生成一個新的數組。

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 實現數組鏈接以後，會建立出新的數組
console.log(array3);

2.5 類列表操做

用於添加元素，可分別使用push和unshift，移除元素可分別使用pop和shift。

// push/pop/shift/unshift
var array = [2, 3, 4, 5];

// 添加到數組尾部
array.push(6);
console.log(array); // [2, 3, 4, 5, 6] 

// 添加到數組頭部
array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5, 6] 

// 移除最後一個元素
var elementOfPop = array.pop();
console.log(elementOfPop);   // 6
console.log(array); // [1, 2, 3, 4, 5] 

// 移除第一個元素
var elementOfShift = array.shift();
console.log(elementOfShift);   // 1
console.log(array); // [2, 3, 4, 5] 

2.6 splice方法

主要兩個用途：

1> 從數組中間位置添加和刪除元素

2> 從原有數組中，獲取一個新數組

固然，兩個用途是一氣合成的，有些場景注重用途一，有些則注重用途二。

從數組中間位置添加和刪除元素，splice方法爲數組添加元素，需提供以下參數

1> 起始索引（也就是你但願開始添加元素的地方）

2> 須要刪除的元素的個數或者是提取的元素的個數（添加元素時該參數設置爲0）

3> 想要添加進數組的元素

var nums = [1, 2, 3, 7, 8, 9];
nums.splice(3, 0, 4, 5, 6);
console.log(nums);  // [1, 2, 3, 4, 5, 6, 7, 8, 9] 
// 緊接着作刪除操做或者提取新的數組
var newnums = nums.splice(3, 4);
console.log(nums);  // [1, 2, 3, 8, 9]
console.log(newnums);   // [4, 5, 6, 7] 

2.7 排序

主要介紹reverse和sort兩個方法。數組反轉使用reverse，sort方法不只能夠用於簡單排序，也能夠用於複雜排序。

// 反轉數組
var array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]

咱們先對字符串元素的數組進行排序

var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames);  // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"] 

咱們對數字元素的數組進行排序

// 若是數組元素時數字類型，sort()方法的排序結果就不能讓人滿意了
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums);  // [1, 100, 2, 200, 3, 4] 

sort方法是按照字典順序對元素進行排序的，所以它假定元素都是字符串類型，所以，即便元素時數字類型，也被認爲是字符串類型。這時，能夠在調用方法時傳入一個大小比較函數，排序時，sort()方法將會根據該函數比較數組中兩個元素的大小，從而決定整個數組的順序。

var compare = function(num1, num2) {
    return num1 > num2;
};
nums.sort(compare);
console.log(nums);  // [1, 2, 3, 4, 100, 200] 

var objInArray = [
    {
        name: 'king',
        pass: '123',
        index: 2
    },
    {
        name: 'king1',
        pass: '234',
        index: 1
    }
];
// 對數組中的對象元素，根據index進行升序
var compare = function(o1, o2) {
    return o1.index > o2.index;
};
objInArray.sort(compare);
console.log(objInArray[0].index < objInArray[1].index); // true

2.8 迭代器方法

主要包含forEach和every、some和map、filter

forEach相信你們都會，主要介紹一下其餘四種方法。

every方法接受一個返回值爲布爾類型的函數，對數組中的每一個元素使用該函數。若是對於全部的元素，該函數均返回true，則該方法返回true。

var nums = [2, 4, 6, 8];
// 不生成新數組的迭代器方法
var isEven = function(num) {
    return num % 2 === 0;
};
// 若是都是偶數，才返回true
console.log(nums.every(isEven)); // true

some方法也接受一個返回值爲布爾類型的函數，只要有一個元素使得該函數返回true，該方法就返回true。

var isEven = function(num) {
    return num % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log(nums1.some(isEven)); // true

 map和filter這兩個方法均可以產生新數組，map返回的新數組是對原有元素應用某個函數獲得的結果。如——

var up = function(grade) {
    return grade += 5;
}
var grades = [72, 65, 81, 92, 85];
var newGrades = grades.ma

filter方法和every方法很相似，傳入一個返回值爲布爾類型的函數。和every()方法不一樣的是，當對數組中的全部元素應用該函數，結果均爲true時，該方法並不返回true，而是返回一個新數組，該數組包含應用該函數後結果爲true的元素。

var isEven = function(num) {
    return num % 2 === 0;
};
var isOdd = function(num) {
    return num % 2 !== 0;
};
var nums = [];
for (var i = 0; i < 20; i++) {
    nums[i] = i + 1;
}
var evens = nums.filter(isEven);
console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 
var odds = nums.filter(isOdd);
console.log(odds);  // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] 

3. 總結

以上還存在某些方法在低級瀏覽器不支持的問題，後續再採用其餘方法進行兼容實現。

都是常見的可能你們不太容易想到的方法。你們不妨多留意一下。

 

參考：

《數據結構與算法JavaScript描述》