JavaScript數組方法全面的總結

1. 檢測對象是否是數組

instanceof操做符

Array.isArray()方法

var color = new Array("red", "green");
   console.log(Array.isArray(color));   //true

2. 轉換方法

toString()

該方法會輸出每一項，並以','鏈接，實際上該方法會調用數組中每一項的toString()方法，而後拼接獲得的每一項的字符串。

var color = new Array("red", "green");
 console.log(color.toString());   // red,green
 alert(color);            // red,green
 console.log(color);            // ["red","green"]

toLocaleString()

該方法會輸出每一項，並以','鏈接，實際上該方法會調用數組中每一項的toLocaleString()方法，而後拼接獲得的每一項的字符串。通常都會返回與toString()相同的值

var color = new Array("red", "green");
 console.log(color.toLocaleString());   // red,green

valueOf()

該方法輸出整個數組的字符串形式

var color = new Array("red", "green");
 console.log(color.valueOf());   // ["red","green"]

join()

該方法接收一個字符串，而後以該字符串爲間隔，將數組中的每一項拼接起來

var color = new Array("red", "green");
 console.log(color.join('&&'));   // red&&green

3. 棧方法和隊列方法

棧方法push()和pop()

棧是一種LIFO("LAST-In-First-Out"後進先出)的數據結構。
有兩個方法，push()和pop().

• push()接受一個或者多個參數，將它們添加到數組末尾處，返回添加後數組的長度

• pop()則從數組中移除最後一項，並返回該項的值。

隊列方法unshift()和shift()

隊列是一種FIFO("First-In-First-Out"先進先出)的數據結構。
有兩個方法，unshift()和shift().

• unshift()與push()相似，只不過是在數組的最前面添加一項或多項

  var color = new Array("red", "green");
  color.unshift("blue","yellow");
  console.log(color);            // ["blue", "yellow", "red", "green"]

• shift()與pop()相似，是返回數組的最前面一項

4. 排序方法

有兩種排序方法，reverse()和sort()。

reverse()

reverse()方法會反轉數組項的順序。

sort()

sort()默認按照升序從新排列數組，而順序的決定是由每一項轉換爲字符串後進行比較的。

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values)   //   [0, 1, 10, 15, 5], 由於轉換爲字符串後，10在5前面

sort()還能夠接受一個函數做爲參數，根據函數的返回值進行排序。這個函數接受兩個值做爲參數，排序原則以下：
參數1在參數2前面，返回負數，參數1在參數2後面，返回正數，兩個參數相等，則返回0.

// 先建立一個簡單的比較函數，該函數接受兩個值作參數,本函數按照升序排列
function compare(value1, value2){
    if(value1 < value2){
      return -1;
  }else if(value1 > value2){
      return 1;
  }else {
      return 0;
  }
}
// 而後將該函數傳入sort()方法中進行比較
var values = [0, 5, 1, 15, 10];
values.sort(compare);
console.log(values);          // [0, 1, 5, 10, 15]

sort()內部是根據冒泡法排序的，不斷比較兩個數的大小。

5. 操做方法

拼接數組concat()

該方法能夠接收一個或多個參數，並新建一個當前數組的副本，將參數拼接到該副本末尾，而後返回該副本數組。
參數主要有兩種類型:

1. 參數是數組，則將數組中的每一項添加到副本數組的末尾

2. 參數不是數組，則直接將其添加到副本數組的末尾

裁減數組slice()

該方法基於當前數組建立一個新的數組，接收一個或者兩個參數，用於指定返回項的起始和結束位置。

1. 當值傳入一個參數時，返回從參數指定位置開始到數組末尾的全部項

2. 當傳入兩個參數時，返回起始和結束位置之間的的但不包括結束位置的項。

3. 兩個參數都可以接收負數,會以數組的長度值加上該負數，而後計算須要返回的項。

修改數組splice()

該方法能夠增長，減小或修改數組中的一項或多項。該方法接收一個或多個參數，先從指定位置刪除項，而後添加任意數量的項。
該方法始終會返回一個數組，數組中包含被刪除的返回項。

• 參數1指定須要刪除的項的起始位置

