javascript中數組類型的屬性和方法

時間 2019-12-10

原文原文鏈接

和Object同樣，Array類型也是ECMAScript中最經常使用的類型了。前端

ECMAScript的數組雖然也是數據的有序列表，但仍是與其餘語言中的數組有很大的區別。好比ECMAScript數組每一項均可以保存任何類型的數據，並且數組的大小能夠隨着數據的添加自動的增加以容納新數據。數組

1.建立數組框架

建立數組的基本方式有兩種：（1）經過構造函數 new Array();（2）經過數組字面量 var arr = [];函數

1 //第一種，使用Array構造函數
2 var arr1 = new Array();                       //建立空數組
3 var arr2 = new Array(20);                     //使用構造函數建立數組時，若是隻傳入一個數字，則該數字表明數組的長度，如：建立數量爲20的數組（即 arr.length=20）
4 var arr3 = new Array("red", "blue", "grey");  //建立一個包含3個字符串值的數組
5 
6 //第二種，使用數組字面量表示法
7 var arr = ["red", "blue", "grey"];            //數組項之間以逗號隔開，使用字面量時只傳入一個數字，表示數組只有一項數據。

建立了數組後，可使用方括號和基於0（從0開始）的數字索引讀取和設置數組的值（如colors[0]）。訪問數組時，若是索引值小於數組長度，則返回對應項的值。設置數組的值時語法相同，但會替換對應位置的值。spa

數組的length屬性，返回數組的長度，能夠根據數組的length屬性向數組追加值，如：arr[arr.length] = 123;code

但若是索引值大於或等於數組長度，數組就會自動增長到該索引值加1的長度。以下所示：對象

1 var colors = ["red", "blue", "grey"];
2 colors[9] = "green";
3 alert(colors.length);                 //10

數組的長度變爲10，但位置3至8實際都是不存在的，被訪問時都將返回underfined。blog

另外，直接設置數組的length屬性，能夠從數組的末尾移除或添加項，即屬性length是可讀可寫的：排序

1 //移除第3項（索引值爲2）
2 var colors = ["red", "blue", "grey"];
3 colors.length = 2;
4 alert(colors[2]);      //underfined

原數組中尾項已被移除，故已沒法訪問。但考慮到變量值爲underfined有兩種狀況：變量未被定義，或變量未初始化。因此，當經過設置length值來增加數組長度時，新增的每一項的值也都是underfined。故沒法經過訪問具體一項數組的值來肯定數組的長度是否被改變。索引

清空數組的方法：

（1）arr.aplice(0,arr.length);利用數組的splice方法，刪除數組的所有值；

（2）arr.length = 0;數組的length屬性是能夠直接賦值的；

（3）arr = [];直接把數組指向一個空數組（推薦）；

2.檢測數組

　　ECMAScript提供instanceof操做符，檢測對象具體是什麼類型。A instanceof B：A是否是一個經過B創造出來的實例，是返回true,不是返回false，但用於檢測數組，instanceof只能在一個全局做用域中達到使人滿意的效果。

　　在包含多個框架的網頁中，存在兩個以上不一樣的全局做用域，從而存在兩個以上不一樣版本的Array構造函數。若從一個框架向另外一個框架傳入數組，那傳入的數組與傳入的框架中原生建立的數組具備不一樣的構造函數，instanceof可能將它們視做不一樣的對象。

　　因此，ECMAScript5新增了Array.isArray()方法，目的只爲肯定某值是否是數組（是則返回true），不考慮全局執行環境。

3.轉換字符串方法

toString() 把數組轉化成字符串
valueOf() 返回數組對象自己
```
1 var colors = ["red", "blue", "grey"];
2 alert(colors.toString());   //red,blue,grey
3 alert(colors.valueOf());    //red,blue,grey
4 alert(colors);              //red,blue,grey
```
toString()方法返回數組中每一個值的字符串形式拼接成的以逗號隔開的字符串。調用valueOf()方法返回的仍是數組。而alert()會在後臺調用toString()方法，因此會獲得與直接調用toString()方法相同的結果。

toLocaleString()

　　調用toLocaleString()也會返回一個數組值的以逗號分隔的字符串，與toString()方法的區別在於它調用的是數組每一項的toLocaleString()方法。

join() 把數組的每一項以特定的方式拼接；
```
var colors = ["red", "blue", "grey"];
alert(colors.join());        //red,blue,grey
alert(colors.join("&"));     //red&blue&grey
```
join()方法能夠接收一個用做分隔符的字符串爲參數，以分隔數組值。當它不傳入參數時，則默認使用逗號做爲分隔符。
join方法的原型：

