1. 程式人生 > >JavaScript中Array型別中的一些常用方法

JavaScript中Array型別中的一些常用方法

與其他語言中的陣列有著極大的區別,JavaScript中的陣列,每一項都可以儲存任何型別的資料,且陣列的大小可以動態的調整,即可以隨著資料的新增自動增長以容納新增的資料。

1.陣列的建立方式

建立陣列的基本方式有兩種

(1)使用Array建構函式

var colors  = new Array();
var colors = new Array(20);  //預先知道陣列要儲存的專案數量

(2)使用陣列字面量表示法

陣列字面量由一對包含陣列項的方括號表示,多個數組項之間以逗號隔開

var colors = ["red","blue","green"]; //建立一個包含3個字串的陣列
var values = [1,2,];  //不要這樣!這樣會建立一個包含2或3項的陣列
var options = [, , , , , ]; //不要這樣!這樣會建立一個包含5或6項的陣列

注意:陣列的length屬性很有特點------它不是隻讀的

var colors = ["red", "blue" , "green"];
colors.length = 2; 
alert(colors[2]);   //ubdefined

好處:利用length這個屬性可以方便地在陣列末尾新增新項。

2. 檢測陣列

Array.isArray()方法,目的是最終確定某個值到底是不是陣列,而不管它是在哪個全域性執行環境中建立的。

if(Array.isArray(value)){
   //對陣列執行某些操作
}
3. 轉換方法

陣列整合的toLocalString()、toString()和valueOf()方法,在預設情況下都會以逗號分隔的字串的形式返回陣列項。而如果使用join()方法,則可以使用不同的分隔符來構建這個字串

var colors = ["red","green","blue"];
alert(colors.join(","));  //red,green,blue
alert(colors.join("||")); ''red||green||blue

注意:如果陣列中的某一項的值是null或者undefined,那麼該值在join、toLocalString()、toString()和valueOf()方法返回的結果中以空字串表示。

4.棧方法和佇列方法

push()方法:可以接手任意數量的引數,並逐個新增到陣列末尾,並返回修改後陣列的長度;

pop()方法:從陣列末尾移除最後一個像,減少length值,並返回移除的項。

shift()方法:移除陣列中的第一項並返回該項,同時length減1.

unshift()方法:能在陣列前端新增任意個項並返回新陣列的長度

在JavaScript中,push()和pop()方法,用來實現類似棧的方法。(先進後出)

shift()和push()方法,用來實現佇列的方法。(先進先出)

unshift()和pop()從相反方向來模擬佇列。

var colors = new Array();
var count = colors.unshift("red","green"); //推入兩項
alert(count);  //2
5.重排序方法

陣列中可以直接用來重排序的方法:reverse()和sort()。

reverse():反轉陣列項的順序。

sort():預設情況下,按升序排列陣列項。該方法會呼叫每個陣列項的toString()轉型方法,然後比較得到的字串。

var values = [0,1,5,10,15];
values.sort();
alert(values);  //0,1,10,15,5

即使例子中值得順序沒有問題,但sort()方法也會根據測試字串的結果改變原來的順序。因為數值5雖然小於10,但在進行字串比較時,"10"則位於"5"前面,於是陣列的順序就被修改了。

解決方法:比較函式,該函式接手兩個引數,如果第一個引數應該位於第二個之前則返回一個負數,如果兩個引數相等,則返回0,如果第一個引數應該位於第二個之後則返回一個整數。一個簡單比較函式的例子:

function compare(value1,value2){
  if(value1 < value2){
      return -1;
  }else if(value1 > value2){
      return 1;
  }else{
      return 0;
  }
}

這個比較函式可以適用於大多數資料型別,只要將其作為引數傳遞給sort()方法即可。示例如下:

var value = [0,1,5,10,15];
values.sort(compare);
alert(values);  //0,1,5,10,15
6. 操作方法

concat():可以基於當前陣列中的所有項建立一個新陣列。在沒有給concat()方法傳遞引數的情況下,它只是複製當前陣列並返回副本。如果傳遞給concat()方法的是一或多個數組,則該方法會將這些陣列中的每一項都新增到結果陣列中。如果傳遞的值不是陣列,這些值就會被簡單地新增到結果陣列的末尾。示例如下:

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);
alert(colors);  //red,green,blue
alert(colors2);  //red,green,blue,yellow,black,brown

