javascript中數組的22種方法

前面的話

　　數組總共有22種方法，本文將其分爲對象繼承方法、數組轉換方法、棧和隊列方法、數組排序方法、數組拼接方法、建立子數組方法、數組刪改方法、數組位置方法、數組歸併方法和數組迭代方法共10類來進行詳細介紹

 

對象繼承方法

　　數組是一種特殊的對象，繼承了對象Object的toString()、toLocaleString()和valueOf()方法

【toString()】

　　toString()方法返回由數組中每一個值的字符串形式拼接而成的一個以逗號分隔的字符串

　　[注意]該方法的返回值與不使用任何參數調用join()方法返回的字符串相同

[1,2,3].toString();//'1,2,3'
['a','b','c'].toString();//'a,b,c'
[1,[2,'c']].toString();//'1,2,c'

　　因爲alert()要接收字符串參數，它會在後臺調用toString()方法，會獲得與toString()方法相同的結果

alert([1,2,3]);//'1,2,3'

【toLocaleString()】

　　toLocaleString()是toString()方法的本地化版本，常常返回與toString()方法相同的值，但也不總如此

var person1 = {
    toLocaleString: function(){
        return 'Nikolaos';
    },
    toString: function(){
        return 'Nicholas';
    }
};
var person2 = {
    toLocaleString: function(){
        return 'Grigorios';
    },
    toString: function(){
        return 'Greg';
    }
};
var people = [person1,person2];
console.log(people.toString());//'Nicholas,Greg'
console.log(people.toLocaleString());//'Nikolaos,Grigorios'

　　若是數組中的某一項的值是null或者undefined，則該值在toLocaleString()和toString()方法返回的結果中以空字符串表示

var colors = [1,undefined,2,null,3];
console.log(colors.toString());//'1,,2,,3'
console.log(colors.toLocaleString());//'1,,2,,3'

【valueOf()】

　　valueOf()方法返回數組對象自己

var a = [1, 2, 3];
console.log(a.valueOf());// [1, 2, 3]
console.log(a.valueOf() instanceof Array);//true

 

數組轉換方法

【join()】

　　Array.join()方法是String.split()方法的逆向操做，後者是將字符串分割成若干塊來建立一個數組

　　數組繼承的toLocaleString()和toString()方法，在默認狀況下都會以逗號分隔的字符形式返回數組項；而join()方法可使用不一樣的分隔符來構建這個字符串，join()方法只接收一個參數，用做分隔符的字符串，而後返回包含全部數組項的字符串

　　若是不給join()方法傳入任何值，則使用逗號做爲分隔符

var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'

var b = new Array(10);
b.join('-');//'---------'，9個連字符組成的字符串

　　若join()方法的參數是undefined，標準瀏覽器以逗號爲分隔符返回字符串，而IE7-瀏覽器以'undefined'爲分隔符返回字符串

//標準瀏覽器爲'1,2,3';IE7-瀏覽器爲'1undefined2undefined3'
var a = [1,2,3];
console.log(a.join(undefined));

　　若是數組中的某一項的值是null或者undefined，則該值在join()方法返回的結果中以空字符串表示

var colors = [1,undefined,2,null,3];
console.log(colors.join());//'1,,2,,3'

　　該方法也能夠用於類數組對象上

console.log(Array.prototype.join.call('hello', '-'));// "h-e-l-l-o"
var obj = { 0: 'a', 1: 'b', length: 2 };
console.log(Array.prototype.join.call(obj, '-'));// 'a-b'

　　[注意]若對象沒有length屬性，就不是類數組，也就不能調用數組的方法

var obj = { 0: 'a', 1: 'b' };
console.log(Array.prototype.join.call(obj, '-'));//''

　　使用join()方法能夠建立重複某些字符N次的函數

function repeatString(str,n){
    return new Array(n+1).join(str);
}
console.log(repeatString('a',3));//'aaa'
console.log(repeatString('Hi',5));//'HiHiHiHiHi'

 

棧和隊列方法

