上一章咱们讲了数组的创建,接下来,咱们就看看数组应该怎么用,都有哪些方法,这些方法到底是做什么的,本文只介绍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]