slice():能夠基於當前陣列中的一或多個項建立一個新陣列。可以接受一或兩個引數,即要返回項的起始和結束位置。

slice(a,b):擷取陣列的下標範圍為:[a,b)。

slice(a):擷取陣列的下標範圍為:[a,Array.length)。

示例如下:

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

注意:如果slice()方法的引數中有一個負數,則用陣列長度加上該數來確定相應的位置。例如。在一個包含5項的陣列上呼叫slice(-2,-1)與呼叫slice(3,4)得到的結果相同。如果結束位置小於起始位置,則返回空陣列。

splice():主要用途是向陣列的中部插入項,但使用這種方法的方式則有如下3種。

(1)刪除:可以刪除任意數量的項,只需要指定2個引數:要刪除的第一項的位置和要刪除的項數。如splice(0,2)會刪除陣列中的前兩項。

(2)插入:可以向指定位置插入任意數量的項,只需要提供3個引數:起始位置、0(要刪除的項數)和要插入的項。如果要插入多個項,可以再傳入第四、第五,以至任意多個項。如splice(2,0,"red","green"),會從當前陣列的位置2開始插入字串“red”和“green”。

(3)替換:可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個引數:起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。如splice(2,1,"red","green"),會刪除當前陣列位置2的項,然後再從位置2開始插入字串“red”和“green”。

示例如下:

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 刪除第一項
alert(colors); // green,blue
alert(removed); // red,返回的陣列中只包含一項
removed = colors.splice(1, 0, "yellow", "orange"); // 從位置 1 開始插入兩項
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,返回的陣列中只包含一項
7. 位置方法

indexOf() 從陣列的開頭(位置0)開始向後查詢。接收兩個引數,要查詢的項和(可選的)表示查詢起點位置的索引。

lastIndexOf():從陣列末尾開始向前查詢。接收兩個引數,要查詢的項和(可選的)表示查詢起點位置的索引。

示例如下:

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
var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0
8. 迭代方法

JavaScript為陣列定義了 5 個迭代方法。每個方法都接收兩個引數:要在每一項上執行的函式和(可選的)執行該函式的作用域物件——影響 this 的值。傳入這些方法中的函式會接收三個引數:陣列項的值、該項在陣列中的位置和陣列物件本身。根據使用的方法不同,這個函式執行後的返回值可能會也可能不會影響方法的返回值。以下是這 5 個迭代方法的作用。
every()對陣列中的每一項執行給定函式,如果該函式對每一項都返回 true,則返回 true
filter()對陣列中的每一項執行給定函式,返回該函式會返回 true 的項組成的陣列。
forEach()對陣列中的每一項執行給定函式。這個方法沒有返回值。
map()對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列。
some()對陣列中的每一項執行給定函式,如果該函式對任一項返回 true,則返回 true

以上方法都不會修改陣列中的包含的值

every()和some()的示例:

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true

filter()的示例:

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

map()也返回一個數組,而這個陣列的每一項都是在原始陣列中的對應項上執行傳入函式的結果。

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]
forEach() ,它只是對陣列中的每一項執行傳入的函式。這個方法沒有返回值,本質上與使用 for 迴圈迭代陣列一樣
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
//執行某些操作
});
9. 歸併方法

reduce()reduceRight()。這兩個方法都會迭代陣列的所有項,然後構建一個最終返回的值。其中, reduce()方法從陣列的第一項開始,逐個遍歷到最後。而 reduceRight()則從陣列的最後一項開始,向前遍歷到第一項 。

這兩個方法都接收兩個引數:一個在每一項上呼叫的函式和(可選的)作為歸併基礎的初始值。傳reduce()reduceRight()的函式接收 4 個引數:前一個值、當前值、項的索引和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上,因此第一個引數是陣列的第一項,第二個引數就是陣列的第二項。

reduce()的示例:

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

第一次執行回撥函式, prev 1cur 2。第二次, prev 31 2 的結果), cur 3(陣列的第三項)。這個過程會持續到把陣列中的每一項都訪問一遍,最後返回結果 。

reduceRight()的示例:

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