　　push()和pop()方法容許將數組看成棧來使用。unshift()和shift()方法的行爲很是相似於push()和pop()，不同的是前者是在數組的頭部而非尾部進行元素的插入和刪除操做

　　棧是一種LIFO(Last-In-First-Out，後進先出)的數據結構，也就是最新添加的項最先被移除。而棧中項的插入(叫作推入)和移除(叫作彈出)，只發生在一個位置——棧的頂部。javascript爲數組專門提供了push()和pop()方法，以便實現相似棧的行爲

　　隊列數據結構的訪問規則是FIFO(First-In-First-Out，先進先出)。隊列在列表的末端添加項，從列表的前端移除項。結合使用shift()和push()方法，能夠像使用隊列同樣使用數組

【push()】

　　push()方法能夠接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。因此，該數組會改變原數組

var a = [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push('a'));//[1,'a'] 2
console.log(a,a.push(true, {}));//[1,'a',true,{}] 4
console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5

　　若是須要合併兩個數組，可使用apply方法

var a = [1, 2, 3];
var b = [4, 5, 6];
console.log(a,Array.prototype.push.apply(a, b));//[1,2,3,4,5,6] 6

　　[注意]若是使用call方法，則會把數組b總體當作一個參數

var a = [1, 2, 3];
var b = [4, 5, 6];
console.log(a,Array.prototype.push.call(a, b));//[1,2,3,[4,5,6]] 4

　　push()方法也能夠向對象中添加元素，添加後的對象變成類數組對象，即新加入元素的鍵對應數組的索引，而且對象有一個length屬性

var obj = {a: 1};
console.log(obj,[].push.call(obj, 2));// {a:1, 0:2, length: 1}
console.log(obj,[].push.call(obj, [3]));// {a:1, 0:2, 1:[3], length: 2}

【pop()】

　　pop()方法從數組末尾移除最後一項，減小數組的length值，而後返回移除的項。因此，該數組會改變原數組

var a = ['a', 'b', 'c'];
console.log(a,a.pop()); // ['a', 'b'] 'c'

　　對空數組使用pop()方法，不會報錯，而是返回undefined

var a = [];
console.log(a,a.pop()); // [] undefined

【shift()】

　　shift()方法移除數組中的第一個項並返回該項，同時數組的長度減1。因此，該數組會改變原數組

var a = ['a', 'b', 'c'];
console.log(a,a.shift());//['b', 'c'] 'a'

　　對空數組使用shift()方法，不會報錯，而是返回undefined

var a = [];
console.log(a,a.shift());// [] undefined

【unshift()】

　　unshift()方法在數組前端添加任意個項並返回新數組長度。因此，該數組會改變原數組

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4

　　當使用多個參數調用unshift()時，參數是一次性插入的而非一次一個地插入。這意味着最終的數組中插入的元素的順序和它們在參數列表中的順序一致

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6

　　[注意]在IE7-瀏覽器中，unshift()方法返回的老是undefined

//標準瀏覽器下，返回[1] 1；而IE7-瀏覽器下，返回[1] undefined
var a = [];
console.log(a,a.unshift(1));

 

數組排序方法

　　數組中存在兩個能夠直接用來重排序的方法: reverse()和sort() 

【reverse()】

　　reverse()方法用於反轉數組的順序，返回通過排序以後的數組；而原數組順序也發生改變

var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

【sort()】

　　默認狀況下，sort()方法按字符串升序排列數組項，sort方法會調用每一個數組項的toString()方法，而後比較獲得的字符串排序，返回通過排序以後的數組，而原數組順序也發生改變

var array = [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
var array = [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]

　　若是數組包含undefined元素，它們會被排到數組的尾部

var array = ['3',3,undefined,2,'2'];
console.log(array,array.sort());//["2", 2, "3", 3, undefined] ["2", 2, "3", 3, undefined]

　　sort()方法能夠接受一個比較函數做爲參數，以便指定哪一個值在哪一個值的前面。比較函數接收兩個參數，若是第一個參數應該位於第二個參數以前則返回一個負數，若是兩個參數相等則返回0，若是第一個參數應該位於第二個參數以後則返回一個正數

function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
}
var array = ['5px',50,1,10];
//當數字與字符串比較大小時，字符串'5px'會被轉換成NaN，這樣結果就是false
console.log(array.sort(compare));//["5px",1, 10, 50]

