Array陣列型別詳解

在ECMAScript中除了object型別之外，Array陣列用的是最常用的型別。ECMAScript陣列可以在每一項儲存任何型別的值，無需指定陣列的長度，還可以隨著資料的增長來增加陣列長度，這些是和其他語言的陣列不同的。

1.陣列的建立方法

陣列字面量方式

var arr = [1,2,3,4,5];// 簡單直接用中括號包裹構建陣列

陣列建構函式

var arr = new Array(1,5);// 通過內建Array物件構建陣列

2.檢測陣列

instanceof操作符，在全域性環境下可以檢測物件是否為陣列，但是如果頁面上存在多個框架時就會存在兩種以上的全域性環境，這時候這種方法就有些問題。console.log(arr instanceof Array); // true

Array.isArray()方法就解決了上面的問題，可以快速的檢測物件是否為陣列。console.log(Array.isArray(arr)); // true

3.轉換方法

使用toString()方法可以使陣列返回字串。

var arr = [1,4];
console.log(arr.toString()); // 1,4

toLocaleString()方法也可以實現

var arr = [1,4];
console.log(arr.toLocaleString()); // 1,4

4.棧方法

ECMAScript為陣列提供了一種類似於其他語言陣列的方法（棧方法），棧是一種資料結構，主要講究先進後出；

• push()方法向陣列末尾新增元素(可以新增多項)
• pop()方法向末尾刪除最後一項(一次只能刪除一項)
  

 var arr = [1,4];
 arr.push(5,6,7); // 向末尾新增5,7
 console.log(arr); //輸出[1,5,7]
 arr.pop(); // 刪除最後一項
 console.log(arr); //輸出[1,6]

5.佇列方法

佇列方法講究先進先出，在列表的末尾新增項，開頭刪除項。

• push()方法上面講到了末尾新增一項或多項
• shift()方法開頭刪除
  

 var arr = [1,7]
 arr.shift(); // 刪除第一項
 console.log(arr); //輸出[2,7]

• pop()方法刪除末尾最後一項
• unshift()方法向開頭新增一項或多項元素
  

var arr = [1,4];
arr.unshift(5,7); // 向開頭新增5,7
console.log(arr); //輸出[1,7]
arr.pop(); // 刪除最後一項
console.log(arr); //輸出[5,7,1,3]

6.重排序方法

reverse()反轉陣列改變順序

var arr = [1,5];
arr.reverse();
console.log(arr); //輸出[5,1]

sort()方法比較的是字串，一個一個的字串進行比較，數值小的在前面，

var arr = [1,13,40,15];
arr.sort();
console.log(arr); //輸出[1,15,6]

7.操作方法

concat()方法基於當前陣列建立一個副本，向後面新增新的物件，然後返回新的陣列concat()方法不會影響原陣列。

 var arr = [1,15];
 var arr2 = arr.concat(2,2);
 console.log(arr); //輸出[1,15]
 console.log(arr2); //輸出[1,2]

slice()方法可以接受一個或者兩個引數，第一個引數表示起始位置，第二個表示結束位置，slice()方法返回起始位置到結束位置的陣列slice()方法不會影響原陣列。

 var arr = [1,15];
 var arr2 = arr.slice(2);
 var arr3 = arr.slice(1,3);
 console.log(arr); //輸出[1,15]
 console.log(arr2); //輸出[13,15]
 console.log(arr3); //輸出[6,13]

splice()方法，這個方法在我認為算是數組裡面最強大的方法啦！他可以傳入三個引數，第一個引數起始位置，第二個引數要刪除的項，第三個引數新增或者替換的物件。可以利用splice()方法對陣列進行刪除、新增、替換等操作splice()方法會影響原陣列。

var arr = [1,5];// 刪除操作
var arr2 = arr.splice(1,3); // 從下標為1開始刪除3項
console.log(arr); //輸出[1,5] 原陣列只剩下第一位和最後一位
console.log(arr2); //輸出[2,4] 被刪除的物件生成陣列

var arr = [1,5]; // 插入
var arr2 = arr.splice(1,2);// 從下標1開始插入2,2兩個物件
console.log(arr); //輸出[1,5]
console.log(arr2); //輸出[] 因為沒有刪除物件所以返回空陣列

var arr = [1,5]; // 替換
var arr2 = arr.splice(1,2); // 從下標1開始先刪除兩項然後替換為2,2
console.log(arr); //輸出[1,5]
console.log(arr2); //輸出[2,3] 被刪除的元素

8.位置方法

查詢陣列位置方法有兩種，indexOf()和lastIndexOf()方法都可以接收兩個引數，要查詢的項和（可選）查詢起始項位置的索引。indexOf()是從前往後找，lastIndexOf()是從後往前找。

 var arr = [1,5];
 console.log(arr.indexOf(2)); //1 返回下標的位置
 console.log(arr.indexOf(2,3)); //-1 從下標3位置開始往後找，沒有找到2返回-1
 console.log(arr.lastIndexOf(2,3)); //1 從下標3位置開始往前找

9.迭代方法

ECMAScript5為陣列提供了五種迭代方法，每種方法都有兩個引數，要在每一項上執行的函式和（可選）執行該函式的作用域物件——影響this的值。傳入這些方法的函式會接受三個形參（item,index,array）：陣列項的值、陣列物件在陣列中的位置、陣列物件本身。

every()給定函式後，如果該函式對每一項都返回true，則返回true。

var arr = [1,5];
var arr2 = arr.every(function(item,array){
  return item > 3;
});
console.log(arr2); // false 必需每項都滿足條件才可以

filter()給定函式後，返回true的項組成的陣列。

 var arr = [1,5];
 var arr2 = arr.filter(function(item,array){
  return item > 3;
 });
 console.log(arr2); // 4,5 只有4,5滿足條件

forEach() 給定函式後，這個方法沒有返回值。本質上和for迴圈一樣

var arr = [1,5];
arr.forEach(function(item,array){
  console.log(item); // 1,5
});
console.log(arr); // [1,5] 不會改變原陣列也沒有返回值

map()給定函式後，返回每次函式呼叫的結果組成的陣列。

var arr = [1,5];
var arr2 = arr.map(function(item,array){
  return item * 2;
});
console.log(arr2); // [2,8,10] 

some()給定函式後，如果該函式任一項返回true，則返回true。

 var arr = [1,5];
 var arr2 = arr.some(function(item,array){
   return item > 4;
 });
 console.log(arr2); // true 5>4返回true

10.縮小方法

ECMAScript5新增了2兩個縮小陣列的方法，reduce()和reduceRight()。這兩個方法都會迭代陣列所有的項，reduce()是從第一項到最後一項迭代，reduceRight()則是相反的。這兩個方法可以接收兩個引數，要執行的函式和（可選）做為縮小基礎的初始值。執行函式可以傳入四個引數（prev,cur,array）：前一個值、當前值、陣列物件索引、陣列物件本身。

var arr = [1,5];
var arr2 = arr.reduce(function(prev,array){
  return prev * cur;
});
console.log(arr2); // 120 前一項乘後一項

總結

到此這篇關於JavaScript陣列型別Array相關的屬性與方法的文章就介紹到這了,更多相關js陣列Array的屬性與方法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！