function join(arr,ele){
  var temp = arr[0];
  for( i = 1 ; i <arr.length ; i++){
    temp +=ele + arr[i];      
  }
   return temp;   
}

4.棧方法

ECMAScript爲數組提供了push()和pop()方法，以實現相似棧的行爲（從數組末尾添加和刪除）。　

方法	接收參數	對數組影響	返回值
push()	能夠接收任意數量的參數	將參數逐個添加到數組末尾	返回修改後的數組的長度
pop()	不接收參數	從數組末尾移除最後一項，減小數組length值	返回移除的項

5.隊列方法　　

除棧方法外，還有shift()和unshift()方法，與push()和pop()結合，能夠實現相似隊列的行爲。

方法	接收參數	對數組影響	返回值
shift()	不接收參數	移除數組中的第一項	返回移除的項
unshift()	能夠接收任意數量的參數	將參數逐個添加到數組前端	返回修改後的數組的長度

shift()和push()方法結合，能夠在數組末尾添加，在頭部刪除。

而結合unshift()和pop()方法，能夠從相反的方向模擬隊列。

6.重排序方法

　　數組中存在兩個能夠直接用來重排序的方法：reverse()和sort()。

　　reverse()方法能夠直接反轉數組項的順序，但也只有這一項功能：

1 var arr = [1,2,3,4,5];
2 arr.reverse();
3 alert(arr);             //5,4,3,2,1

reverse方法原型：

function reverse(arr){
  for( i = 0; i < arr.length/2; i++ ){
     var temp = arr[i];
     arr[i] = arr[arr.length - 1 - i];
     arr[arr.length-1-i] = temp;
  };
 return arr;
}

sort()方法則能夠靈活地對數組排序，默認狀況下是按升序排列數組項。

sort()方法的原理是對數組每一項調用toString()轉型方法，得到字符串後進行比較。因此不論數組項的數據是什麼類型，sort()方法都是當作字符串比較。因此在某些狀況下，sort()方法不能給出使人滿意的效果，以下：

1 var arr = [10,2,13,4,5];
2 arr.sort();
3 alert(arr);              //10,13,2,4,5

　　改進後，sort()方法能夠接收一個比較函數做爲參數，比較函數則能夠接收兩個進行比較的參數。

　　若函數返回負數，表示參數1應該位於參數2以前；返回0，則表示相等；返回正數，則表示參數1應位於參數2以後。以下，是一個讓sort()方法按升序排列的比較函數：

1 //比較函數
2 function compare(value1,value2){
3     return value1 - value2;
4 } 
5  
6 var arr = [10,2,13,4,5];
7 arr.sort(compare);
8 alert(arr);              //2,4,5,10,13

數組的冒泡排序：升序；

function ascending(arr){
  for( i = 0; i < arr.length -1; i++ ){
       var flog = true;
       for( j = 0; j < arr.length -1 -i ;j++){
           if( arr[j] > arr[j+1] ){
              flog = false;
              var temp = arr[j+1];
              arr[j+1] = arr[j];
              arr[j] = temp;
            }    
       };
    if( flog ){
      break;    
    };  
  };
 return arr;  
}

數組的去重：

function remdup(arr){
for( i = 0 ; i < arr.length -1 ; i++){
for( j = i +1 ; j < arr.length ; j++){
if( arr[i] == arr[j] ){
arr.splice(j,1);
};
};
};
return arr;
};

第二種方法，建立一個新數組，把原數組中的值插入到新數組中，若是有相同的值，則不添加：

var data = ['blue', 'red', 'green', 'blue'];

function newData(data) {
    var nData = new Array();
    for (var i = 0; i < data.length; i++) {
        if (nData.indexOf(data[i]) == -1) {
            nData.push(data[i]);
        }
    }
    return nData;
}
newData(data);

7.操做方法

　　上文中提到push()方法、pop()方法、shift()方法和unshift()，能夠對數組的頭部和末尾進行添加或是刪除的操做。對於包含在數組中的項的操做，ECMAScript也提供了一些方法。

1) concat()方法

　　此方法先建立一個當前數組的副本，若無參數，則只複製當前數組、返回該副本；若傳入參數（參數能夠是一或多個數組，或者直接是數據值），則將參數值都添加到副本數組中，並返回結果數組。