　　對於數值類型或valueOf()方法會返回數值類型的對象類型，比較函數能夠簡化

function compare(value1,value2){
    return value1 - value2;
}
var array = ['5px',50,1,10];
console.log(array.sort(compare));//["5px",1,10,50]
var array = [5,50,1,10];
console.log(array.sort(compare));//[1,5,10,50]

　　若是對一個字符串數組執行不區分大小寫的字母表排序，比較函數首先將參數轉化爲小寫字符串再開始比較

a = ['ant','Bug','cat','Dog'];
a.sort();//['Bug','Dog','ant','cat'];
a.sort(function(s,t){
    var a = s.toLowerCase();
    var b = t.toLowerCase();
    if(a < b)return -1;
    if(a > b)return 1;
    return 0;
});//['ant','bug','cat','dog']

【tips】使用sort()方法建立一個隨機數組

function compare(){
    return Math.random() - 0.5;
}
var array = [1,2,3,4,5];
console.log(array.sort(compare));//[2,1,5,4,3]

 

數組拼接方法

【concat()】

　　concat()方法基於當前數組中的全部項建立一個新數組，先建立當前數組一個副本，而後將接收到的參數添加到這個副本的末尾，最後返回新構建的數組。因此concat()不影響原數組

　　若是不給concat()方法傳遞參數時，它只是複製當前的數組；若是參數是一個或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中；若是傳遞的值不是數組，這些值就會被簡單地添加到結果數組的末尾

var numbers = [1,2];
console.log(numbers,numbers.concat(3,4));//[1,2] [1,2,3,4]
console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2]
console.log(numbers,numbers.concat(4,[5,[6,7]]));//[1,2] [1,2,4,5,[6,7]]

　　若是不提供參數，concat()方法返回當前數組的一個淺拷貝。所謂「淺拷貝」，指的是若是數組成員包括複合類型的值（好比對象），則新數組拷貝的是該值的引用

//該方法實際只複製了數組的第一維，數組第一維存放的是第二維的引用，而第二維纔是實際存放他們的內容
var numbers = [1,2];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]

var numbers = [[1,2]];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

　　concat()方法也能夠用於將對象合併爲數組，可是必須藉助call()方法

var newArray = Array.prototype.concat.call({ a: 1 }, { b: 2 })
console.log(newArray);// [{ a: 1 }, { b: 2 }]
console.log(newArray[0].a);//1

 

建立子數組方法

 【slice()】

　　slice()方法基於當前數組中的一個或多個項建立一個新數組，接受一個或兩個參數，即要返回項的起始和結束位置，最後返回新數組，因此slice()不影響原數組

　　slice(start,end)方法須要兩個參數start和end，返回這個數組中從start位置到(但不包含)end位置的一個子數組；若是end爲undefined或不存在，則返回從start位置到數組結尾的全部項

　　若是start是負數，則start = max(length + start,0)

　　若是end是負數，則end = max(length + end,0)

　　start和end沒法交換位置

　　若是沒有參數，則返回原數組

var numbers = [1,2,3,4,5];
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,undefined));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(2,1));//[]

console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5]

console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2]
console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]

　　若是不提供參數，slice()方法返回當前數組的一個淺拷貝

//該方法實際只複製了數組的第一維，數組第一維存放的是第二維的引用，而第二維纔是實際存放他們的內容
var numbers = [1,2];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]

var numbers = [[1,2]];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

　　slice()方法涉及到Number()轉型函數的隱式類型轉換，當start被轉換爲NaN時，至關於start = 0；當end被轉換爲NaN時(end爲undefined除外)，則輸出空數組

var numbers = [1,2,3,4,5];
console.log(numbers.slice(NaN));//[1,2,3,4,5]
console.log(numbers.slice(0,NaN));//[]
console.log(numbers.slice(true,[3]));//[2,3]
console.log(numbers.slice(null,undefined));//[1,2,3,4,5]
console.log(numbers.slice({}));//[1,2,3,4,5]
console.log(numbers.slice('2',[5]));//[3,4,5]