• 參數2指定須要刪除的項的數量

• 參數3-參數n指定須要向數組中添加的項

因此根據傳入參數的數量，有如下狀況：

1. 不傳入參數，則不對數組作任何改變

   var array = [1,2,3,4];
   console.log(array.splice());   // []
   console.log(array);            // [1,2,3,4]

2. 傳入一個數值參數，則從數組中刪除指定位置和數組末尾之間的全部項

   var array = [1,2,3,4];
    console.log(array.splice(2));   // [3,4]
    console.log(array);        // [1,2]

3. 傳入兩個數值參數，則刪除數組中從指定位置開始的指定數量的項

   var array = [1,2,3,4];
    console.log(array.splice(2,1));    // [3]
    console.log(array);        // [1,2,4]

4. 傳入三個或三個以上的參數，則先刪除指定位置開始的指定數量的項，而後在該位置添加其餘參數所指示的項

   var array = [1,2,3,4,5,6];
    console.log(array.splice(2,1,"red","green"));    // [3]
    console.log(array);            // [1, 2, "red", "green", 4, 5, 6]

copyWithin()

copyWithin()方法在數組內部將一部分複製到另外一部分，而不改變數組的大小，而後返回修改後的數組。該方法接收一個至三個參數。參數含義以下：

• 第一個參數是一個索引值，被複制的序列將放到以該索引爲起始的位置上。爲必需參數。

• 第二個參數表明將要被複制的部分的起始位置。非必需參數，默認爲0。

• 第三個參數表明將要被複制的部分的結束位置，不包括結束位置。非必需參數，默認爲array.length-1

以上三個參數都接收負值，會自動加上數組的長度值，轉換爲正值。看一些例子吧。

[11, 22, 33, 44, 55].copyWithin(-2);    //  [11, 22, 33, 11, 22]

上面代碼複製到的索引位置是 5-2=3,因爲後兩個參數沒有，因此複製的值是[11,22,33,44,55],可是因爲該方法不改變數組的大小，因此僅僅是將11和22複製到44和55的位置。

[11, 22, 33, 44, 55].copyWithin(0, 3); //  [44, 55, 33, 44, 55]

上面的代碼複製到的索引位置是 0，複製區域開始的索引位置是3,第三個參數沒有，因此會一直複製直到末尾，複製的值是[44,55], 覆蓋了11和22

[11, 22, 33, 44, 55].copyWithin(1, 3, 4);// [11, 44, 33, 44, 55]

上面的代碼複製到的索引位置是1，複製區域開始的索引位置是3,第三個參數是4，因此只會複製位置3的值44，覆蓋了22

fill()

該方法在指定位置處填充一個固定的值。方法接收三個參數:

• param1，指定填充的值。必需參數。

• param2, 指定填充開始的位置。非必需參數，默認爲0

• param3, 指定填充結束的位置，但不包括結束的位置。默認爲數組的長度值。

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]

6. 位置方法

數組有兩個位置方法indexOf()和lastIndexOf()。兩個方法都接收一個或兩個參數，第一個參數指定要查找的項，第二個參數是可選的，表示查找開始的位置。兩個方法的區別是indexOf()從前日後開始查找，返回指定項第一次出現的位置，lastIndexOf()從後往前開始查找，返回指定項第一次出現的位置。若沒有查找到指定項，則兩個方法均返回-1。

1. 傳入一個參數

   var array = ['H', 'E', 'L', 'L', 'O'];
   console.log(array.indexOf('L'));       //      2
   console.log(array.lastIndexOf('L'));       //  3

2. 傳入兩個參數

   var array = ['H', 'E', 'L', 'L', 'O'];
   console.log(array.indexOf('L', 3));   // 3 ,忽略了array[2]
   console.log(array.lastIndexOf('L', 2));   // 2 忽略了array[3]

有兩個須要注意的事項，

1. 數組中的項和傳入參數做比較時，用的是===全等號，即必須嚴格相等

2. lastIndexOf()返回的索引值是基於正序的索引值，而非基於倒序的索引值

   var array = ['H', 'E', 'L', 'L', 'O'];
   console.log(array.lastIndexOf('O'));     // 返回4，而非0

