javascript中數組常用的方法和屬性
- 2019 年 10 月 3 日
- 筆記
前言
在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()。