　　可使用slice()方法將類數組對象變成真正的數組

var arr = Array.prototype.slice.call(arrayLike);

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

 

數組刪改方法

【splice()】

　　splice()和slice()擁有很是類似的名字，但它們的功能卻有本質的區別。splice()方法用於刪除原數組的一部分紅員，並能夠在被刪除的位置添加入新的數組成員，該方法會改變原數組

　　splice()返回一個由刪除元素組成的數組，或者若是沒有刪除元素就返回一個空數組

　　splice()的第一個參數start指定了插入或刪除的起始位置。若是start是負數，則start = max(length + start,0)；若是start是NaN，則至關於start = 0

　　若是隻提供一個元素，至關於將原數組在指定位置拆分紅兩個數組

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice());// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(4));// [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-4));//-4+8=4; [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-9));//max(-9+8,0)=0 [] [1,2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(NaN));//[] [1,2,3,4,5,6,7,8]

　　第二個參數number指定了應該從數組中刪除的元素的個數。若是省略第二個參數，從起始點開始到數組結尾的全部元素都將被刪除。若是number是負數或NaN或undefined，則number=0，所以不刪除元素

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(0,2));// [3,4,5,6,7,8] [1,2]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(10,2));// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,100));// [1] [2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,-5));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,NaN));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,undefined));//[1,2,3,4,5,6,7,8] []

　　若是後面還有更多的參數，則表示這些就是要被插入數組的新元素

var a = [1,2,3,4,5];
console.log(a,a.splice(2,0,'a','b'));//[1,2,'a','b',3,4,5] []
console.log(a,a.splice(2,2,[1,2],3));//[1,2,[1,2],3,3,4,5] ['a','b']

 

數組位置方法

　　ES5爲數組實例添加了兩個位置方法：indexOf()、lastIndexOf()

【indexOf()】

　　indexOf(search,start)方法接收search和start兩個參數，返回search首次出現的位置，若是沒有找到則返回-1

　　search參數表示要搜索的項；使用嚴格相等運算符（===）進行比較

var arr = [1,2,3,'1','2','3'];
console.log(arr.indexOf('2'));//4
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(0));//-1

　　start參數表示該搜索的開始位置，該方法會隱式調用Number()轉型函數，將start非數字值(undefined除外)轉換爲數字。若忽略該參數或該參數爲undefined或NaN時，start = 0

var arr = ['a','b','c','d','e','a','b'];
console.log(arr.indexOf('a',undefined));//0
console.log(arr.indexOf('a',NaN));//0
console.log(arr.indexOf('a',1));//5
console.log(arr.indexOf('a',true));//5
console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1
console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5
console.log(arr.indexOf('a',-50));//max(0,-50+7)=0; 0

var person = {name: 'Nicholas'};
var people = [{name: 'Nicholas'}];
var morePeople = [person];
alert(people.indexOf(person));//-1,由於person和people[0]雖然值相同，可是是兩個引用
alert(morePeople.indexOf(person));//0，由於person和morepeople[0]是同一個引用
alert(morePeople.indexOf({name: 'Nicholas'}));//-1,由於不是同一個引用

　　indexOf()方法兼容寫法

if (typeof Array.prototype.indexOf != "function") {
  Array.prototype.indexOf = function (searchElement, fromIndex) {
    var index = -1;
    fromIndex = fromIndex * 1 || 0;
    for (var k = 0, length = this.length; k < length; k++) {
      if (k >= fromIndex && this[k] === searchElement) {
          index = k;
          break;
      }
    }
    return index;
  };
}

【lastIndexOf()】

　　與indexOf()不一樣，lastIndexOf()從右向左查找

　　lastIndexOf(search,start)方法接收search和start兩個參數，返回search第一次出現的位置，若是沒有找到則返回-1

　　search參數表示要搜索的項；使用嚴格相等運算符（===）進行比較