7. 歸併方法

有兩個歸併數組的方法reduce()和reduceRight()。這兩個方法都會迭代數組中的全部項，而後構建一個返回值，其中reduce()從數組的第一項開始，遍歷到最後，reduceRight()從最後一項開始，遍歷到第一項。
這兩個方法都接收兩個參數: 第一個參數是在每一項上調用的函數，第二個參數是可選的，做爲歸併基礎的初始值。
做爲第一個參數的函數接收4個參數: 前一個值，當前值，當前項的索引和該數組對象。這個函數返回的值，將做爲下一次迭代操做中函數的第一個參數。函數的第二個參數是數組的下一項。
第一次迭代發生在數組的第二項上，函數的第一個值是數組的第一項，第二個參數是數組的第二項。

• 傳入一個參數

  function add(prev, curv, index, array){
      return prev + curv;
  }
  var values = [1, 2, 3, 4, 5];
  var sum = values.reduce(add);
  console.log(sum);         //15

  上面的代碼中，第一次迭代中，傳入add()中的參數以下:prev = 1, curv = 2,index = 1,array = values,第一次迭代後，add()函數返回值是1+2=3。
  第二次迭代中，傳入add()中的參數以下:prev = 3，curv = 3,index = 1,array = values,第二次迭代後，add()函數返回值是3+3=6。依次向後迭代...
  reduceRight()則是從最後一項開始往前迭代。

• 傳入兩個參數
  傳入兩個參數時，第二個參數將做爲歸併基礎的初始值。也就是說，傳入該參數後，用該參數加上後面最終迭代獲得的值。

  function add(prev, curv, index, array){
     return prev + curv;
  }
  var values = [1, 2, 3, 4, 5];
  var sum = values.reduce(add, 10);
  console.log(sum);         // 25,  在迭代獲得的值上面加上了10

8. 建立數組的新方法

Array.from()

該方法基於一個類數組的對象或可迭代的對象，建立一個新的數組實例。該方法接收一至三個參數，各個參數以下：

1. 參數1是一個類數組對象或可迭代對象，方法基於該對象建立數組。函數的返回值將做爲新數組中的每一項的值。必需的參數。

2. 參數2是一個函數，數組的每一項都會調用該函數。非必需參數。

3. 參數3指定在參數2中，this所表明的對象。非必需參數。

類數組對象是具備length屬性並含有被編上索引的元素的對象，如NodeList對象。
可迭代對象是能夠得到其中的元素的對象，如Map和Set

var str = "hello";
Array.from(str, x => x + x);      // ["hh", "ee", "ll", "ll", "oo"]

上面的代碼中接收一個字符串爲第一個參數，接收箭頭函數做爲第二個參數。在箭頭函數中，對每一項作了複製操做，而後返回獲得的值，做爲數組的每一項。

Array.of()

該方法接收一系列參數，並以這些參數爲項，建立一個數組，並返回該數組。

var arra = Array.of("red", "green", "blue");
console.log(arra);         //  ["red", "green", "blue"]

該方法與構造函數Array()相似，但有一點不一樣。當接收到只有一個數值類型的參數時，Array()會建立一個數值參數指定的長度的數組，而Array.of()會將該數值做爲數組中的項添加進數組。

var arra1 = new Array(7);
console.log(arra1);     //  [undefined × 7]
var arra2 = Array.of(7);
console.log(arra2);     //  [7]

9. 迭代方法

every()

該方法接收一個函數做爲參數，對數組中的每一項運行該函數，若對每一項，指定函數都返回true，則最終every()方法返回true。該方法還接收一個可選的第二個參數，指定在運行函數時，函數中this所表明的對象。

var num = [1,2,3];
console.log(num.every( value => {
    if(value > 0){return true;}
    return false;
}));  // true，由於每一項都大於0
console.log(num.every( value => {
    if(value > 1){return true;}
    return false;
})); //false，由於1-1=0，轉換爲布爾值是false

some()

該方法與every()對應，every()是全部項均返回true，最終才返回true，some()是隻要有至少一個返回true,該方法就會返回true.

