本篇內(nèi)容主要講解“javascript數(shù)組常用方法有什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“javascript數(shù)組常用方法有什么”吧!
盤龍網(wǎng)站制作公司哪家好,找成都創(chuàng)新互聯(lián)!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項目制作,到程序開發(fā),運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗,來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。
常用方法:1、push();2、unshift();3、pop();4、shift();5、splic();6、slice();7、sort();8、concat();9、reverse();10、join();11、forEach()等。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
javascript數(shù)組的常用方法
數(shù)組提供了一些常用方法,可實現(xiàn)數(shù)組元素的添加、刪除、替換以及排序等功能。
1) push(元素1,…,元素n)
push() 方法可把參數(shù)指定的元素依次添加到數(shù)組的末尾,并返回添加元素后的數(shù)組長度(該方法必須至少有一個參數(shù))。示例如下:
var arr = [1,2,3]; alert(arr.push(4));//返回最終數(shù)組的長度:4 alert(arr);//返回:1,2,3,4 alert(arr.push(5,6,7));//返回最終數(shù)組的長度:7 alert(arr);//返回:1,2,3,4,5,6,7
2) unshift(元素1,…,元素n)
unshift() 方法可把參數(shù)指定的元素依次添加到數(shù)組的前面,并返回添加元素后的數(shù)組長度。該方法必須至少有一個參數(shù)。注意:IE6、IE7 不支持方法的返回值。示例如下:
var arr = [1,2,3]; alert(arr.unshift('a'));//返回最終數(shù)組的長度:4 alert(arr);//返回:a,1,2,3 alert(arr.unshift('b','c','d'));//返回最終數(shù)組的長度:7 alert(arr);//返回:b,c,d,a,1,2,3
3) pop()
pop() 方法可彈出(刪除)數(shù)組最后一個元素,并返回彈出的元素。示例如下:
var arr = ['A','B','C','D']; alert(arr.pop());//返回:D alert(arr);//返回:A,B,C
4) shift()
shift() 方法可刪除數(shù)組第一個元素,并返回刪除的元素。示例如下:
var arr = ['A','B','C','D']; alert(arr.shift());//返回:A alert(arr);//返回:B,C,D
5) splice(index,count[,元素1,…,元素n])
splic() 方法功能比較強(qiáng),它可以實現(xiàn)刪除指定數(shù)量的元素、替換指定元素以及在指定位置添加元素。這些不同功能的實現(xiàn)需要結(jié)合方法參數(shù)來確定:
當(dāng)參數(shù)只有 index 和 count 兩個參數(shù)時,如果 count 不等于 0,splice() 方法實現(xiàn)刪除功能,同時返回所刪除的元素:從 index參數(shù)指定位置開始刪除 count 參數(shù)指定個數(shù)的元素;
當(dāng)參數(shù)為 3 個以上,且 count 參數(shù)不為0時,splice() 方法實現(xiàn)替換功能,同時返回所替換的元素:用第三個及其之后的參數(shù)替換 index 參數(shù)指定位置開始的 count 參數(shù)指定個數(shù)的元素;
當(dāng)參數(shù)為 3 個以上,且 count 參數(shù)為 0 時,splice() 方法的實現(xiàn)添加功能:用第三個及其之后的參數(shù)添加到 index 參數(shù)指定位置上。
splice() 方法實現(xiàn)的各個功能示例如下。
① 使用 splice() 從指定位置刪除指定個數(shù)的元素:
var arr = ['A','B','C','D']; //2個參數(shù),第二個參數(shù)不為 0,實現(xiàn)刪除功能 alert(arr.splice(0,2)); alert(arr); //返回C,D
② 使用 splice() 用指定元素替換從指定位置開始的指定個數(shù)的元素:
var arr = ['A','B','C','D']; //3個參數(shù),第二個參數(shù)不為 0,實現(xiàn)替換功能:用 a 替換掉 A,返回:A alert(arr.splice(0,1,'a')); alert(arr); //返回:a,B,C,D alert(arr.splice(0,2,'a or b'));//用a or b替換掉a和B,返回a,B alert(arr); //返回:a or b,C,D
③ 使用 splice() 在指定位置添加指定的元素:
var arr = ['A','B','C','D']; //4個參數(shù),第二個參數(shù)為 0,實現(xiàn)添加功能:在下標(biāo)為 1 處添加 aaa,bbb,沒有返回值 alert(arr.splice(1,0,'aaa','bbb')); alert(arr);//返回:A,aaa,bbb,B,C,D
【例 1】使用 splice() 方法實現(xiàn)數(shù)組去重。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用splice方法實現(xiàn)數(shù)組去重</title> <script> var arr = [1,2,2,2,4,2]; for(var i = 0; i < arr.length; i++){ for(var j = i + 1; j < arr.length; j++){ if(arr[i] == arr[j]){ arr.splice(j,1);//刪除 j 位置處的元素 j--; } } } alert(arr);//返回1,2,4三個元素 </script> </head> <body> </body> </html>
上述代碼使用了具有兩個參數(shù)的 splice(),實現(xiàn)了刪除指定元素的功能。
6) slice(index1[,index2])
slice() 方法返回包含從數(shù)組對象中的第 index1~index2-1 之間的元素的數(shù)組。index2 參數(shù)可以省略,省略時表示返回從 index1 位置開始一直到最后位置的元素。需要注意的是,該方法只是讀取指定的元素,并不會對原數(shù)組作任何修改。
示例如下:
var arr = ['A','B','C','D']; alert(arr.slice(0,3)); //返回:A,B,C alert(arr); //返回A,B,C,D alert(arr.slice(0)); //返回數(shù)組全部元素:A,B,C,D alert(arr); //返回A,B,C,D
7) sort()、sort(compareFunction)
sort() 方法用于按某種規(guī)則排序數(shù)組:當(dāng)方法的參數(shù)為空時,按字典序(即元素的 Unicode 編碼從小到大排序順序)排序數(shù)組元素;當(dāng)參數(shù)為一個匿名函數(shù)時,將按匿名函數(shù)指定的規(guī)則排序數(shù)組元素。sort() 排序后將返回排序后的數(shù)組,示例如下。
① 按字典序排序數(shù)組。
var arr = ['c','d','a','e']; alert(arr.sort()); //返回排序后的數(shù)組:a,c,d,e alert(arr); //返回排序后的數(shù)組:a,c,d,e
從上述代碼,我們可看到?jīng)]有參數(shù)時,sort() 按字典序排列數(shù)組中的各個元素。
下面我們再用元素的 sort() 對幾個數(shù)字排序,看看結(jié)果如何:
var arr = [4,3,5,76,2,0,8]; arr.sort(); alert(arr); //返回排序后的數(shù)組:0,2,3,4,5,76,8
我們看到排序后,結(jié)果并不是所預(yù)期的 76 最大應(yīng)排在最后,反而是 8 排在最后,似乎 8 在這些元素中是最大的,即元素并沒按數(shù)字大小進(jìn)行排序。
為什么會出現(xiàn)這樣的結(jié)果呢?這是因為 sort() 默認(rèn)是對每個元素按字符串進(jìn)行排序,排序時會從左到右按位比較元素的每位字符,對應(yīng)位的 Unicode 編碼大的就意味著這個元素大,此時將不再對后面的字符進(jìn)行比較;對應(yīng)位字符相同時才比較后面位置的字符。顯然上述數(shù)組的排序使用了 sort() 的默認(rèn)排序規(guī)則。此時要讓數(shù)組中的元素按數(shù)字大小進(jìn)行排序,就必須通過匿名函數(shù)參數(shù)來修改排序規(guī)則。
② 按匿名函數(shù)參數(shù)指定的規(guī)則排序數(shù)組。
下面通過定義匿名函數(shù)來修改 sort() 的默認(rèn)排序規(guī)則,實現(xiàn)對上面數(shù)字元素按數(shù)字大小進(jìn)行排序:
var arr = [4,3,5,76,2,0,8]; arr2.sort(function(a,b){ return a-b;//從小到大排序 //return b-a;//從大到小排序 }); alert(arr);//返回排序后的數(shù)組:0,2,3,4,5,8,76
說明:匿名函數(shù)中返回第一個參數(shù)減第二個參數(shù)的值,此時將按元素數(shù)值從小到大的規(guī)則排序各個元素:當(dāng)兩個參數(shù)的差為正數(shù)時,前后比較的兩個元素將調(diào)換位置排序;否則元素不調(diào)換位置。如果返回第二個參數(shù)減第一個參數(shù)的值,則按元素數(shù)值從大到小的規(guī)則排序各個元素,元素調(diào)換規(guī)則和從小到大類似。
當(dāng)數(shù)組元素的前綴為數(shù)字而后綴為字符串時,如果希望這些元素能按數(shù)字大小進(jìn)行排序,此時需對匿名函數(shù)中的參數(shù)作一些變通處理。因為這些參數(shù)代表了數(shù)組元素,所以它們也是一個包含數(shù)字和字符的字符串,因此要按數(shù)字大小來排序它們,就需要將參數(shù)解析為一個數(shù)字,然后再返回這些解析結(jié)果的差。
示例如下:
var arrWidth = ['345px','23px','10px','1000px']; arrWidth.sort(function(a,b){ return parseInt(a)-parseInt(b); }); alert(arrWidth);//排序后的結(jié)果為:10px,23px,345px,1000px
此外,我們通過匿名函數(shù),還可以實現(xiàn)隨機(jī)排序數(shù)組元素。示例如下:
var arr = [1,2,3,4,5,6,7,8]; arr.sort(function(a,b){ return Math.random()-0.5;//random()返回:0~1之間的一個值 }); alert(arr);//排序后的結(jié)果為:4,3,1,2,6,5,7,8。注意:每次執(zhí)行的結(jié)果可能會不一樣
上述代碼中的匿名函數(shù)并沒有返回兩個參數(shù)的差值,而是返回 Math 對象中的 random() 隨機(jī)函數(shù)和 0.5 的差值,這就使得元素的排序?qū)⒉皇歉鶕?jù)元素大小來排序。由于 random() 的值為 0~1 之間的一個隨機(jī)值,所以它和 0.5 的差時正時負(fù),這就導(dǎo)致數(shù)組元素位置的調(diào)換很隨機(jī),所以排序后的數(shù)組是隨機(jī)排序的。
8) concat(數(shù)組1,…,數(shù)組n)
concat() 將參數(shù)指定的數(shù)組和當(dāng)前數(shù)組連成一個新數(shù)組。示例如下:
var arr1 = [1,2,3]; var arr2 = [4,5,6]; var arr3 = [7,8,9]; alert(arr1.concat(arr2,arr3));//最終獲得連接后的數(shù)組:1,2,3,4,5,6,7,8,9
9) reverse()
reverse() 方法可返回當(dāng)前數(shù)組倒序排序形式。示例如下:
var arr = [1,2,3,4,5,6]; alert(arr.reverse());//返回:6,5,4,3,2,1
10) join(分隔符)
join() 方法可將數(shù)組內(nèi)各個元素按參數(shù)指定的分隔符連接成一個字符串。參數(shù)可以省略,省略參數(shù)時,分隔符默認(rèn)為“逗號”。
11) forEach()
forEach() 方法用于對數(shù)組的每個元素執(zhí)行一次回調(diào)函數(shù)。
語法如下:
array對象.forEach(function(currentValue[,index[,array]])[,thisArg])
forEach() 方法的第一個參數(shù)為 array 對象中每個元素需要調(diào)用的函數(shù)。
forEach() 方法中的各個參數(shù)說明如下:
currentValue 參數(shù):必需參數(shù),表示正在處理的數(shù)組元素(當(dāng)前元素);
index 參數(shù):可選參數(shù),表示正在處理的當(dāng)前元素的索引;
array 參數(shù):可選參數(shù),表示方法正在操作的數(shù)組;
thisArg 參數(shù),可選參數(shù),取值通常為 this,為空時取值為 undefined。
forEach() 函數(shù)的返回值為 undefined。示例如下:
var fruit = ["蘋果","橙子","梨子"]; fruit.forEach(function(item,index){ console.log("fruit[" + index + "] = " + item); });
上述示例的運(yùn)行后將在控制臺中分別顯示:fruit[0]=蘋果、fruit[1]=橙子和fruit[2]=梨子。
12) filter()
filter() 方法用于創(chuàng)建一個新的數(shù)組,其中的元素是指定數(shù)組中所有符合指定函數(shù)要求的元素。
語法如下:
array對象.filter(function(currentValue[,index[,array]])[,thisArg])
filter() 方法的第一個參數(shù)為回調(diào)函數(shù),array 對象中每個元素都需要調(diào)用該函數(shù),filter() 會返回所有使回調(diào)函數(shù)返回值為 true 的元素。
filter() 方法中的各個參數(shù)說明如下:
currentValue 參數(shù):必需參數(shù),表示正在處理的數(shù)組元素(當(dāng)前元素);
index 參數(shù):可選參數(shù),表示正在處理的當(dāng)前元素的索引;
array 參數(shù):可選參數(shù),表示方法正在操作的數(shù)組;
thisArg 參數(shù),可選參數(shù),取值通常為 this,為空時取值為 undefined。
filter() 函數(shù)返回一個新數(shù)組,其中包含了指定數(shù)組中的所有符合條件的元素。如果沒有符合條件的元素則返回空數(shù)組。
示例如下:
var names1 = ["張山","張小天","李四","張萌萌","王寧","陳浩"];//原數(shù)組 function checkName(name){ //定義回調(diào)函數(shù),判斷名字是否姓“張” if(name.indexOf("張") != -1){ return true; }else{ return false; } } var names2 = names1.filter(checkName);//對names1執(zhí)行回調(diào)用函數(shù),返回所有姓張的名字 names2.forEach(function(item,index){//遍歷names2數(shù)組中的每個元素 console.log("names2[" + index + "] = " + item); });
上述示例運(yùn)行后將在控制臺中分別顯示:names2[0]=張山、names2[1]=張小天和names2[2]=張萌萌。
13) map()
map() 方法用于創(chuàng)建一個新的數(shù)組,其中的每個元素是指定數(shù)組的對應(yīng)元素調(diào)用指定函數(shù)處理后的值。
語法如下:
array對象.map(function(currentValue[,index[,array]])[,thisArg])
map() 方法的第一個參數(shù)為回調(diào)函數(shù),array 對象中每個元素都需要調(diào)用該函數(shù)。
map() 方法中的各個參數(shù)說明如下:
currentValue 參數(shù):必需參數(shù),表示正在處理的數(shù)組元素(當(dāng)前元素);
index 參數(shù):可選參數(shù),表示正在處理的當(dāng)前元素的索引;
array 參數(shù):可選參數(shù),表示方法正在操作的數(shù)組;
thisArg 參數(shù),可選參數(shù),取值通常為 this,為空時取值為 undefined。
map() 函數(shù)返回一個新數(shù)組,其中的元素為原始數(shù)組元素調(diào)用回調(diào)函數(shù)處理后的值。示例如下:
var number = [1,2,3];//原數(shù)組 var num=number.map(function(item){//對原數(shù)組中的每個元素*2,將值分別存儲在num數(shù)組中 return item * 2; }); num.forEach(function(item,index){//遍歷num中的每個元素 console.log("num[" + index + "]=" + item); });
上述示例運(yùn)行后將在控制臺中分別顯示:num[0]=2、num[1]=4和num[2]=6。
14) reduce()
reduce() 用于使用回調(diào)函數(shù)對數(shù)組中的每個元素進(jìn)行處理,并將處理進(jìn)行匯總返回。語法如下:
array對象.reduce(function(result,currentValue[,index[,array]])[,initialValue])
reduce() 方法的第一個參數(shù)為回調(diào)函數(shù)。
reduce() 方法中的各個參數(shù)說明如下。
result 參數(shù):必需參數(shù),表示初始值或回調(diào)函數(shù)執(zhí)行后的返回值。在第一次調(diào)用回調(diào)函數(shù)前,result 參數(shù)表示初始值;在調(diào)用回調(diào)函數(shù)之后,result 參數(shù)表示回調(diào)函數(shù)執(zhí)行后的返回值。
需要注意的是,如果指定了 initialValue 參數(shù),則初始值就是 initialValue 參數(shù)值,否則初始值為數(shù)組的第一個元素。
currentValue 參數(shù):必需參數(shù),表示正在處理的數(shù)組元素(當(dāng)前元素)。
需要注意的是,如果指定了 initialValue 參數(shù),則第一次執(zhí)行回調(diào)函數(shù)時的 currentValue 為數(shù)組的第一個元素,否則為第二個元素。
index 參數(shù):可選參數(shù),表示正在處理的當(dāng)前元素的索引。
array 參數(shù):可選參數(shù),表示方法正在操作的數(shù)組。
initialValue 參數(shù),可選參數(shù),作為第一次調(diào)用回調(diào)函數(shù)時的第一個參數(shù)的值。如果沒有提供該參數(shù),第一次調(diào)用回調(diào)函數(shù)時的第一個參數(shù)將使用數(shù)組中的第一個元素。
需要注意的是:對一個空數(shù)組調(diào)用 reduce() 方法時,如果沒有指定 initialValue 參數(shù)此時將會報錯。
reduce() 的使用示例如下:
var num1 = [1,3,6,9]; //reduce()沒有initialValue參數(shù) var num2 = num1.reduce(function(v1,v2){ //① return v1 + 2 * v2;//將當(dāng)前元素值*2后和初始值或函數(shù)的前一次執(zhí)行結(jié)果進(jìn)行相加 }); console.log("num2=" + num2);//輸出:num2=37 //reduce()提供了initialValue參數(shù) var num3 = num1.reduce(function(v1,v2){ //② return v1 + 2 * v2;//將當(dāng)前元素值*2后和初始值或函數(shù)的前一次執(zhí)行結(jié)果進(jìn)行相加 },2); console.log("num3=" + num3); //輸出:num3=40
上述示例中,① 處調(diào)用的 reduce() 沒有指定 initialValue 參數(shù),因而初始值為數(shù)組的第一個元素,即 1,此時 reduce() 的執(zhí)行過程等效于:1+2*3+2*6+2*9 運(yùn)算表達(dá)式的執(zhí)行,結(jié)果返回 37。② 處調(diào)用的 reduce() 指定了值為 2 的 initialValue 參數(shù),因而初始值為 2,此時 reduce() 的執(zhí)行過程等效于:2+2*1+2*3+2*6+2*9 運(yùn)算表達(dá)式的執(zhí)行,結(jié)果返回 40。
15) find()
find() 用于獲取使回調(diào)函數(shù)值為 true 的第一個數(shù)組元素。如果沒有符合條件的元素,將返回 undefined。
語法如下:
array對象.find(function(currentValue[,index[,array]])[,thisArg])
filter() 方法的第一個參數(shù)為回調(diào)函數(shù),array 對象中每個元素都需要調(diào)用該函數(shù),filter() 會返回所有使回調(diào)函數(shù)返回值為 true 的元素。
filter() 方法中的各個參數(shù)說明如下:
currentValue 參數(shù):必需參數(shù),表示正在處理的數(shù)組元素(當(dāng)前元素);
index 參數(shù):可選參數(shù),表示正在處理的當(dāng)前元素的索引;
array 參數(shù):可選參數(shù),表示方法正在操作的數(shù)組;
thisArg 參數(shù),可選參數(shù),取值通常為 this,為空時取值為 undefined。
find() 函數(shù)使用示例如下:
var names = ["Tom","Jane","Marry","John","Marissa"]; //定義回調(diào)函數(shù) function checkLength(item){ return item.length >= 4; } var name = names.find(checkLength);//返回名字?jǐn)?shù)組中名字長度大于或等于4的第一個名字 console.log("name: " + name);
上述示例運(yùn)行后將在控制臺中輸出 name:Jane。
到此,相信大家對“javascript數(shù)組常用方法有什么”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
本文標(biāo)題:javascript數(shù)組常用方法有什么
文章分享:http://aaarwkj.com/article28/igdecp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、做網(wǎng)站、云服務(wù)器、網(wǎng)頁設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)