javascript数组的方法

上一章咱们讲了数组的创建，接下来，咱们就看看数组应该怎么用，都有哪些方法，这些方法到底是做什么的,本文只介绍Array特有的方法，继承来自Object的方法不做赘述。

contact

顾名思义，这个方法是用来做合并的，但不会影响原数组的结构。这个方法接受的参数可以是多个。咱们可以直接看代码：

var arr = [1,2,3];
var result1 = arr.concat(4);
var result2 = arr.concat(4,5,6);
var result3 = arr.concat([4,5,6,7]);
var result4 = arr.concat([4,5],[6,7,8]);
var result5 = arr.concat([4,5],[[6,7],8,9]);
console.log(arr);
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
console.log(result5);

接下来咱们看运行结果：

[1, 2, 3]
[1, 2, 3, 4]
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7]
[1, 2, 3, 4, 5, 6, 7, 8]
[1, 2, 3, 4, 5, [6, 7], 8, 9]

ok，看到了输出结果，还是很好理解的，原来的数组是没有被影响的，返回的是一个新的数组。

copyWithin

这个方法用的很少，是数组的内部替换，这个方法会改变数组内部的结构，返回的是改变后的数组，这个方法可接收三个参数，且三个参数必须为整数：
1、target：当前数组开始被替换的位置，必传；
2、start：当前数组开始替换的位置，可传可不传， 不传就是从0开始；
3、end：当前数组结束替换的位置，可传可不传，不传就是到数组的length结束。
说这么难理解的话，我都不好意思，，咱们直接看代码吧：

（1）首先看下传递一个参数的情况：

var arr = [1,2,3,4];
var copyarr = arr.copyWithin(1);
console.log(arr);
console.log(copyarr);

看输出：

[1, 1, 2, 3]
[1, 1, 2, 3]

通过输出，可以看到，arr的值也改变了，然后原先的数组的值和现在的做个比较，数组的长度没变，数组的第一个值没变，然后其他的值，是从原数组的第0个元素开始copy到新数组。一句话：保证数组长度不超出的情况下，将原数组从第0个位置开始，依次赋值给原数组的第target++个元素。
当然，这个target的值可以是负数，0，正数，刚才咱们看了正数的结果，0的时候，是保持不变，负数的时候，方法内部会处理下，把负数的值改为数组的长度与负数想加，例如上面的数组，当执行arr.copyWithin(-3)的时候，与上面的输出结果是一样的。

（2）咱们看下两个参数的情况：

var arr = [1,2,3,4];
arr.copyWithin(1, 2);
console.log(arr);

输出：[1, 3, 4, 4]
分析下输出吧，第一个参数target为1，也就是要替换当前数组的开始位置为1，就是从arr的第一个位置开始，也就是从元素2开始被替换；怎么替换呢，用谁来替换呢，好，第二个参数为2，也就是从arr的第二个为宗旨开始，即从元素3来进行替换，长度呢，没传，那就到结尾呗。刚才咱们说了第一个元素，那么第二个元素的值和第一个元素是一样的，也可以是负数、0和正数，至于代码，我就不敲了，有兴趣的朋友可以试试。

（3）好，咱们最后看三个参数的情况：

var arr = [1,2,3,4];
arr.copyWithin(1, 0, 2);
console.log(arr);

输出：[1, 1, 2, 4]
咱们来分析下，从第一个元素2开始被替换，用什么来替换，替换钱数组的第0个位置到第二个位置结束，也就是1,2这两个数去替换。所以替换后的结果就是[1, 1, 2, 4]。

entries

该方法用的也很少，喜欢的可以看，不喜欢的可以直接看下一个，但是还是要讲的嘛。
entries() 方法返回一个 Array Iterator 对象，该对象包含数组中每一个索引的键值对。例如：

var arr = ['tom', 'jack', 'marry'];
var itarr = arr.entries();
console.log(itarr.next().value);//[0, 'tom']
console.log(itarr.next().value);//[1, 'jack']

ok ,这个方法没什么好说的，一看就懂，如果看不懂Iterator的话，可以去百度搜下这个方法。

every、some、filter、forEach 、map、reduce

这几个方法呢，不做多余的解释，想了解的可以看下我的另外的一篇文章：javascript浅谈循环

fill

这个方法更简单了，和它的名字一样，就是整体把数组内的元素换掉，会改变数组的结构，返回改变后的数组。这个方法可以接收三个参数：
1、value：要替换的值，不传为undefined
2、start：开始的索引，不传为0,
3、end：结束的索引，不传为数组的length
罗代码：

var arr = [1,2,3,4];
var fillarr = arr.fill('hello',1,2);
console.log(arr);
console.log(fillarr)

输出：[1, “hello”, 3, 4]
简单解释下吧：首先，咱们创建了一个四个元素的数组arr，然后执行了fill方法，这个方法里面有三个参数，第一个是’hello’字符串，第二个是开始的索引，第三个是结束的索引。执行这个方法做的事情就是，从第start(1)个元素开始到end(2)结束的元素的值替换为value(‘hello’);

find 、findIndex

find方法返回的是找到的元素的值，不是索引，可接收两个参数，找不到返回undefined；而findIndex方法返回的是找到的元素的索引，同样可接收两个参数，找不到返回-1。

第一个参数是一个函数，必传；第二个参数是调用该方法的对象，可传可不传。第一个函数的参数为element，index，array，element为当前遍历到的元素的值，第二个为当前遍历到的索引，第三个参数为数组本身。罗代码：

var arr = ['tom', 'jack', 'linda'];
var find = arr.find(function(element,index,array){
return element.length == 5
});
var index = arr.findIndex(function(element,index,array){
return element.length == 5
});
console.log(find);
console.log(index);

输出为：
linda
2