var arr = [1,2,3,'1','2','3'];
console.log(arr.lastIndexOf('2'));//4
console.log(arr.lastIndexOf(3));//2
console.log(arr.lastIndexOf(0));//-1

　　start表示該搜索的開始位置，該方法會隱式調用Number()轉型函數，將start非數字值(undefined除外)轉換爲數。若忽略該參數或該參數爲undefined或NaN時，start = 0

　　與字符串的lastIndexOf()方法不一樣，當search方法爲負數時，search = max(0,length+search)

var arr = ['a','b','c','d','e','a','b'];
console.log(arr.lastIndexOf('b'));//6
console.log(arr.lastIndexOf('b',undefined));//-1
console.log(arr.lastIndexOf('a',undefined));//0
console.log(arr.lastIndexOf('b',NaN));//-1
console.log(arr.lastIndexOf('b',1));//1
console.log(arr.lastIndexOf('b',-1));//max(0,-1+7)=6; 6
console.log(arr.lastIndexOf('b',-5));//max(0,-5+7)=2; 1
console.log(arr.lastIndexOf('b',-50));//max(0,-50+7)=0; -1

　　【tips】返回知足條件的項的全部索引值

　　能夠經過循環調用indexOf()或lastIndexOf()來找到全部匹配的項

function allIndexOf(array,value){
    var result = [];
    var pos = array.indexOf(value);
    if(pos === -1){
        return -1;
    }
    while(pos > -1){
        result.push(pos);
        pos = array.indexOf(value,pos+1);
    }
    return result;
}
var array = [1,2,3,3,2,1];
console.log(allIndexOf(array,1));//[0,5]   

　　lastIndexOf()方法兼容寫法 

if (typeof Array.prototype.lastIndexOf != "function") {
  Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
    var index = -1, length = this.length;
    fromIndex = fromIndex * 1 || length - 1;
    for (var k = length - 1; k > -1; k-=1) {
        if (k <= fromIndex && this[k] === searchElement) {
            index = k;
            break;
        }
    }
    return index;
  };
}

 

數組歸併方法

　　數組歸併方法包括reduce()和reduceRight()方法兩種，它們使用指定的函數將數組元素進行組合，生成單個值。這在函數式編程中是常見的操做，也能夠稱爲「注入」和「摺疊」

【reduce()】

　　reduce()方法須要兩個參數。第一個是執行化簡操做的函數。化簡函數的任務就是用某種方法把兩個值組合或化簡爲一個值，並返回化簡後的值

　　化簡函數接受四個參數，分別是：

　　【1】初始變量，默認爲數組的第一個元素值。函數第一次執行後的返回值做爲函數第二次執行的初始變量，依次類推

　　【2】當前變量，若是指定了第二個參數，則該變量爲數組的第一個元素的值，不然，爲第二個元素的值

　　【3】當前變量對應的元素在數組中的索引(從0開始)

　　【4】原數組對象

　　化簡函數的這四個參數之中，只有前兩個是必須的，後兩個則是可選的

values.reduce(function(prev, cur, index, array){
   //todo
});

　　reduce()方法第二個(可選)的參數是一個傳遞給函數的初始值

var a = [1,2,3,4,5];
var sum = a.reduce(function(x,y){return x+y},0);//數組求和
var product = a.reduce(function(x,y){return x*y},1);//數組求積
var max = a.reduce(function(x,y){return (x>y)?x:y;});//求最大值

