DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Javascript中數組方法匯總
Javascript中數組方法匯總
編輯:JavaScript綜合知識     

 Array.prototype中定義了很多操作數組的方法,下面介紹ECMAScript3中的一些方法

1.Array.join()方法

該方法將數組中的元素都轉化為字符串並按照指定符號連接到一起,返回最後生成的字符串,可以包含一個參數,為連接數組元素的符號,默認為逗號。

? 1 2 3 4 5 6 7 8 var ay = [1,2,3]; ay.join(); // =>"1,2,3" ay.join("+"); // => "1+2+3" ay.join(" "); // =>"1 2 3" ay.join(""); // =>"123"   var by = new Array(10) //新建一個長度為10的空數組 by.join("-"); //=> "---------" 連接10個空元素

2.Array.reverse()方法

該方法將數組中的元素顛倒順序,返回逆序的數組,該方法會改變當前數組,不會創建新數組。

 

代碼如下:
var a = [1,2,3];
a.reverse().join(); //=>"3,2,1" ,此時a=[3,2,1]

 

3.Array.sort()方法

該方法將數組中的元素排序並返回排序後的數組。當sort()方法不帶參數時,數組按照字母表順序排序,如果數組包含undefined元素,會排到數組尾部。

 

代碼如下:
var as = ["banana","cherry","apple"];
as.sort();
as.join("+ "); //=>"apple+ banana+ cherry"

 

我們也可以給sort()方法傳入一個比較函數作為參數,讓數組以指定的比較函數進行排序。比較函數返回值小於0,則第一個參數在前,相反返回值大於0,則第二個參數在前,兩個參數值相等,則返回0

代碼如下:
var sy = [1111,222,4,33];
sy.sort(); //=>"1111,222,33,4"
sy.sort(function(a,b){
return a-b;
}); //=> "4,33,222,1111"


注:這裡使用匿名函數最合適,因為只調用一次,無需指定函數名稱

 

4.Array.concat()方法

該方法創建並返回一個新數組,連接原數組元素和方法中每個元素,組成一個新數組。該方法不會遞歸調用方法中的參數。

 

代碼如下:
var a = [1,2,3];
a.concat(4,5); //=>"1,2,3,4,5"
a.concat([4,5]); //=>"1,2,3,4,5"
a.concat([4,5],[6,7]); //=>"1,2,3,4,5,6,7"
a.concat(4,[5,[6,7]]); //=>"1,2,3,4,5,[6,7]"

 

5.Array.slice()方法

該方法返回指定數組的一個片段或子數組,該方法可以有兩個參數,分別制定片段的開始和結束位置,返回的數組包含第一個參數指定的元素和所有到但不包含第二個參數指定的位置的數組元素。如果只有一個參數,則包含從指定開始位置到數組末尾,參數可以為負值,表示相對於數組中最後一個元素的位置。該方法不會修改被調用的數組。

 

代碼如下:
var d =[1,2,3,4,5];
d.slice(1,2); //=>"2"
d.slice(1,-1); //=>"2,3,4"
d.slice(3); //=>"4,5"
d.slice(-3,-1); //=>"3,4"

 

6.Array.splice()方法

該方法是在數組中插入或刪除元素的通用方法,該方法會修改原始數組。該方法可以包含多個參數,第一個參數指定要在數組中插入或刪除的起始位置,第二個參數制定了刪除元素的個數,若不指定則將起始位置以及後面元素全部刪除,兩個參數之後的參數指定了插入數組的元素,該方法返回由刪除元素組成的數組。

  1 2 3 4 5 6 7 var e = [1,2,3,4,5,6]; e.splice(4); //=> 返回[5,6] ; e是[1,2,3,4] e.splice(1,2); //=> 返回[2,3] ; e是[1,4]   var f = [1,2,3,4,5]; f.splice(2,0,"a","b"); //=>返回[]; f是[1,2,a,b,3,4,5] f.splice(2,2,[6,7],3); //=>返回[a,b]; f是[1,2,[6,7],3,4,5]

7.push()和pop()方法

