天天看點

JS 數組方法——every/some/filter/map/reduce

一.棧方法

棧是一種後進先出的資料結構,也就是最新添加的項最早被移除。而棧中項的插入(入棧)和移除(出棧),隻發生在一個位置——棧的頂部。

1.push()

push()方法可以接收任意數量的參數,把它們逐個添加到數組末尾。

該方法: 改變原數組

傳回值:修改後數組的長度。

var arr = [];
arr.push("red", "blue");
console.log(arr);  //["red", "blue"];
var count = arr.push('blank');  //添加後,傳回數組長度
console.log(count);	 //3
           
2.pop()

pop()方法則從數組末尾移除最後一項,同時将數組長度減 1。

該方法: 改變原數組

傳回值:移除的項。

var arr = ["red", "blue", "green"];
arr.pop();
console.log(arr);  //["red", "blue"];
var count = arr.pop();  //删除後,傳回被删除的元素
console.log(count);	 //blue
           

二.隊列方法

隊列資料結構的通路規則是先進先出。隊列在清單的末端添加項,從清單的前端移除項。由于 push()是向數組末端添加項的方法,是以要模拟隊列隻需一個從數組前端取得項的方法。

1.shift()

shift()方法能夠移除數組中的第一個項,同時将數組長度減 1。

該方法: 改變原數組

傳回值:移除的項。

var arr = ["red", "blue", "green"];
arr.shift();
console.log(arr);  //["blue", "green"];
var count = arr.shift();  //删除後,傳回被删除的元素
console.log(count);	 //blue
           
2.unshift()

unshift方法能在數組前端添加任意個項。

該方法: 改變原數組

傳回值:修改後數組的長度。

var arr = [];
arr.unshift("red", "blue");
console.log(arr);  //["red", "blue"];
var count = arr.unshift('blank');  //添加後,傳回數組長度
console.log(count);	 //3
           

三.排序方法

數組中已經存在兩個可以直接用來重排序的方法:reverse()和 sort()。

1.reverse()

reverse()方法會反轉數組項的順序。

該方法: 改變原數組

傳回值:無

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

sort()方法在預設情況下,按升序排列數組項——即最小的值位于最前面,最大的值排在最後面。(ASCII碼比較)

該方法: 改變原數組

傳回值:無

var arr= [0, 1, 5, 10, 15]; 
arr.sort(); 
console.log(arr);  //[0, 1, 10, 15, 5]
           

可以看到,例子中值的順序按照ASCII碼進行排序的,而我們想要的是正常排序。是以 sort()方法可以接收一個比較函數作為參數,以便我們指定哪個值位于哪個值的前面。

var arr= [0, 1, 5, 10, 15]; 
arr.sort(function(a,b){
/*		if(a>b){
			return 1;
		}else if(a<b){
			return -1;
		}
		return 0;	*/
		//簡便方法
		return a-b;
	});	
console.log(arr);  //[0, 1, 5, 10, 15]
           

此方法實作了從小到大的排序,如果想得到從大到小的順序,隻需把函數中-1和1互換即可。

四.操作方法

ECMAScript 為操作已經包含在數組中的項提供了很多方法。

1.concat()

concat()方法可以基于目前數組中的所有項建立一個新數組,即合并數組。

該方法: 不改變原數組

傳回:重組後的新數組

在沒有給 concat()方法傳遞參數的情況下,它隻是複制目前數組并傳回副本。可以用來複制數組。

var arr = ["red", "blue", "green"];
var arr1 = arr.concat();
console.log(arr1);  //["red", "blue", "green"]
           

如果傳遞給 concat()方法的是一或多個數組,則該方法會将這些數組中的每一項都添加到結果數組中。如果傳遞的值不是數組,這些值就會被簡單地添加到結果數組的末尾。

var arr = ["red", "blue", "green"];
var arr1 = ['Jack'];
var arr0 = arr.concat(arr1,'20',['新元素']);
console.log(arr0);  //["red", "blue", "green", "Jack", "20", "新元素", ['新元素2']]
           
2.slice()

slice()方法能夠截取目前數組中的一個或多個項。

該方法 :不改變原數組

傳回:截取後的新數組

slice()方法可以接受一個或兩個參數。arr[start,end),前閉後開

一個參數 ——即從索引start開始截取到目前數組末尾

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

兩個參數 ——即從索引start開始截取到索引end(不包含end)

var arr= [1, 2, 3, 4, 5]; 
var arr0 = arr.slice(1,3);
console.log(arr0);  //[2, 3]
var arr1 = arr.slice(1,-1);  //-1即倒數第一個元素
console.log(arr1);  //[2, 3, 4]
           