[1, 2, 3, 4, 5].reduce(function(prev, cur){
    console.log(prev, cur)
    return prev+ cur;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最後結果：15

[1, 2, 3, 4, 5].reduce(function(prev, cur){
    console.log(prev, cur);
    return prev + cur;
},0);
// 0 1
// 1 2
// 3 3
// 6 4
// 10 5
//最後結果：15

　　[注意]reduce()方法的返回結果類型和傳入的初始值相同

[1, 2, 3, 4, 5].reduce(function(prev, cur){
    console.log(prev.sum, cur);
    prev.sum = prev.sum + cur;
    return prev;
},{sum:0});
//0 1
//1 2
//3 3
//6 4
//10 5
//Object {sum: 15}

　　利用reduce()方法，能夠寫一個數組求和的sum方法

Array.prototype.sum = function (){
    return this.reduce(function (prev, cur){
        return prev + cur;
    })
};
[3,4,5,6,10].sum();// 28

　　因爲reduce方法依次處理每一個元素，因此實際上還能夠用它來搜索某個元素。好比，找出長度最長的數組元素

function findLongest(entries) {
  return entries.reduce(function (prev, cur) {
    return cur.length > prev.length ? cur : prev;
  }, '');
}
console.log(findLongest([1,2,3,'ab',4,'bcd',5,6785,4]));//'bcd'

　　能夠利用reduce()方法，實現二維數組的扁平化

var matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];
// 二維數組扁平化
var flatten = matrix.reduce(function (prev, cur) {
  return prev.concat(cur);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]

　　在空數組上，不帶初始值參數調用reduce()將致使類型錯誤異常。若是調用它的時候只有一個值——數組只有一個元素而且沒有指定初始值，或者有一個空數組而且指定一個初始值——reduce()只是簡單地返回那個值而不會調用化簡函數

var arr = [];
arr.reduce(function(){});//Uncaught TypeError: Reduce of empty array with no initial value

var arr = [];
arr.reduce(function(){},1);//1

　　reduce()方法兼容寫法

if (typeof Array.prototype.reduce != "function") {
  Array.prototype.reduce = function (callback, initialValue ) {
     var previous = initialValue, k = 0, length = this.length;
     if (typeof initialValue === "undefined") {
        previous = this[0];
        k = 1;
     }
    if (typeof callback === "function") {
      for (k; k < length; k++) {
         this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
      }
    }
    return previous;
  };
}

【reduceRight()】

　　reduceRight()的工做原理和reduce()同樣，不一樣的是它按照數組索引從高到低（從右到左）處理數組，而不是從低到高

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    console.log(prev,cur);
    return prev + cur;
});
console.log(sum);
//5 4
//9 3
//12 2
//14 1
//15

　　reduceRight()方法兼容寫法

if (typeof Array.prototype.reduceRight != "function") {
  Array.prototype.reduceRight = function (callback, initialValue ) {
    var length = this.length, k = length - 1, previous = initialValue;
    if (typeof initialValue === "undefined") {
        previous = this[length - 1];
        k--;
    }
    if (typeof callback === "function") {
       for (k; k > -1; k-=1) {          
          this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
       }
    }
    return previous;
  };
}

 

數組迭代方法

 　　ECMAScript5爲數組定義了5個迭代方法。每一個方法都接收兩個參數：要在每一項上運行的函數和（可選的）運行該函數的做用域對象——影響this的值。傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置和數組對象自己。根據使用的方法不一樣，這個函數執行後的返回值可能會也可能不會影響訪問的返回值

function(item,index,array){
    //todo
}

【map()】

　　map()方法對數組的每一項運行給定函數，返回每次函數調用的結果組成的數組

//f是array的每個元素調用的函數。它的返回值成爲返回數組的元素；o是f調用時的可選this值
array.map(f,o);

[1,2,3].map(function(item,index,arr){return item*item});//[1,4,9]
[1,2,3].map(function(item,index,arr){return item*index});//[0,2,6]

　　map()方法還能夠接受第二個參數，表示回調函數執行時this所指向的對象

var arr = ['a','b','c'];
[1,2].map(function(item,index,arr){return this[item]},arr);//['b','c']

　　在實際使用的時候，能夠利用map()方法方便地得到對象數組中的特定屬性值

var users = [{name:'t1',email:'t1@qq.com'},{name:'t2',email:'t2@qq.com'},{name:'t3',email:'t3@qq.com'}];
console.log(users.map(function(item,index,arr){return item.email}));//["t1@qq.com", "t2@qq.com", "t3@qq.com"]

　　map()方法還能夠用於類數組對象

Array.prototype.map.call('abc',function(item,index,arr){return item.toUpperCase()});//["A", "B", "C"]

