溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“javascript數組常用方法有什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript數組常用方法有什么”吧!
常用方法：1、push()；2、unshift()；3、pop()；4、shift()；5、splic()；6、slice()；7、sort()；8、concat()；9、reverse()；10、join()；11、forEach()等。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
javascript數組的常用方法
數組提供了一些常用方法，可實現數組元素的添加、刪除、替換以及排序等功能。
1) push(元素1,…,元素n)
push() 方法可把參數指定的元素依次添加到數組的末尾，并返回添加元素后的數組長度（該方法必須至少有一個參數）。示例如下：
var arr = [1,2,3]; alert(arr.push(4));//返回最終數組的長度:4 alert(arr);//返回：1,2,3,4 alert(arr.push(5,6,7));//返回最終數組的長度:7 alert(arr);//返回：1,2,3,4,5,6,7
2) unshift(元素1,…,元素n)
unshift() 方法可把參數指定的元素依次添加到數組的前面，并返回添加元素后的數組長度。該方法必須至少有一個參數。注意：IE6、IE7 不支持方法的返回值。示例如下：
var arr = [1,2,3];
alert(arr.unshift('a'));//返回最終數組的長度:4
alert(arr);//返回：a,1,2,3
alert(arr.unshift('b','c','d'));//返回最終數組的長度:7
alert(arr);//返回：b,c,d,a,1,2,33) pop()
pop() 方法可彈出（刪除）數組最后一個元素，并返回彈出的元素。示例如下：
var arr = ['A','B','C','D']; alert(arr.pop());//返回：D alert(arr);//返回：A,B,C
4) shift()
shift() 方法可刪除數組第一個元素，并返回刪除的元素。示例如下：
var arr = ['A','B','C','D']; alert(arr.shift());//返回：A alert(arr);//返回：B,C,D
5) splice(index,count[,元素1,…,元素n])
splic() 方法功能比較強，它可以實現刪除指定數量的元素、替換指定元素以及在指定位置添加元素。這些不同功能的實現需要結合方法參數來確定：
當參數只有 index 和 count 兩個參數時，如果 count 不等于 0，splice() 方法實現刪除功能，同時返回所刪除的元素：從 index參數指定位置開始刪除 count 參數指定個數的元素；
當參數為 3 個以上，且 count 參數不為0時，splice() 方法實現替換功能，同時返回所替換的元素：用第三個及其之后的參數替換 index 參數指定位置開始的 count 參數指定個數的元素；
當參數為 3 個以上，且 count 參數為 0 時，splice() 方法的實現添加功能：用第三個及其之后的參數添加到 index 參數指定位置上。
splice() 方法實現的各個功能示例如下。
① 使用 splice() 從指定位置刪除指定個數的元素：
var arr = ['A','B','C','D']; //2個參數，第二個參數不為 0，實現刪除功能 alert(arr.splice(0,2)); alert(arr); //返回C,D
② 使用 splice() 用指定元素替換從指定位置開始的指定個數的元素：
var arr = ['A','B','C','D']; //3個參數，第二個參數不為 0，實現替換功能：用 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個參數，第二個參數為 0，實現添加功能：在下標為 1 處添加 aaa,bbb，沒有返回值 alert(arr.splice(1,0,'aaa','bbb')); alert(arr);//返回：A,aaa,bbb,B,C,D
【例 1】使用 splice() 方法實現數組去重。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用splice方法實現數組去重</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>上述代碼使用了具有兩個參數的 splice()，實現了刪除指定元素的功能。
6) slice(index1[,index2])
slice() 方法返回包含從數組對象中的第 index1～index2-1 之間的元素的數組。index2 參數可以省略，省略時表示返回從 index1 位置開始一直到最后位置的元素。需要注意的是，該方法只是讀取指定的元素，并不會對原數組作任何修改。
示例如下：
var arr = ['A','B','C','D']; alert(arr.slice(0,3)); //返回：A,B,C alert(arr); //返回A,B,C,D alert(arr.slice(0)); //返回數組全部元素：A,B,C,D alert(arr); //返回A,B,C,D
7) sort()、sort(compareFunction)
sort() 方法用于按某種規則排序數組：當方法的參數為空時，按字典序（即元素的 Unicode 編碼從小到大排序順序）排序數組元素；當參數為一個匿名函數時，將按匿名函數指定的規則排序數組元素。sort() 排序后將返回排序后的數組，示例如下。
① 按字典序排序數組。
var arr = ['c','d','a','e']; alert(arr.sort()); //返回排序后的數組：a,c,d,e alert(arr); //返回排序后的數組：a,c,d,e
從上述代碼，我們可看到沒有參數時，sort() 按字典序排列數組中的各個元素。
下面我們再用元素的 sort() 對幾個數字排序，看看結果如何：
var arr = [4,3,5,76,2,0,8]; arr.sort(); alert(arr); //返回排序后的數組：0,2,3,4,5,76,8
我們看到排序后，結果并不是所預期的 76 最大應排在最后，反而是 8 排在最后，似乎 8 在這些元素中是最大的，即元素并沒按數字大小進行排序。
為什么會出現這樣的結果呢？這是因為 sort() 默認是對每個元素按字符串進行排序，排序時會從左到右按位比較元素的每位字符，對應位的 Unicode 編碼大的就意味著這個元素大，此時將不再對后面的字符進行比較；對應位字符相同時才比較后面位置的字符。顯然上述數組的排序使用了 sort() 的默認排序規則。此時要讓數組中的元素按數字大小進行排序，就必須通過匿名函數參數來修改排序規則。
② 按匿名函數參數指定的規則排序數組。
下面通過定義匿名函數來修改 sort() 的默認排序規則，實現對上面數字元素按數字大小進行排序：
var arr = [4,3,5,76,2,0,8];
arr2.sort(function(a,b){
return a-b;//從小到大排序
//return b-a;//從大到小排序
});
alert(arr);//返回排序后的數組：0,2,3,4,5,8,76說明：匿名函數中返回第一個參數減第二個參數的值，此時將按元素數值從小到大的規則排序各個元素：當兩個參數的差為正數時，前后比較的兩個元素將調換位置排序；否則元素不調換位置。如果返回第二個參數減第一個參數的值，則按元素數值從大到小的規則排序各個元素，元素調換規則和從小到大類似。
當數組元素的前綴為數字而后綴為字符串時，如果希望這些元素能按數字大小進行排序，此時需對匿名函數中的參數作一些變通處理。因為這些參數代表了數組元素，所以它們也是一個包含數字和字符的字符串，因此要按數字大小來排序它們，就需要將參數解析為一個數字，然后再返回這些解析結果的差。
示例如下：
var arrWidth = ['345px','23px','10px','1000px'];
arrWidth.sort(function(a,b){
return parseInt(a)-parseInt(b);
});
alert(arrWidth);//排序后的結果為：10px,23px,345px,1000px此外，我們通過匿名函數，還可以實現隨機排序數組元素。示例如下：
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);//排序后的結果為：4,3,1,2,6,5,7,8。注意：每次執行的結果可能會不一樣上述代碼中的匿名函數并沒有返回兩個參數的差值，而是返回 Math 對象中的 random() 隨機函數和 0.5 的差值，這就使得元素的排序將不是根據元素大小來排序。由于 random() 的值為 0～1 之間的一個隨機值，所以它和 0.5 的差時正時負，這就導致數組元素位置的調換很隨機，所以排序后的數組是隨機排序的。
8) concat(數組1,…,數組n)
concat() 將參數指定的數組和當前數組連成一個新數組。示例如下：
var arr1 = [1,2,3]; var arr2 = [4,5,6]; var arr3 = [7,8,9]; alert(arr1.concat(arr2,arr3));//最終獲得連接后的數組：1,2,3,4,5,6,7,8,9
9) reverse()
reverse() 方法可返回當前數組倒序排序形式。示例如下：
var arr = [1,2,3,4,5,6]; alert(arr.reverse());//返回：6,5,4,3,2,1
10) join(分隔符)
join() 方法可將數組內各個元素按參數指定的分隔符連接成一個字符串。參數可以省略，省略參數時，分隔符默認為“逗號”。
11) forEach()
forEach() 方法用于對數組的每個元素執行一次回調函數。
語法如下：
array對象.forEach(function(currentValue[,index[,array]])[,thisArg])
forEach() 方法的第一個參數為 array 對象中每個元素需要調用的函數。
forEach() 方法中的各個參數說明如下：
currentValue 參數：必需參數，表示正在處理的數組元素（當前元素）；
index 參數：可選參數，表示正在處理的當前元素的索引；
array 參數：可選參數，表示方法正在操作的數組；
thisArg 參數，可選參數，取值通常為 this，為空時取值為 undefined。
forEach() 函數的返回值為 undefined。示例如下：
var fruit = ["蘋果","橙子","梨子"];
fruit.forEach(function(item,index){
console.log("fruit[" + index + "] = " + item);
});上述示例的運行后將在控制臺中分別顯示：fruit[0]=蘋果、fruit[1]=橙子和fruit[2]=梨子。
12) filter()
filter() 方法用于創建一個新的數組，其中的元素是指定數組中所有符合指定函數要求的元素。
語法如下：
array對象.filter(function(currentValue[,index[,array]])[,thisArg])
filter() 方法的第一個參數為回調函數，array 對象中每個元素都需要調用該函數，filter() 會返回所有使回調函數返回值為 true 的元素。
filter() 方法中的各個參數說明如下：
currentValue 參數：必需參數，表示正在處理的數組元素（當前元素）；
index 參數：可選參數，表示正在處理的當前元素的索引；
array 參數：可選參數，表示方法正在操作的數組；
thisArg 參數，可選參數，取值通常為 this，為空時取值為 undefined。
filter() 函數返回一個新數組，其中包含了指定數組中的所有符合條件的元素。如果沒有符合條件的元素則返回空數組。
示例如下：
var names1 = ["張山","張小天","李四","張萌萌","王寧","陳浩"];//原數組
function checkName(name){ //定義回調函數，判斷名字是否姓“張”
if(name.indexOf("張") != -1){
return true;
}else{
return false;
}
}
var names2 = names1.filter(checkName);//對names1執行回調用函數，返回所有姓張的名字
names2.forEach(function(item,index){//遍歷names2數組中的每個元素
console.log("names2[" + index + "] = " + item);
});上述示例運行后將在控制臺中分別顯示：names2[0]=張山、names2[1]=張小天和names2[2]=張萌萌。
13) map()
map() 方法用于創建一個新的數組，其中的每個元素是指定數組的對應元素調用指定函數處理后的值。
語法如下：
array對象.map(function(currentValue[,index[,array]])[,thisArg])
map() 方法的第一個參數為回調函數，array 對象中每個元素都需要調用該函數。
map() 方法中的各個參數說明如下：
currentValue 參數：必需參數，表示正在處理的數組元素（當前元素）；
index 參數：可選參數，表示正在處理的當前元素的索引；
array 參數：可選參數，表示方法正在操作的數組；
thisArg 參數，可選參數，取值通常為 this，為空時取值為 undefined。
map() 函數返回一個新數組，其中的元素為原始數組元素調用回調函數處理后的值。示例如下：
var number = [1,2,3];//原數組
var num=number.map(function(item){//對原數組中的每個元素*2，將值分別存儲在num數組中
return item * 2;
});
num.forEach(function(item,index){//遍歷num中的每個元素
console.log("num[" + index + "]=" + item);
});上述示例運行后將在控制臺中分別顯示：num[0]=2、num[1]=4和num[2]=6。
14) reduce()
reduce() 用于使用回調函數對數組中的每個元素進行處理，并將處理進行匯總返回。語法如下：
array對象.reduce(function(result,currentValue[,index[,array]])[,initialValue])
reduce() 方法的第一個參數為回調函數。
reduce() 方法中的各個參數說明如下。
result 參數：必需參數，表示初始值或回調函數執行后的返回值。在第一次調用回調函數前，result 參數表示初始值；在調用回調函數之后，result 參數表示回調函數執行后的返回值。
需要注意的是，如果指定了 initialValue 參數，則初始值就是 initialValue 參數值，否則初始值為數組的第一個元素。
currentValue 參數：必需參數，表示正在處理的數組元素（當前元素）。
需要注意的是，如果指定了 initialValue 參數，則第一次執行回調函數時的 currentValue 為數組的第一個元素，否則為第二個元素。
index 參數：可選參數，表示正在處理的當前元素的索引。
array 參數：可選參數，表示方法正在操作的數組。
initialValue 參數，可選參數，作為第一次調用回調函數時的第一個參數的值。如果沒有提供該參數，第一次調用回調函數時的第一個參數將使用數組中的第一個元素。
需要注意的是：對一個空數組調用 reduce() 方法時，如果沒有指定 initialValue 參數此時將會報錯。
reduce() 的使用示例如下：
var num1 = [1,3,6,9];
//reduce()沒有initialValue參數
var num2 = num1.reduce(function(v1,v2){ //①
return v1 + 2 * v2;//將當前元素值*2后和初始值或函數的前一次執行結果進行相加
});
console.log("num2=" + num2);//輸出：num2=37
//reduce()提供了initialValue參數
var num3 = num1.reduce(function(v1,v2){ //②
return v1 + 2 * v2;//將當前元素值*2后和初始值或函數的前一次執行結果進行相加
},2);
console.log("num3=" + num3); //輸出：num3=40上述示例中，① 處調用的 reduce() 沒有指定 initialValue 參數，因而初始值為數組的第一個元素，即 1，此時 reduce() 的執行過程等效于：1+2*3+2*6+2*9 運算表達式的執行，結果返回 37。② 處調用的 reduce() 指定了值為 2 的 initialValue 參數，因而初始值為 2，此時 reduce() 的執行過程等效于：2+2*1+2*3+2*6+2*9 運算表達式的執行，結果返回 40。
15) find()
find() 用于獲取使回調函數值為 true 的第一個數組元素。如果沒有符合條件的元素，將返回 undefined。
語法如下：
array對象.find(function(currentValue[,index[,array]])[,thisArg])
filter() 方法的第一個參數為回調函數，array 對象中每個元素都需要調用該函數，filter() 會返回所有使回調函數返回值為 true 的元素。
filter() 方法中的各個參數說明如下：
currentValue 參數：必需參數，表示正在處理的數組元素（當前元素）；
index 參數：可選參數，表示正在處理的當前元素的索引；
array 參數：可選參數，表示方法正在操作的數組；
thisArg 參數，可選參數，取值通常為 this，為空時取值為 undefined。
find() 函數使用示例如下：
var names = ["Tom","Jane","Marry","John","Marissa"];
//定義回調函數
function checkLength(item){
return item.length >= 4;
}
var name = names.find(checkLength);//返回名字數組中名字長度大于或等于4的第一個名字
console.log("name: " + name);上述示例運行后將在控制臺中輸出 name:Jane。
到此，相信大家對“javascript數組常用方法有什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
