前言
在javascript中，數組是一種非常重要的資料類型，我們時常會和它打交道，最近在開發項目中頻繁的使用到數組，但是自己對數組的衆多方法已經是非常模糊了，為了友善自己以後能夠更好的使用數組中的屬性和方法，在此記錄一下。
數組常用的屬性和方法
常用屬性
-
Array.length:傳回數組的大小
常用方法
-
Array.pop():删除并傳回數組的最後一個元素
-
Array.push():向數組的結尾添加元素
-
Array.shift():将元素移除數組
-
Array.unshift():向數組頭部添加元素
-
Array.join():将數組元素連接配接起來以構成一個字元串
-
Array.concat():連接配接數組
-
Array.reverse():将數組進行反轉
-
Array.sort():将數組進行排序
-
Array.slice():傳回數組的一部分
-
Array.splice():插入，删除或替換數組中的元素
-
Array.toString():将數組轉換為一個字元串
-
Array.map():對數組中的每一項運作給定函數，傳回每次函數調用的結果組成的數組
-
Array.forEach():對數組中的每一項運作給定函數，這個方法沒有傳回值
-
Array.filter():對數組中的每一項運作給定函數，傳回該函數會傳回true的項組成的數組
-
Array.some():對數組中的每一項運作給定函數，如果該函數對任一項傳回true,則傳回true
-
Array.every():對數組中的每一項運作給定函數，如果該函數對每一項都傳回ture,則傳回true
-
Array.isArray():判斷是否是數組
-
Array.reduce():疊代數組的所有項，然後建構一個最終傳回的值，從數組的第一項開始，周遊數組的每一項到最後
-
Array.reduceRight():疊代數組的所有項，然後建構一個最終傳回的值，從數組的最後一項開始，向前周遊到第一項
執行個體講解
為了友善大家的了解和使用，我會将這些方法進行分類講解和分析
(1):Array.length屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1：數組的定義
var colors0=new Array(); //建立數組
var colors1=new Array(20); //建立數組并指定長度
var colors2=new Array('red','blue','green');//定義數組并指派
var colors3=[];//字面量定義空數組
console.log(colors0.length);//0
console.log(colors1.length);//20
console.log(colors2.length);//3
//2：數組的通路和修改
console.log(colors2[0]);//通路數組 red
colors2[1]='小明'; //修改數組下标中的值
console.log(colors2[1]);
//3.周遊數組
for(var i=0;i<colors2.length;i++){
console.log(colors2[i]);//red,小明，green
}
</script>
</body>
</html> (2):棧方法push()和pop()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數組中的棧方法</title>
</head>
<body>
<script type="text/javascript">
var colors=new Array(); //建立數組
var count=colors.push('red','green')//向數組的結尾添加元素
console.log(colors); //red,green
count=colors.push('black');
console.log(colors); //red,green,black
var item=colors.pop();//移除數組的最後一項
console.log(item); //black
</script>
</body>
</html> (3):隊列方法shift()和unshift()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數組中的隊列方法</title>
</head>
<body>
<script type="text/javascript">
var colors=new Array();//建立數組
var count=colors.push('red','green'); //推入兩項
console.log(count);//2
count=colors.push('black'); //推入另一項
console.log(count);//3
var item=colors.shift();//取得第一項
console.log(item); //red
console.log(colors.length);//2
var color=new Array(); //建立數組
var c=color.unshift('red','green');//推入兩項
console.log(c);//2
c=color.unshift('black');
console.log(c);//3
var i=color.pop();
console.log(i);//green
console.log(color.length);//2
</script>
</body>
</html> (4):重排序方法sort()和reverse()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數組中的重排序方法</title>
</head>
<body>
<script type="text/javascript">
//reverse()方法和sort()方法
//1：測試reverse()方法
var values1=[1,2,3,4,5];
values1.reverse(); //将數組進行反轉
console.log(values1);//5,4,3,2,1
//2：測試sort()方法
var values2=[0,1,5,10,15];
values2.sort();//将數組進行排序，比較ASCII編碼
console.log(values2);//0,1,10,15,5
//3：sort()方法接受函數實作升序
function descArray(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0
}
}
var item=[0,1,3,2,4];
item.sort(descArray);
console.log(item); //0,1,2,3,4
//4：sort()方法接受函數實作降序
function ascArray(a,b){
if(a<b){
return 1;
}else if(a>b){
return -1;
}else{
return 0;
}
}
var items=[10,1,2,4,6,5,7];
items.sort(ascArray);
console.log(items);//10,7,6,5,4,2,1
</script>
</body>
</html> (5):操作方法slice()、splice()、concat()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數組中的操作方法</title>
</head>
<body>
<script type="text/javascript">
//1：測試操作方法concat()
var colors1=['red','blue','green'];
var colors2=colors1.concat('yellow',['black','brown']);
console.log(colors1); //red,blue,green
console.log(colors2); //red,blue,green,yellow,black,brown
//2:測試操作方法splice(startIndex,[endIndex]);
var colors3=['red','green','blue','yellow','purple'];
var colors4=colors3.splice(1);
var colors5=colors3.splice(1,4);
console.log(colors4); //green,blue,yellow,purple
console.log(colors5); //green,blue,yellow
//3:測試splice()方法
//(1):測試splice()删除方法
//參數：要删除第一項的位置，删除的項數
var item=['red','blue','green'];
var removed=item.splice(0,1);
console.log(removed);//red
console.log(item);//blue,green
//(2):測試splice()添加方法
//參數：起始位置，0(要删除的項數)，要插入的項
removed=item.splice(1,0,'yellow','orange');
console.log(removed);//傳回一個空的數組，因為移除的項為0
console.log(item); //blue,yellow,orange,green
//(3):測試splice()修改方法
//參數：起始位置，删除的項數，插入的任一項
removed=item.splice(1,1,'red','purple');
console.log(removed);//yellow
console.log(item);//blue,red,purple,orange,green
</script>
</body>
</html> 使用slice()方法，如果傳入一個參數，則從開始下标到截取到數組的結尾，如果傳入兩個參數，則從開始下标到結束下标。
使用splice()方法，插入的項是從移除的下标那項開始添加。
(6):轉換方法toString()和join()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數組中轉換方法</title>
</head>
<body>
<script type="text/javascript">
var colors=['red','green','blue'];//建立一個包含三個字元串的數組
//1:測試toString()方法
console.log(colors.toString()); //red,green,blue
//2：測試join()方法
var item=['red','blue','green'];
console.log(item.join('|'));//red|blue|green
console.log(item.join('||'));//red||blue||,green
</script>
</body>
</html> (7):疊代方法some()、filter()、map()、forEach()、every()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數組中的疊代方法</title>
</head>
<body>
<script type="text/javascript">
//疊代方法:every(),filter(),forEach(),map(),some()
//傳遞參數，數組項的值，數組中的位置，數組對象本身
var numbers=[1,2,3,4,5,4,3,2,1];
//1:測試erery()函數
var everyResult=numbers.every(function(item,index,array){
return item>2;
});
console.log(everyResult);//false
//2:測試some()函數
var someResult=numbers.some(function(item,index,array){
return item>2;
});
console.log(someResult);//true
//3:測試filter()函數
var filterResult=numbers.filter(function(item,index,array){
return item>2;
});
console.log(filterResult);//3,4,5,4,3
//4：測試map()函數
var mapResult=numbers.map(function(item,index,array){
return item*2;
});
console.log(mapResult);//2,4,6,8,10,8,6,4,2
//5：測試forEach()函數
numbers.forEach(function(item,index,array){
//執行某些操作
console.log(item);//1,2,3,4,4,3,2,1
})
</script>
</body>
</html> 在這些方法中，最相似的是every()和some()，它們都有用于查詢數組中的項是否滿足某個條件，對于every()來說，傳入的函數必須對每一項都傳回true,這個方法才會傳回true,否則，它就會傳回false，而some()方法隻要傳入的函數對數組中的某一項傳回true,它就會傳回true。
(8):歸并方法reduce()和reduceRight()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>數組中的歸并方法</title>
</head>
<body>
<script type="text/javascript">
//歸并方法：reduce()和reduceRight()
//傳遞參數：前一個值，目前值，項的索引，數組對象
var array=[1,2,3,4,5]
//1：測試reduce()方法
var sum1=array.reduce(function(prev,cur,index,array){
return prev+cur;
});
console.log(sum1);//15
//2：測試reduceRight()方法
var sum2=array.reduceRight(function(prev,cur,index,array){
return prev+cur;
});
console.log(sum2);//15
</script>
</body>
</html>
使用reduce()還是reduceRight()，主要取決于要從哪頭開始周遊數組。除此之外，它們完全相同。
總結
數組中如此之多的方法，我們并不是每一個都需要記憶，隻需找到規律然後對數組中的方法進行分組便可以實作很好的記憶方式。如：Array.pop()和Array.push()，Array.shift()和Array.unshift(),Array.slice()和Array.splice(),Array.some()和Array.every()，Array.reduce()和Array.reduceRight()。
轉載于:https://www.cnblogs.com/jjgw/p/11608609.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)