　　對於稀疏數組，map()方法不會在實際上不存在元素的序號上調用函數

var a = [1,,3];
console.log(a.map(function(item,index,arr){return item*2;}));//[2, 2: 6]

　　map()方法兼容寫法

if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };
}

【forEach()】

　　forEach()方法對數組中的每一項運行給定函數，這個方法沒有返回值。本質上與for循環迭代數組同樣。若是須要有返回值，通常使用map方法

[1,2,3,4].forEach(function(item,index,arr){
    console.log(item)
});
//1
//2
//3
//4

　　相似於以下的for循環

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
    console.log(array[k]);
}

　　使用forEach()方法實現簡單的加法

var sum = 0;
[1, 2, 3, 4].forEach(function (item, index, array) {
    sum += item;
});
console.log(sum);//10

　　forEach()方法除了接受一個必須的回調函數參數，第二個參數還能夠接受一個可選的上下文參數(改變回調函數裏面的this指向)

var out = [];
[1, 2, 3].forEach(function(elem){
  this.push(elem * elem);
}, out);
console.log(out);// [1, 4, 9]

　　第二個參數對於多層this很是有用，由於多層this一般指向是不一致的，可使用forEach()方法的第二個參數固定this

var obj = {
  name: '張三',
  times: [1, 2, 3],
  print: function () {
  //該this指向obj
      console.log(this);
    this.times.forEach(function (n) {
    //該this指向window
      console.log(this);
    });
  }
};
obj.print();

var obj = {
  name: '張三',
  times: [1, 2, 3],
  print: function () {
  //該this指向obj
      console.log(this);
    this.times.forEach(function (n) {
    //該this一樣指向obj
      console.log(this);
    },this);
  }
};
obj.print();

　　forEach()循環能夠用於類數組對象

var str = 'abc';
Array.prototype.forEach.call(str, function(item, index, array) {
  console.log( item + ':' + index);
});
//a:0
//b:1
//c:2

　　與for循環不一樣，對於稀疏數組，forEach()方法不會在實際上不存在元素的序號上調用函數

var a = [1,2,3];
delete a[1];
for(var i = 0; i < a.length; i++){
    console.log(a[i]);
}
//1
//undefined
//3

a.forEach(function(item,index,arr){console.log(item)});
//1
//3

　　forEach()方法沒法在全部元素都傳遞給調用的函數以前終止遍歷。也就是說，沒有像for循環中使用的相應的break語句。若是要提早終止，必須把forEach()方法放在一個try塊中，並能拋出一個異常

for(var i = 0; i < 5; i++){
    if(i == 2) break;
}
console.log(i);//2

var a = [1,2,3,4,5];
console.log(a.forEach(function(item,index,arr){
    if(index == 2) break;//Uncaught SyntaxError: Illegal break statement
}));

var a = [1,2,3,4,5];
a.forEach(function(item,index,arr){
    try{
      if(item == 2) throw new Error;    
    }catch(e){
        console.log(item);
    }
});

　　forEach()方法兼容寫法

if(typeof Array.prototype.forEach != 'function'){
    Array.prototype.forEach = function(fn,context){
        for(var k = 0,length = this.length; k < length; k++){
            if(typeof fn === 'function' && Object.prototype.hasOwnProperty.call(this,k)){
                fn.call(context,this[k],k,this);
            }
        }
    }
}

【filter()】

　　filter()方法對數組中的每一項運行給定函數，該函數會返回true的項組成的數組。該方法經常使用於查詢符合條件的全部數組項

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
});// [4, 5]    

[0, 1, 'a', false].filter(Boolean);// [1, "a"]

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});// [1, 3, 5]

　　filter()方法還能夠接受第二個參數，指定測試函數所在的上下文對象(this對象)

var Obj = function () {
  this.MAX = 3;
};
var myFilter = function (item) {
  if (item > this.MAX) {
    return true;
  }
};
var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, new Obj());// [8, 4, 9]

　　filter()會跳過稀疏數組中缺乏的元素，它的返回數組老是稠密的，因此能夠壓縮稀疏數組的空缺