var num = [1,2,3];
console.log(num.some( value => {
    if(value > 1){return true;}
    return false;
}));  // true，由於至少有一項大於1
console.log(num.some( value => {
    if(value > 3){return true;}
    return false;
})); //false，都不大於3

filter()

該方法接收一個函數做爲參數，對數組中的每一項運行該函數，若對某一項，指定函數返回true，則將該項添加到一個新建的數組中，最後返回該數組。該方法還接收一個可選的第二個參數，指定在運行函數時，函數中this所表明的對象。

var num = [1,2,3];
    console.log(num.filter( value => {
   if(value > 0){return true;}
   return false;
    }));  // [1,2,3]
    console.log(num.filter( value => {
   if(value > 1){return true;}
   return false;
    })); // [2, 3]

forEach()

該方法接收一個函數做爲參數，對數組中的每一項運行該函數，該方法沒有返回值。做用於for循環相似。
該方法還接收一個可選的第二個參數，指定在運行函數時，函數中this所表明的對象。

map()

該方法接收一個函數做爲參數，對數組中的每一項運行該函數，返回由該函數的返回值組成的數組。該方法還接收一個可選的第二個參數，指定在運行函數時，函數中this所表明的對象。

var num = [1,2,3];
console.log(num.map( value => { return value * value; }));     // [1, 4, 9]

find()

該方法接受一個函數做爲參數，對數組中的每一項運行該函數，直到某一次運行後返回true，此時，該方法將返回該項的值。若全部項的運行結果都是fase,最終將返回undefined。因此該方法並不必定遍歷數組中全部項。該方法還接收一個可選的第二個參數，指定在運行函數時，函數中this所表明的對象。

var num = [1,2,3];
console.log(num.find( value => {
    if(value === 2){return true;}
    return false;
}));  // 2

看以下代碼

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries));
// { name: 'cherries', quantity: 5 }

findIndex()

該方法與find()相似，只不過當找到符合條件的項時，會返回該項的索引值。

var num = [1,2,3];
  console.log(num.findIndex( value => {
    if(value === 2){return true;}
    return false;
}));  // 1

注意:以上方法中，接收的做爲參數的函數，均可以接受三個參數，分別是數組每一項的當前值，當前索引值，以及調用方法的數組自己.

var num = [1,2,3];
num.forEach( (value, index, array) => {
    console.log("數組爲->"+array + ":");
    console.log(index + "->" + value);
});
// 數組爲->1,2,3: 0->1
// 數組爲->1,2,3: 1->2
// 數組爲->1,2,3: 2->3

10. 其餘方法

entries()

entries()方法返回一個新建的數組迭代對象，對象中包含了每一項的key/value組成的數組。看代碼

var a = ['a', 'b', 'c'];
  var iterator = a.entries();
  for(let e of iterator){
     console.log(e);
  }
  // [0, 'a']
  // [1, 'b']
  // [2, 'c']

keys()

該方法返回一個可迭代對象，其中包含了數組中每一項的索引值

var arr = ['a', 'b', 'c'];
 var iterator = arr.keys();

 console.log(iterator.next()); // { value: 0, done: false }
 console.log(iterator.next()); // { value: 1, done: false }
 console.log(iterator.next()); // { value: 2, done: false }
 console.log(iterator.next()); // { value: undefined, done: true }

values()

該方法於keys()方法對應，也是返回一個可迭代對象，其中包含數組中每一項的值

var a = ['w', 'y', 'k', 'o', 'p'];
    var iterator = a.values();

    console.log(iterator.next().value); // w
    console.log(iterator.next().value); // y
    console.log(iterator.next().value); // k
    console.log(iterator.next().value); // o
    console.log(iterator.next().value); // p

includes()

該方法用於查找數組中是否包含等於指定值的項。接收兩個參數:

• param1,指定被查找是否存在於數組中的值，必須。

• param2,指定查找開始的索引值,默認爲0，非必需。當傳入負值時，將加上數組的長度值。

  [1, 2, 3].includes(4);     // false
  [1, 2, 3].includes(3, 3);  // false
  [1, 2, 3].includes(3, -1); // true
  [1, 2, NaN].includes(NaN); // true