1 var colors1 = ["red", "blue", "grey"];
2 var colors2 = colors1.concat("green", ["black", "white"])
3 alert(colors1);        //red,blue,grey
4 alert(colors2);        //red,blue,grey,green,black,white

　　須要注意，concat()方法不影響原來的數組。

2) slice()方法

　　slice()方法能夠基於當前的數組中的一項或多項建立一個新數組，接收一個或兩個參數。

　　接收一個參數時，返回從該參數指定位置到當前數組末尾的全部項；接收兩個參數時，返回起始位置（參數1）到結束位置（參數2）的全部項，但返回的項中不包括結束位置對應的項，如參數爲1和4時，表示複製當前數組從位置1到位置3的項。見下列例子：

1 var colors1 = ["red", "blue", "grey"， "green", "black", "white"];
2 var colors2 = colors1.slice(1)；
3 var colors3 = colors1.slice(1，4)；
4 
5 alert(colors2);        //blue,grey,green,black,white
6 alert(colors3);        //blue,grey,green

　　slice()方法一樣不影響本來的數組。

3) splice()方法

　　splice()方法能夠說十分強大，能夠對數組中的任意位置進行刪除、插入和替換。

　　刪除：傳入兩個參數——要刪除的第一項的位置、要刪除的項數，如colors.splice(0,2)會刪除數組的前兩項。

　　插入：傳入3個以上參數——起始位置、0、要插入的任意數量的項。第二項固定爲0，表示刪除0項。如colors.splice(2,0,"red", "black")會在數組位置2開始插入字符串。

　　替換：結合刪除和插入功能，在被刪除的項的位置插入新的項，就能夠達到替換的效果，可接收3個以上參數——起始位置、要刪除的項數、要插入的任意數量的項。

　　見以下例子：

1 var colors1 = ["red", "blue", "grey"];
2 var colors2 = colors1.splice(0,1)；                      //刪除
3 var colors3 = colors1.splice(1, 0, "green", "black")；   //插入
4 var colors4 = colors1.splice(1, 1, "white")；            //替換
5  
6 alert(colors2);        //blue,grey
7 alert(colors3);        //red, green, black, blue,grey
8 alert(colors4);        //red, white, grey

8.位置方法

　　ECMAScript5新增了indexOf()和lastIndexOf()兩個位置方法，接收兩個參數——要查找的項、查找起點位置的索引（可不選）。indexOf()從數組頭部向後查找，lastIndexOf()則是從數組末尾向前查找，返回的都是要查找的項在數組中的位置（若未找到則返回-1）。

　　須要注意的是，比較要查找的項和數組中的每一項時，會使用全等操做符（===），表示要查找的項必須嚴格相等（類型和值都一致）。

查找數組中每一項出現的次數：

function cishu(arr){
   var obj = {};
   for( i = 0; i < arr.length; i++){
       if( obj[arr[i]] ){
         obj[arr[i]]++;
       }else{
        obj[arr[i]] = 1;
       }
    }
   return obj;
}

9.迭代方法

　　ECMAScript5提供的5個迭代方法，都是接收兩個參數——在數組每一項上運行的函數、運行該函數的做用域對象（可不選）。而做爲參數的函數又能夠接收三個參數——數組項的值、該項在數組中的位置、數組對象自己。

方法	返回
every()	參數函數對數組每一項都返回true，則返回true
filter()	返回該參數函數返回true的項組成的數組
forEach()	無返回值，只對數組每一項運行參數函數
map()	返回每次參數函數調用的結果組成的數組
some()	參數函數對數組有任何一項返回true，就返回true

　　舉一例：

1 var numbers = [10, 2, 23, 14, 7,18];
2 
3 var filterResult = number.filter(function(item, index, array){
4     return (item > 10);
5 });
6 
7 alert(filterResult);       //23,14,18

10.歸併方法

　　ECMAScript新增了reduce()和reduceRight()兩個方法，用以歸併數組。兩個方法都接收兩個參數——在數組每一項上調用的函數、做爲歸併基礎的初始值。傳入的函數又能夠接收4個參數——前一個值、當前值、項的索引和數組對象，用以迭代數組全部的項。

　　reduce()方法從數組第一項開始向後遍歷，reduceRight()則是從相反方向遍歷。見以下求和例子：

1 var numbers = [10, 2, 23, 15];
2 var sum = numbers.reduce(function(pre, cur, index, array){
3     return (pre + cur);
4 });
5 alert(sum);        //50

　　兩個歸併方法迭代數組全部的項，而後只構建一個最終返回的值，這是和5個迭代方法最大的差異。