var a = [1,2,,,,3,,,,4];
console.log(a.length);//10
var dense = a.filter(function(){return true;})
console.log(dense,dense.length);//[1,2,3,4] 4

　　若是要壓縮空缺並刪除undefined和null元素，能夠這樣使用filter()方法

var a = [1,2,,undefined,,3,,null,,4];
console.log(a.length);//10
var dense = a.filter(function(item){return item!= undefined;})
console.log(dense,dense.length);//[1,2,3,4] 4

　　filter()方法兼容寫法

if (typeof Array.prototype.filter != "function") {
  Array.prototype.filter = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          fn.call(context, this[k], k, this) && arr.push(this[k]);
       }
    }
    return arr;
  };
}

【some()】

　　some()方法對數組中的每一項運行給定函數，若是該函數對任一項返回true，則返回true。而且當且僅當數值中的全部元素調用斷定函數都返回false，它才返回false

a = [1,2,3,4,5];
a.some(function(elem, index, arr){return elem%2===0;})//true
a.some(isNaN);//false

　　在空數組上調用some()方法會返回false

[].some(function(){});//false

　　some()方法兼容寫法

if (typeof Array.prototype.some != "function") {
  Array.prototype.some = function (fn, context) {
    var passed = false;
    if (typeof fn === "function") {
         for (var k = 0, length = this.length; k < length; k++) {
          if (passed === true) break;
          passed = !!fn.call(context, this[k], k, this);
      }
    }
    return passed;
  };
}

【every()】

　　every()方法對數組中的每一項運行給定函數，若是該函數對每一項都返回true，則返回true；只要有一項返回false，則返回false

a = [1,2,3,4,5];
a.every(function(elem, index, arr){elem < 10;})//true
a.every(function(elem, index, arr){return elem%2 ===0;});//false

　　在空數組上調用every()方法會返回true

[].every(function(){});//true

　　every()方法兼容寫法

if (typeof Array.prototype.every != "function") {
  Array.prototype.every = function (fn, context) {
    var passed = true;
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          if (passed === false) break;
          passed = !!fn.call(context, this[k], k, this);
      }
    }
    return passed;
  };
}

 

總結

　　javascript數組方法特地定義爲通用的，所以它們不只應用在真正的數組並且在類數組對象上都能正確工做。這22種方法中，除了toString()和toLocaleString()之外的全部方法都是通用的

　　能夠改變原數組的方法總共有7種：包括unshift()、shift()、push()、pop()這4種棧和隊列方法，reverse()和sort()這2種數組排列方法，數組刪改方法splice()

 　　除了上面22種方法外，還有一些方法也是經常使用的，可是須要本身封裝

　　數組去重方法封裝

Array.prototype.norepeat = function(){
    var result = [];
    for(var i = 0; i < this.length; i++){
        if(result.indexOf(this[i]) == -1){
            result.push(this[i]);
        }
    }
    return result;
}
var arr = ['a','ab','a'];
console.log(arr.norepeat());//['a','ab']

　　測試數組是否包含特定值的方法封裝

Array.prototype.inArray = function(value){
    for(var i = 0; i < this.length; i++){
        if(this[i] === value){
            return true;
        }
    }
    return false;
}
var arr = ['a','ab','a'];
console.log(arr.inArray('b'));//false
console.log(arr.inArray('a'));//true

 

參考資料

【1】  ES5/array對象 https://www.w3.org/html/ig/zh/wiki/ES5/builtins#Array_.E5.AF.B9.E8.B1.A1
【2】  W3School-Javascript高級教程——Array對象 http://www.w3school.com.cn/jsref/jsref_obj_array.asp
【3】  阮一峯Javascript標準參考教程——Array對象 http://javascript.ruanyifeng.com/stdlib/array.html【4】《javascript權威指南(第6版)》第7章 數組【5】《javascript高級程序設計(第3版)》第5章 引用類型【6】《javascript DOM編程藝術(第2版)》第2章 javascript語法【7】《javascript語句精粹》第6章 數組