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()

该方法可以接收一个或多个参数，并新建一个当前数组的副本，将参数拼接到该副本末尾，然后返回该副本数组。
参数主要有两种类型:

参数是数组，则将数组中的每一项添加到副本数组的末尾
参数不是数组，则直接将其添加到副本数组的末尾

裁减数组slice()

该方法基于当前数组创建一个新的数组，接收一个或者两个参数，用于指定返回项的起始和结束位置。

当值传入一个参数时，返回从参数指定位置开始到数组末尾的所有项
当传入两个参数时，返回起始和结束位置之间的的但不包括结束位置的项。
两个参数均可以接收负数,会以数组的长度值加上该负数，然后计算需要返回的项。

修改数组splice()

该方法可以增加，减少或修改数组中的一项或多项。该方法接收一个或多个参数，先从指定位置删除项，然后添加任意数量的项。
该方法始终会返回一个数组，数组中包含被删除的返回项。

参数1指定需要删除的项的起始位置
参数2指定需要删除的项的数量
参数3-参数n指定需要向数组中添加的项

所以根据传入参数的数量，有以下情况：

不传入参数，则不对数组做任何改变

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

传入一个数值参数，则从数组中删除指定位置和数组末尾之间的所有项

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

传入两个数值参数，则删除数组中从指定位置开始的指定数量的项

 var array = [1,2,3,4];
 console.log(array.splice(2,1));    // [3]
 console.log(array);        // [1,2,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。

传入一个参数

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

传入两个参数

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]

有两个需要注意的事项，

数组中的项和传入参数作比较时，用的是===全等号，即必须严格相等

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是一个类数组对象或可迭代对象，方法基于该对象创建数组。函数的返回值将作为新数组中的每一项的值。必需的参数。
参数2是一个函数，数组的每一项都会调用该函数。非必需参数。
参数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