javascript中數(shù)組的22種方法
1、對(duì)象繼承方法
數(shù)組是一種特殊的對(duì)象，繼承了對(duì)象Object的toString()、toLocaleString()和valueOf()方法
[1,2,3].toString();//'1,2,3'['a','b','c'].toString();//'a,b,c'[1,[2,'c']].toString();//'1,2,c'
由于alert()要接收字符串參數(shù)，它會(huì)在后臺(tái)調(diào)用toString()方法，會(huì)得到與toString()方法相同的結(jié)果。
alert([1,2,3]);//'1,2,3'【toLocaleString()】
toLocaleString()是toString()方法的本地化版本，經(jīng)常返回與toString()方法相同的值，但也不總?cè)绱恕?/span>
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'
如果數(shù)組中的某一項(xiàng)的值是null或者undefined，則該值在toLocaleString()和toString()方法返回的結(jié)果中以空字符串表示。
var colors = [1,undefined,2,null,3];console.log(colors.toString());//'1,,2,,3'console.log(colors.toLocaleString());//'1,,2,,3'
【valueOf()】
valueOf()方法返回?cái)?shù)組對(duì)象本身
var a = [1, 2, 3];console.log(a.valueOf());// [1, 2, 3]console.log(a.valueOf() instanceof Array);//true
2、數(shù)組轉(zhuǎn)換方法
【join()】
Array.join()方法是String.split()方法的逆向操作，后者是將字符串分割成若干塊來(lái)創(chuàng)建一個(gè)數(shù)組
數(shù)組繼承的toLocaleString()和toString()方法，在默認(rèn)情況下都會(huì)以逗號(hào)分隔的字符形式返回?cái)?shù)組項(xiàng)；而join()方法可以使用不同的分隔符來(lái)構(gòu)建這個(gè)字符串，join()方法只接收一個(gè)參數(shù)，用作分隔符的字符串，然后返回包含所有數(shù)組項(xiàng)的字符串。
如果不給join()方法傳入任何值，則使用逗號(hào)作為分隔符。
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個(gè)連字符組成的字符串
若join()方法的參數(shù)是undefined，標(biāo)準(zhǔn)瀏覽器以逗號(hào)為分隔符返回字符串，而IE7-瀏覽器以'undefined'為分隔符返回字符串。
//標(biāo)準(zhǔn)瀏覽器為'1,2,3';IE7-瀏覽器為'1undefined2undefined3'var a = [1,2,3];console.log(a.join(undefined));
如果數(shù)組中的某一項(xiàng)的值是null或者undefined，則該值在join()方法返回的結(jié)果中以空字符串表示。
var colors = [1,undefined,2,null,3];console.log(colors.join());//'1,,2,,3'
該方法也可以用于類數(shù)組對(duì)象上。
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'
[注意]若對(duì)象沒有l(wèi)ength屬性，就不是類數(shù)組，也就不能調(diào)用數(shù)組的方法。
var obj = { 0: 'a', 1: 'b' };console.log(Array.prototype.join.call(obj, '-'));//''
使用join()方法可以創(chuàng)建重復(fù)某些字符N次的函數(shù)。
function repeatString(str,n){return new Array(n+1).join(str);}console.log(repeatString('a',3));//'aaa'console.log(repeatString('Hi',5));//'HiHiHiHiHi'
3、棧和隊(duì)列方法
var a = [];console.log(a,a.push(1));//[1] 1console.log(a,a.push('a'));//[1,'a'] 2console.log(a,a.push(true, {}));//[1,'a',true,{}] 4console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5
如果需要合并兩個(gè)數(shù)組，可以使用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方法，則會(huì)把數(shù)組b整體看成一個(gè)參數(shù)。
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()方法也可以向?qū)ο笾刑砑釉兀砑雍蟮膶?duì)象變成類數(shù)組對(duì)象，即新加入元素的鍵對(duì)應(yīng)數(shù)組的索引，并且對(duì)象有一個(gè)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}
var a = ['a', 'b', 'c'];console.log(a,a.pop()); // ['a', 'b'] 'c'
對(duì)空數(shù)組使用pop()方法，不會(huì)報(bào)錯(cuò)，而是返回undefined
var a = [];console.log(a,a.pop()); // [] undefined
【shift()】
shift()方法移除數(shù)組中的第一個(gè)項(xiàng)并返回該項(xiàng)，同時(shí)數(shù)組的長(zhǎng)度減1。所以，該數(shù)組會(huì)改變?cè)瓟?shù)組。
var a = ['a', 'b', 'c'];console.log(a,a.shift());//['b', 'c'] 'a'
對(duì)空數(shù)組使用shift()方法，不會(huì)報(bào)錯(cuò)，而是返回undefined。
var a = [];console.log(a,a.shift());// [] undefined
【unshift()】
unshift()方法在數(shù)組前端添加任意個(gè)項(xiàng)并返回新數(shù)組長(zhǎng)度。所以，該數(shù)組會(huì)改變?cè)瓟?shù)組
var a = ['a', 'b', 'c'];console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4
當(dāng)使用多個(gè)參數(shù)調(diào)用unshift()時(shí)，參數(shù)是一次性插入的而非一次一個(gè)地插入。這意味著最終的數(shù)組中插入的元素的順序和它們?cè)趨?shù)列表中的順序一致。
var a = ['a', 'b', 'c'];console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6
[注意]在IE7-瀏覽器中，unshift()方法返回的總是undefined。
//標(biāo)準(zhǔn)瀏覽器下，返回[1] 1；而IE7-瀏覽器下，返回[1] undefinedvar a = [];console.log(a,a.unshift(1));
4、數(shù)組排序方法
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']
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]
如果數(shù)組包含undefined元素，它們會(huì)被排到數(shù)組的尾部。
var array = ['3',3,undefined,2,'2'];console.log(array,array.sort());//["2", 2, "3", 3, undefined] ["2", 2, "3", 3, undefined]
sort()方法可以接受一個(gè)比較函數(shù)作為參數(shù)，以便指定哪個(gè)值在哪個(gè)值的前面。比較函數(shù)接收兩個(gè)參數(shù)，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之前則返回一個(gè)負(fù)數(shù)，如果兩個(gè)參數(shù)相等則返回0，如果第一個(gè)參數(shù)應(yīng)該位于第二個(gè)參數(shù)之后則返回一個(gè)正數(shù)。
function compare(value1,value2){if(value1 < value2){return -1;}else if(value1 > value2){return 1;}else{return 0;}}var array = ['5px',50,1,10];//當(dāng)數(shù)字與字符串比較大小時(shí)，字符串'5px'會(huì)被轉(zhuǎn)換成NaN，這樣結(jié)果就是falseconsole.log(array.sort(compare));//["5px",1, 10, 50]
對(duì)于數(shù)值類型或valueOf()方法會(huì)返回?cái)?shù)值類型的對(duì)象類型，比較函數(shù)可以簡(jiǎn)化。
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()方法創(chuàng)建一個(gè)隨機(jī)數(shù)組。
function compare(){return Math.random() - 0.5;}var array = [1,2,3,4,5];console.log(array.sort(compare));//[2,1,5,4,3]
5、數(shù)組拼接方法
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]]
//該方法實(shí)際只復(fù)制了數(shù)組的第一維，數(shù)組第一維存放的是第二維的引用，而第二維才是實(shí)際存放他們的內(nèi)容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]]
var newArray = Array.prototype.concat.call({ a: 1 }, { b: 2 })console.log(newArray);// [{ a: 1 }, { b: 2 }]console.log(newArray[0].a);//1
6、創(chuàng)建子數(shù)組方法
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]
如果不提供參數(shù)，slice()方法返回當(dāng)前數(shù)組的一個(gè)淺拷貝
//該方法實(shí)際只復(fù)制了數(shù)組的第一維，數(shù)組第一維存放的是第二維的引用，而第二維才是實(shí)際存放他們的內(nèi)容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()轉(zhuǎn)型函數(shù)的隱式類型轉(zhuǎn)換，當(dāng)start被轉(zhuǎn)換為NaN時(shí)，相當(dāng)于start = 0；當(dāng)end被轉(zhuǎn)換為NaN時(shí)(end為undefined除外)，則輸出空數(shù)組。
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()方法將類數(shù)組對(duì)象變成真正的數(shù)組。
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);
7、數(shù)組刪改方法
【splice()】
splice()和slice()擁有非常相似的名字，但它們的功能卻有本質(zhì)的區(qū)別。splice()方法用于刪除原數(shù)組的一部分成員，并可以在被刪除的位置添加入新的數(shù)組成員，該方法會(huì)改變?cè)瓟?shù)組。
splice()返回一個(gè)由刪除元素組成的數(shù)組，或者如果沒有刪除元素就返回一個(gè)空數(shù)組。
splice()的第一個(gè)參數(shù)start指定了插入或刪除的起始位置。如果start是負(fù)數(shù)，則start = max(length + start,0)；如果start是NaN，則相當(dāng)于start = 0
如果只提供一個(gè)元素，相當(dāng)于將原數(shù)組在指定位置拆分成兩個(gè)數(shù)組。
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]
第二個(gè)參數(shù)number指定了應(yīng)該從數(shù)組中刪除的元素的個(gè)數(shù)。如果省略第二個(gè)參數(shù)，從起始點(diǎn)開始到數(shù)組結(jié)尾的所有元素都將被刪除。如果number是負(fù)數(shù)或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] []
如果后面還有更多的參數(shù)，則表示這些就是要被插入數(shù)組的新元素。
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']
8、數(shù)組位置方法
var arr = [1,2,3,'1','2','3'];console.log(arr.indexOf('2'));//4console.log(arr.indexOf(3));//2console.log(arr.indexOf(0));//-1
start參數(shù)表示該搜索的開始位置，該方法會(huì)隱式調(diào)用Number()轉(zhuǎn)型函數(shù)，將start非數(shù)字值(undefined除外)轉(zhuǎn)換為數(shù)字。若忽略該參數(shù)或該參數(shù)為undefined或NaN時(shí)，start = 0。
var arr = ['a','b','c','d','e','a','b'];console.log(arr.indexOf('a',undefined));//0console.log(arr.indexOf('a',NaN));//0console.log(arr.indexOf('a',1));//5console.log(arr.indexOf('a',true));//5console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5console.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,因?yàn)閜erson和people[0]雖然值相同，但是是兩個(gè)引用alert(morePeople.indexOf(person));//0，因?yàn)閜erson和morepeople[0]是同一個(gè)引用alert(morePeople.indexOf({name: 'Nicholas'}));//-1,因?yàn)椴皇峭粋€(gè)引用
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()】
var arr = [1,2,3,'1','2','3'];console.log(arr.lastIndexOf('2'));//4console.log(arr.lastIndexOf(3));//2console.log(arr.lastIndexOf(0));//-1
var arr = ['a','b','c','d','e','a','b'];console.log(arr.lastIndexOf('b'));//6console.log(arr.lastIndexOf('b',undefined));//-1console.log(arr.lastIndexOf('a',undefined));//0console.log(arr.lastIndexOf('b',NaN));//-1console.log(arr.lastIndexOf('b',1));//1console.log(arr.lastIndexOf('b',-1));//max(0,-1+7)=6; 6console.log(arr.lastIndexOf('b',-5));//max(0,-5+7)=2; 1console.log(arr.lastIndexOf('b',-50));//max(0,-50+7)=0; -1
【tips】返回滿足條件的項(xiàng)的所有索引值。
可以通過循環(huán)調(diào)用indexOf()或lastIndexOf()來(lái)找到所有匹配的項(xiàng)。
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;};}?
9、數(shù)組歸并方法
數(shù)組歸并方法包括reduce()和reduceRight()方法兩種，它們使用指定的函數(shù)將數(shù)組元素進(jìn)行組合，生成單個(gè)值。這在函數(shù)式編程中是常見的操作，也可以稱為“注入”和“折疊”。
【reduce()】
reduce()方法需要兩個(gè)參數(shù)。第一個(gè)是執(zhí)行化簡(jiǎn)操作的函數(shù)。化簡(jiǎn)函數(shù)的任務(wù)就是用某種方法把兩個(gè)值組合或化簡(jiǎn)為一個(gè)值，并返回化簡(jiǎn)后的值。
化簡(jiǎn)函數(shù)接受四個(gè)參數(shù)，分別是：
【1】初始變量，默認(rèn)為數(shù)組的第一個(gè)元素值。函數(shù)第一次執(zhí)行后的返回值作為函數(shù)第二次執(zhí)行的初始變量，依次類推。
【2】當(dāng)前變量，如果指定了第二個(gè)參數(shù)，則該變量為數(shù)組的第一個(gè)元素的值，否則，為第二個(gè)元素的值。
【3】當(dāng)前變量對(duì)應(yīng)的元素在數(shù)組中的索引(從0開始)。
【4】原數(shù)組對(duì)象。
化簡(jiǎn)函數(shù)的這四個(gè)參數(shù)之中，只有前兩個(gè)是必須的，后兩個(gè)則是可選的。
values.reduce(function(prev, cur, index, array){//todo});
reduce()方法第二個(gè)(可選)的參數(shù)是一個(gè)傳遞給函數(shù)的初始值。
var a = [1,2,3,4,5];var sum = a.reduce(function(x,y){return x+y},0);//數(shù)組求和var product = a.reduce(function(x,y){return x*y},1);//數(shù)組求積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//最后結(jié)果：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//最后結(jié)果：15
[注意]reduce()方法的返回結(jié)果類型和傳入的初始值相同。
[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}
Array.prototype.sum = function (){return this.reduce(function (prev, cur){return prev + cur;})};[3,4,5,6,10].sum();// 28
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()方法，實(shí)現(xiàn)二維數(shù)組的扁平化。
var matrix = [[1, 2],[3, 4],[5, 6]];// 二維數(shù)組扁平化var flatten = matrix.reduce(function (prev, cur) {return prev.concat(cur);});console.log(flatten); // [1, 2, 3, 4, 5, 6]
var arr = [];arr.reduce(function(){});//Uncaught TypeError: Reduce of empty array with no initial valuevar 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()一樣，不同的是它按照數(shù)組索引從高到低（從右到左）處理數(shù)組，而不是從低到高。
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;};}
10、數(shù)組迭代方法
function(item,index,array){//todo}
【map()】
map()方法對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
//f是array的每一個(gè)元素調(diào)用的函數(shù)。它的返回值成為返回?cái)?shù)組的元素；o是f調(diào)用時(shí)的可選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()方法還可以接受第二個(gè)參數(shù)，表示回調(diào)函數(shù)執(zhí)行時(shí)this所指向的對(duì)象。
var arr = ['a','b','c'];[1,2].map(function(item,index,arr){return this[item]},arr);//['b','c']
在實(shí)際使用的時(shí)候，可以利用map()方法方便地獲得對(duì)象數(shù)組中的特定屬性值。
var users = [{name:'t1',email:'[email protected]'},{name:'t2',email:'[email protected]'},{name:'t3',email:'[email protected]'}];console.log(users.map(function(item,index,arr){return item.email}));//["[email protected]", "[email protected]", "[email protected]"]
map()方法還可以用于類數(shù)組對(duì)象。
Array.prototype.map.call('abc',function(item,index,arr){return item.toUpperCase()});//["A", "B", "C"]對(duì)于稀疏數(shù)組，map()方法不會(huì)在實(shí)際上不存在元素的序號(hào)上調(diào)用函數(shù)。
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()方法對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，這個(gè)方法沒有返回值。本質(zhì)上與for循環(huán)迭代數(shù)組一樣。如果需要有返回值，一般使用map方法。
[1,2,3,4].forEach(function(item,index,arr){console.log(item)});//1//2//3//4
類似于如下的for循環(huán)。
var array = [1, 2, 3, 4];for (var k = 0, length = array.length; k < length; k++) {console.log(array[k]);}
使用forEach()方法實(shí)現(xiàn)簡(jiǎn)單的加法。
var sum = 0;[1, 2, 3, 4].forEach(function (item, index, array) {sum += item;});console.log(sum);//10
forEach()方法除了接受一個(gè)必須的回調(diào)函數(shù)參數(shù)，第二個(gè)參數(shù)還可以接受一個(gè)可選的上下文參數(shù)(改變回調(diào)函數(shù)里面的this指向)。
var out = [];[1, 2, 3].forEach(function(elem){this.push(elem * elem);}, out);console.log(out);// [1, 4, 9]
第二個(gè)參數(shù)對(duì)于多層this非常有用，因?yàn)槎鄬觮his通常指向是不一致的，可以使用forEach()方法的第二個(gè)參數(shù)固定this。
var obj = {name: '張三',times: [1, 2, 3],print: function () {//該this指向objconsole.log(this);this.times.forEach(function (n) {//該this指向windowconsole.log(this);});}};obj.print();
var obj = {name: '張三',times: [1, 2, 3],print: function () {//該this指向objconsole.log(this);this.times.forEach(function (n) {//該this同樣指向objconsole.log(this);},this);}};obj.print();
forEach()循環(huán)可以用于類數(shù)組對(duì)象。
var str = 'abc';Array.prototype.forEach.call(str, function(item, index, array) {console.log( item + ':' + index);});//a:0//b:1//c:2
與for循環(huán)不同，對(duì)于稀疏數(shù)組，forEach()方法不會(huì)在實(shí)際上不存在元素的序號(hào)上調(diào)用函數(shù)。
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()方法無(wú)法在所有元素都傳遞給調(diào)用的函數(shù)之前終止遍歷。也就是說，沒有像for循環(huán)中使用的相應(yīng)的break語(yǔ)句。
如果要提前終止，必須把forEach()方法放在一個(gè)try塊中，并能拋出一個(gè)異常。
for(var i = 0; i < 5; i++){if(i == 2) break;}console.log(i);//2var 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()方法對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組。該方法常用于查詢符合條件的所有數(shù)組項(xiàng)。
[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()方法還可以接受第二個(gè)參數(shù)，指定測(cè)試函數(shù)所在的上下文對(duì)象(this對(duì)象)。
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()會(huì)跳過稀疏數(shù)組中缺少的元素，它的返回?cái)?shù)組總是稠密的，所以可以壓縮稀疏數(shù)組的空缺。
var a = [1,2,,,,3,,,,4];console.log(a.length);//10var 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);//10var 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()方法對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)任一項(xiàng)返回true，則返回true。并且當(dāng)且僅當(dāng)數(shù)值中的所有元素調(diào)用判定函數(shù)都返回false，它才返回false。
a = [1,2,3,4,5];a.some(function(elem, index, arr){return elem%2===0;})//truea.some(isNaN);//false
在空數(shù)組上調(diào)用some()方法會(huì)返回false。
[].some(function(){});//falsesome()方法兼容寫法。
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()方法對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true；只要有一項(xiàng)返回false，則返回false。
a = [1,2,3,4,5];a.every(function(elem, index, arr){elem < 10;})//truea.every(function(elem, index, arr){return elem%2 ===0;});//false
在空數(shù)組上調(diào)用every()方法會(huì)返回true。
[].every(function(){});//trueevery()方法兼容寫法。
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;};}
總結(jié)
javascript數(shù)組方法特意定義為通用的，因此它們不僅應(yīng)用在真正的數(shù)組而且在類數(shù)組對(duì)象上都能正確工作。這22種方法中，除了toString()和toLocaleString()以外的所有方法都是通用的。
可以改變?cè)瓟?shù)組的方法總共有7種：包括unshift()、shift()、push()、pop()這4種棧和隊(duì)列方法，reverse()和sort()這2種數(shù)組排列方法，數(shù)組刪改方法splice()
除了上面22種方法外，還有一些方法也是常用的，但是需要自己封裝。
數(shù)組去重方法封裝
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'));//falseconsole.log(arr.inArray('a'));//true