ok ,很简单，不做多余的解释。

includes

这个方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。可接收两个参数，第一个为要查找包含的元素，不传为undefined；第二个参数为开始查找的索引，不传为0；看下代码吧：

var arr = ['tom', 'jack', 'linda', 'coryy', 'jack', 'lucy'];
var index = arr.includes('jack');
var index2 = arr.includes('linda',3);
console.log(index);
console.log(index2);

ok,大家应该都能猜到了，分别输出的是true和false。
第一次咱们只传了第一个参数，所以在整个arr数组中查找，肯定找到了jack；第二次咱们传了两个参数，第二个参数为3，也就是在arr数组的索引为3的位置开始查找，也就是arr2 = [‘coryy’, ‘jack’, ‘lucy’]这个数组，也就是类似的这个arr2.includes(‘linda’)（当然这只是做个比喻，肯定不是这样搞的嘛）这很显然没有嘛，所以返回了false。

indexOf 、lastIndexOf

indexOf和lastIndexOf这两个方法就像他的名字一样，是查找元素的，并返回他的索引，找不到的话，返回-1。这两个方法的不同在于：前者是从0开始，从头开始查找；后者是从length开始查找，从尾部开始查找。看下代码：

var arr = ["tom", "jack", "linda", "coryy", "jack", "lucy"];
arr.indexOf('jack');
arr.lastIndexOf('jack');
arr.indexOf('jackwen');

ok,大家肯定知道了，输出的结果是1、4和-1，因为jack字符串在数组的索引为1和4的元素，而jackwen的字符串在数组中没有找到，所以返回的是-1。
这两个方法也是可以接收两个参数的，第二个参数与上面的includes的含义是一样的，稍微提下，不做多余的解释。

join

join这个方法，咱们在开发过程中应该用的很多，通常它与split方法的使用频率是差不多的。
join方法，是将数组中的所有元素连接成一个字符串，接收一个参数，不传的话，默认为’,’;
split方法，是将一个字符串分离为数组；好，不多说废话，看下两种情况吧：

var arr = ["tom", "jack", "linda", "coryy", "jack", "lucy"];
var s1 = arr.join();
var s2 = arr.join('- -');
console.log(s1);
console.log(s2);

看下输出：

tom,jack,linda,coryy,jack,lucy
tom- -jack- -linda- -coryy- -jack- -lucy

push 、pop

学过数据结构的同学应该对这两个方法很熟悉了，这是对栈的错作（先后进先出），push是进栈的方法，pop是出栈的方法。在数组中，push操作就是在数组的末尾加一个元素，相应的数组的长度会加1，并返回当前数组的长度；而pop就是在数组的末尾删除一个元素，并将这个元素返回。咱们看下代码：

var arr = [1,2,3,4];
arr.push(5);
console.log(arr);
var popEle = arr.pop();
console.log(popEle);
console.log(arr);

看下输出：

[1, 2, 3, 4, 5]
5
[1, 2, 3, 4]

ok，与咱们想象中的是一样的，push一个元素后，长度确实加1，并且添加的5，在数组的末尾；而数组执行pop后，数组长度减一，并当前元素返回了。

shift、unshift

这两个方法就与咱们数据结构中的进队列和出队列是一样的啦。遵循先进先出的原则。shift是出队列的方法，将数组中的索引为0 的元素返回，并后面的元素前移；unshift方法是进队列的方法，将在数组的头部添加元素，并将数组中的元素后移，最后返回当前数组的长度。看下例子吧：

var arr = [1,2,3,4];
var l = arr.unshift(0);
console.log(l);
console.log(arr);
var ele = arr.shift();
console.log(ele);
console.log(arr);

看下输出：

5
[0, 1, 2, 3, 4]
0
[1, 2, 3, 4]

ok，首先咱们声明了一个数组，然后执行了一下unshift方法，将0传了进去，执行后，返回了数组的长度l，为5；然后咱们打印了下数组，看到数组在头部比一开始多了一个0的元素；然后咱们执行了一下shift方法，对数组执行了下出队列的方法，先进先出，然后第一个元素出来了，ele的值为0，然后打印了下数组，看到数组中的第0个元素被取出来了，并且长度还减1。

reverse

reverse这个方法很简单，只是把数组反转，颠倒数组中元素的位置。第一个元素会成为最后一个，最后一个会成为第一个，没什么好说的，看下代码吧：

var arr = [1,2,3,4];
arr.reverse();
console.log(arr);

输出就是：[4,3,2,1]

sort

sort方法应该是咱们用的比较经常的了，在开发中经常用这个方法对数组进行排序。这个方法接收一个参数，该参数是一个方法，如果不传就会按照字符串的Unicode码位点（code point）排序。返回值是当前数组
先看下不传的情况：

var  arr = [1,11,12,3,4,23];
console.log(arr.sort());

输出时：[1, 11, 12, 23, 3, 4]
可以看到咱们输出的数组不是按照数字的大小来排序的，而是按照Unicode码位点进行排序的。
咱们看下传参数的情况：

var compare = function(a ,b){
    return a>b;
};
var arr = [1,11,12,3,4,23];
console.log(arr.sort(compare));

看下输出：[1, 3, 4, 11, 12, 23]
ok，还不是很复杂的，不做赘述。

slice

slice方法不修改原数组，只是把数组中的一部分浅复制到一个新的数组，并将新数组返回。该方法接收两个参数，第一个是开始位置，不传为0；第二个参数为结束位置，不传为数组的长度。看下代码：

var arr = [1,2,3,4,5,6];
console.log(arr.slice());
console.log(arr.slice(2));
console.log(arr.slice(2,4));

看下输出：

[1, 2, 3, 4, 5, 6]
[3, 4, 5, 6]
[3, 4]