3.splice()

splice()方法,這個方法恐怕要算是最強大的數組方法了,splice()的主要用途是向數組的中部插入項。

該方法: 改變原數組

傳回:一個新數組,從原始數組中删除的項(如果沒有删除任何項,則傳回一個空數組)。

删除:可以删除任意數量的項,隻需指定 2 個參數:要删除的第一項的位置和要删除的項數。

var arr = ["red", "blue", "green"];
arr.splice(1,1);  //從索引1開始删1個元素
console.log(arr);  //["red", "green"]
           

插入:可以向指定位置插入任意數量的項,隻需提供 3 個參數:起始位置、0(要删除的項數)和要插入的項。如果要插入多個項,可以再傳入第四、第五,以至任意多個項。

var arr = ["red", "blue", "green"];
arr.splice(1,0,'blank');  //從索引1開始插入1個元素
console.log(arr);  //["red", "blank", "blue", "green"]
           

替換:可以向指定位置插入任意數量的項,且同時删除任意數量的項,隻需指定 3 個參數:起始位置、要删除的項數和要插入的任意數量的項。插入的項數不必與删除的項數相等。

var arr = ["red", "blue", "green"];
arr.splice(1,1,'blank','orange');  //從索引1開始删除1個元素,并在此處插入2個元素
console.log(arr);  //["red", "blank", "orange", "green"]
           
4.join()

splice()方法,可以将數組分割為字元串

五.位置方法

ECMAScript 5 為數組執行個體添加了兩個位置方法:indexOf()和 lastIndexOf()。這兩個方法都接收兩個參數:要查找的項和(可選的)查找起點位置的索引。

傳回值:要查找的項在數組中的位置,或者在沒找到的情況下傳回-1。傳回最近的一個位置

注意:在比較第一個參數與數組中的每一項時,會使用全等操作符;也就是說,要求查找的項必須嚴格相等。

1.indexOf()

數組檢索——indexOf()方法從數組的開頭(位置 0)開始向後查找。

var arr= [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(4));  //3
console.log(arr.indexOf(4,4));  //5 從索引4開始向後查找元素4
           
2.lastIndexOf()

數組檢索——lastIndexOf()方法則從數組的末尾開始向前查找。

六.疊代方法

1.every()

數組判斷——判斷數組中是否全部滿足規則,有則傳回 true。

var arr=[2,42,99,34,2];
var re2 = arr.every(function(item,index,arr){
		return item>22;
	})
	console.log(re2);  //false
           
2.some():

數組判斷——判斷數組中是否有滿足規則的(有一個即可),有則傳回 true。

var arr=[2,42,99,34,2];
var re2 = arr.some(function(item,index,arr){
		return item>22;
	})
	console.log(re2);  //true
           
3.filter()

數組過濾——對查詢符合某些條件的所有數組項非常有用。

該方法: 不改變原數組

傳回:該函數會傳回 true 的項組成的數組。

var arr= [1,2,3,4,5,4,3,2,1]; 
var arr0= arr.filter(function(item, index, array){ 
	return arr.indexOf(item) === index;  //判斷每個元素的位置是否全等他的索引,傳回滿足的數組元素,即數組去重
}); 
console.log(arr0); //[1,2,3,4,5]
           
4.map()

數組映射——建立包含的項與另一個數組一一對應的數組。

該方法: 不改變原數組

傳回:每次函數調用的結果組成的數組。

var arr= [1,2,3,4,5,4,3,2,1]; 
var arr0= arr.map(function(item, index, array){ 
	return item * 2;  //給數組中的每一項乘以 2,然後傳回這些乘積組成的數組 
}); 
console.log(arr0); //[2,4,6,8,10,8,6,4,2]
           
5.reduce()

數組中兩兩元素之間進行相加/比較等操作後得到唯一一個結果。

該方法: 不改變原數組

var arr = [1,2,3];
var sum = arr.reduce(function(x,y){
	return x+y;  //數組中兩兩相加,第二個參數可選(如有參數,則用參數依次和數組元素相加)
},0);  
console.log(sum);  //6
console.log(arr);  //[1,2,3]

var arr = [3,9,6];
var max = arr.reduce(function(x,y){
	return x>y?x:y;  //數組中兩兩比較,選出最大的數依次往後比較
},0);  
console.log(max);  //9
console.log(arr);  //[3,9,6]
           

forEach():對數組周遊。這個方法沒有傳回值。

以上方法都不會修改數組中的包含的值

繼續閱讀