1. 程式人生 > >JavaScript 陣列常用方法

JavaScript 陣列常用方法

有一天被問到了一個題,感覺很有意思,如下:

	new Array(6)
	new Array(6, 6)
//上訴兩行程式碼,分別建立了什麼?
  1. 檢測陣列
	var arr = [];
	
	arr instanceof Array
	Array.isArray(arr)
  1. 轉換方法
  • toString() 返回以逗號分隔的陣列中的值組成的字串
  • valueOf() 返回陣列物件的原始值
  • join(‘a’) 返回一個將陣列以 a 這個分隔符連線起來的字串
 	ar colors = ["red", "blue",
"green"]; alert(colors.toString());// red,blue,green alert(colors.valueOf());// red,blue,green alert(colors);// 由於 alert 要接收字串,所以會先呼叫toString() alert(colors.join("||")); //red||green||blue
  1. 棧方法(後進先出)
  • push() 接收任意數量的引數,新增到陣列末尾,返回陣列長度
  • pop() 從陣列末尾移除最後一項,返回被刪除的項
	var colors = new
Array(); var count = colors.push("red", "green"); alert(count); //2 var item = colors.pop(); alert(item); //"black"
  1. 佇列方法(先進先出)
  • shift() 從陣列前端移除一項,返回被移除的項
  • unshift() 從陣列前端新增任意個項,返回陣列長度
	var colors = new Array();
	var count = colors.unshift("red", "green");
	alert(count); //2
	var
item = colors.shift(); alert(item); //"red"
  1. 排序方法
  • reverse() 反轉陣列順序
  • sort() 預設情況下按字元編碼排序,也可傳入一個比較函式
	var values = [0, 1, 5, 10, 15]; 
	values.reverse();
	alert(values);	//0,1,5,10,15

	values.sort();
    alert(values);  //0,1,10,15,5

	arr.sort(function(a, b){
		return a - b;//a-b從小到大;b-a從大到小
	});//0,1,5,10,15
  1. 操作方法
  • concat() 連線多個數組或字串,並返回一個新陣列
  • slice(a, b) 從陣列 [a, b) 擷取並返回一個新陣列;如果不寫 b,就擷取所有。
  • splice(start, num, item…) 始終都會返回一個新陣列
    start : 起始位置,要刪除的第一項
    num :要刪除的數量
    item :要插入的項,可以插入任意個
	var colors = ["red", "green", "blue"];
	
    var colors2 = colors.concat("yellow", ["black", "brown"]);
    alert(colors2);    //red,green,blue,yellow,black,brown

	var colors2 = colors.slice(1);
	var colors3 = colors.slice(1,4);
	alert(colors2);   //green,blue,yellow,purple
	alert(colors3);   //green,blue,yellow

	var removed = colors.splice(0,1); 
	alert(colors); // green,blue 
	alert(removed); // red,返回的陣列中只包含一項
	removed = colors.splice(1, 0, "yellow", "orange"); 				
	alert(colors); // green,yellow,orange,blue 
	alert(removed); // 返回的是一個空陣列
	removed = colors.splice(1, 1, "red", "purple"); 
	alert(colors); // green,red,purple,orange,blue 	
	alert(removed); // yellow,返回的陣列中只包含一項
  1. 位置方法
  • indexOf(item, index) 從陣列開頭向後查詢
  • lastIndexOf(item, index) 從陣列末尾向前查詢
    兩個方法都返回要查詢的項在陣列中的位置。
    item:要查詢的項。index:(可選)起點位置的索引
	var numbers = [1,2,3,4,5,4,3,2,1];
    alert(numbers.indexOf(4));        //3
    alert(numbers.lastIndexOf(4)); //5
	alert(numbers.indexOf(4, 4));     //5
	alert(numbers.lastIndexOf(4, 4)); //3
  1. 迭代方法
    ECMAScript 5 為陣列定義了 5 個迭代方法。每個方法都接收兩個引數:要在每一項上執行的函式和 (可選的)執行該函式的作用域物件——影響 this 的值。傳入這些方法中的函式會接收三個引數:陣列項的值(必寫)、(可選)該項在陣列中的位置。
  • every():對陣列中的每一項執行給定函式,如果該函式對每一項都返回 true,則返回 true。
  • some():對陣列中的每一項執行給定函式,如果該函式對任一項返回 true,則返回 true。
  • filter():對陣列中的每一項執行給定函式,返回該函式會返回 true 的項組成的陣列。
  • forEach():對陣列中的每一項執行給定函式。這個方法沒有返回值。
  • map():對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列。
	var numbers = [1,2,3,4,5,4,3,2,1];
	
	var everyResult = numbers.every(function(item, index){
	         return (item > 2);
	});
	alert(everyResult); //false
	
	var someResult = numbers.some(function(item, index){
	         return (item > 2);
	});
	alert(someResult); //true

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

	var mapResult = numbers.map(function(item, index){
        return item * 2;
    });
    alert(mapResult);  //[2,4,6,8,10,8,6,4,2]

	numbers.forEach(function(item, index){
		//執行某些操作
	});
  1. 歸併方法
  • reduce(func, num) 從陣列開頭遍歷
  • reduceRight(func, num)。從陣列最後一項向前遍歷

func : 在每一項上呼叫的函式
num : (可選的)作為歸併基礎的初始值。

func 接收 4 個引數:前一個值(必須)、當前值(必須)、(可選)項的索引和陣列物件。
這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上,因此第 一個引數是陣列的第一項,第二個引數就是陣列的第二項。

	var values = [1,2,3,4,5];
	var sum = values.reduce(function(prev, cur){
	    return prev + cur;
	});
	alert(sum); //15