這兩個方法將數組當做棧使用,push()方法是在數組尾部添加一個或多個元素,並返回數組的長度。pop()方法是刪除數組的最後一個元素,減少數組長度並返回刪除的值。

8.unshift()方法和shift()方法

這兩個方法是在數組頭部進行添加刪除操作,unshift()方法是在數組頭部添加一個或多個元素,返回數組長度。shift()方法是刪除數組第一個元素並返回。

  1 2 3 4 5 6 var a=[]; //[] a.push(1,2); //[1,2] a.pop(); //[1]   a.unshift(2,3); //[2,3,1] a.shift(); //[3,1]

9.toString()和toLocaleString()方法

這兩個方法是將數組每個元素轉化為字符串,toString()是將每個元素轉化為字符串並且輸出用逗號隔開。toLocaleString()方法是數組每個元素調用toLocaleString()轉化為字符串,並使用本地化分隔符連接。

下面在介紹幾個ECMAScript5中特有的數組方法,在介紹方法之前首先做一個大致了解。大多數方法的第一個參數接受一個函數,並且對數組每個元素調用一次這個函數,如果說稀疏數組,不存在的元素不調用函數。大多數情況下,調用的函數使用三個參數:數組元素,元素的索引以及數組本身。

1.forEach()方法

該方法從頭到尾遍歷數組,數組每個元素都調用指定的函數。該方法在遍歷完所有數組元素之前不會終止。若想提前終止,必須將forEach()放到try塊中,並可以拋出異常。

  1 2 3 4 5 6 7 8 9 var data=[1,2,3,4,5] var sum = 0; data.forEach(function(value){ //=>value為數組元素 sum+=value; }) //=>15   data.forEach(function(value,i,a){ //=>三個參數分別指代數組元素,元素索引和數組 a[i] = v+1; }) //=>data=[2,3,4,5,6]

2.map()方法

該方法將數組的每個元素傳遞給指定的函數,並返回一個新數組,該數組包含了數組元素調用函數對應的返回值。如果是稀疏數組,返回的新數組也是同樣結構的系數數組。

  1 2 3 4 var a=[1,2,3]; var b=a.map(function(v){ return v*v; }) //=> b=[1,4,9]

3.filter()方法--類似於條件篩選

該方法返回的是原始數組的一個子集,傳遞的函數用來做邏輯判定,返回true或false,如果返回的值為true或可以轉化為true,則當前數組元素就是子集的成員,添加到返回的數組中。該方法會跳過稀疏數組的空元素。

  1 2 3 4 5 6 7 var a=[5,4,3,2,1] var smalla=a.filter(function(v){ return v<3; }) //=>返回[2,1] var everya=a.filter(function(v,i){ //=>i表示元素索引 return i%2==0; }) //=>返回[5,3,1]


4.every()和some()方法

這兩個方法是對數組進行邏輯判定,對數組每個元素運用指定函數進行判定返回true或false。
every()方法是當且僅當數組中所有元素調用判定函數都返回true,才返回true,否則返回false。
some()方法是當數組中至少有一個元素調用判定函數返回true,就返回true,否則返回false。

這兩個方法都是一旦確認返回值後就不在遍歷數組元素了。

5.reduce()和reduceRight()方法

這兩個方法使用指定的函數將數組元素進行組合,生成單個值。
reduce()需要兩個參數,第一個是執行化簡組合的操作函數,第二個是組合的初始值。和前面幾個方法不同的是,常見的三個參數(數組元素、元素索引和數組本身)會作為操作函數的2~4個參數傳遞給函數,第一個參數是到目前為止進行計算組合的結果。
如果是針對空數組,並不指定初始值時調用reduce()方法會導致類型錯誤異常。
reduceRight()方法和reduce()方法的工作原理相同,不同的是其按數組索引從高到低進行處理(即從右到左進行合並處理)

6.indexOf()和lastIndexOf()方法

這兩個方法都是用於在整個數組中搜索具體給定的值,並返回第一個匹配元素的索引值,若沒有則返回-1.indexOf()方法是從頭到尾進行搜索,而lastIndexOf()是從尾到頭進行搜索。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved