上次说到数组的方法时没有具体的说下去,因为所涉及到的篇幅较长,故另开一篇来罗列js的数组方法。首先,先上一张近期整理的脑图:
1.转换方法
这个方法很简单明了,就是把数组的每一项用”,”连接起来转为字符串,看下面例子
1
2
3
|
var colors = [
'red',
'green',
'blue'];
var colString = colors.toString();
console.info(colString);
|
2.栈方法
用数组模拟栈的结构来操作,栈的特点就是后进先出,顺带说下数组的常用添加方法也是push()
,很重要很常用!
另一个方法是pop()
,返回数组的最后一项,具体看下面例子
1
2
3
4
5
6
|
var colors = [];
colors.push(
'red',
'green');
console.info(colors);
var popColors = colors.pop();
console.info(popColors);
|
3.队列方法
显而易见,这是模仿队列的数据结构,队列的特性是先进先出,严格按照排队的方式,排在前面的先出来。方法有两个:shift()
和unshift()
,前者返回数组的第一项,unshift()
则类似于push()
方法,不同的在于它是把数值添加为数组的第一项,具体看例子
1
2
3
4
5
6
|
var colors = [
'red',
'green',
'blue'];
var col = colors.shift();
console.info(col);
colors.unshift(
'black');
console.info(colors);
|
4.重排序方法
原生js定义了两个方法,一个是reverse()
,通俗易懂,就是反转数组的排列顺序,如下:
1
2
3
|
var numArray = [
1,
2,
3,
4,
5];
numArray.reverse();
console.info(numArray);
|
另一个也是经常需要用的排序方法sort()
,原生的sort()
方法从小到大排列,但美中不足的是所谓的从小到大其实是按照字符串的从小到大排列,而并不是通常意义上的数字,如下例子
1
2
3
|
var numArray = [
0,
1,
5,
10,
15];
numArray.sort();
console.info(numArray);
|
为了解决以上问题,sotr()
可以接收一个比较函数作为参数,来根据我们的需要进行排序,比较函数接收两个参数,若参数一小于参数二,则返回负数,第一个参数应位于第二个参数之前,即从小到大排列,正确的使用方法如下
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function (v1,v2) {
if(v1<v2) {
return
-1;
}
else
if(v1>v2) {
return
1;
}
else {
return
0;
}
}
var testArray = [
0,
1,
5,
15,
10];
testArray.sort(compare);
console.info(testArray);
|
看得很繁琐我知道,so换个方式,可以这样写
1
2
3
4
5
6
7
|
function minToMax(v1,v2) {
return v1-v2;
}
var testArray = [
0,
5,
1,
15,
10];
testArray.sort(minToMax);
console.info(testArray);
|
5.操作方法
三个方法,concat()
、slice()
、splice()
a).拷贝方法concat()
,可以接收多个参数,参数可以是数值,也可以是数组,返回的值是数组,调用方法不影响原来的数组,具体看下面例子
1
2
3
4
|
var colors = [
'red',
'green',
'blue'];
var colors_2 = colors.concat(
'yellow',[
'black',
'write']);
console.info(colors);
console.info(colors_2);
|
b).切割方法slice()
,接收一个参数的时候,该参数作为切割的起始位置切割数组并返回一个新的数组;接收两个参数的时候,第一个参数作为切割的起始位置,第二个参数作为切割的结束位置,返回一个新数组
1
2
3
4
5
|
var colors = [
'red',
'green',
'blue',
'yellow',
'black',
'write'];
var colors_1 = colors.slice(
1);
console.info(colors_1);
var colors_2 = colors.slice(
1,
4);
console.info(colors_2);
|
c).增删改大法splice()
,如标题所示,这个方法可以根据传入的参数来进行插入,删除,替换,堪称强大,具体使用方法如下
删除: 传入两个参数,要删除的第一项数组下标和要删除的数量,返回被删除的所有项,使用一个新的数组包括。
1
2
3
4
|
var values = [
1,
2,
3,
4,
5];
var remove = values.splice(
1,
2);
console.info(values);
console.info(remove);
|
插入: 传入三个参数,分别为起始位置、0、要插入的项,如果要插入多项,则可传入第四、第五等任意多个项
1
2
3
|
var colors = [
'red',
'green',
'blue'];
colors.splice(
1,
0,
'black');
console.info(colors);
|
替换: 传入三个参数,与插入相同,不同的在于第二个参数’0’换为替换的数量
1
2
3
|
var colors = [
'red',
'green',
'blue'];
colors.splice(
1,
1,
'black');
console.info(colors);
|
6.位置方法
通常我们会检验一个数是否是在一个数组中,这时候就需要用到indexOf()
与lastIndexOf()
,两个方法都接收两个参数,要查找的项与表示查找的起点,当然,也可以只传入查找的项。两个方法的区别在于indexOf()
是从头开始查找,lastIndexOf()
则是从数组的结尾向前查找。两个方法都返回查找项在数组中的第一个下标,如果查询不到则返回-1,看下例子
1
2
3
|
var values = [
1,
2,
3,
4,
5,
4,
3,
2,
1];
console.info(values.indexOf(
2));
console.info(values.lastIndexOf(
2));
|
7.迭代方法
从ES5开始数组有了5个迭代方法,每个方法都可以接收两个参数,分别是在每一项上运行的函数以及运行该函数的作用域对象(非必须),其中传入的函数也接收三个参数:数组项的值、该项在数组中的位置、数组对象本身
every():对数组中的每一项运行给定一个函数。如果该函数对每一项都返回true则返回true
1
2
3
4
5
6
7
8
9
|
var values = [
1,
2,
3,
4,
5];
var test = values.every(
function(item,index,array) {
return item>
0;
});
console.info(test);
test = values.every(
function(item,index,array) {
return item>
2;
});
console.info(test);
|
filter():给数组每一项运行给定函数,返回该函数会返回true的项组成的数组
1
2
3
4
5
|
var values = [
1,
2,
3,
4,
5];
var test = values.filter(
function(item,index,array) {
return item>
2;
});
console.info(test);
|
forEach():对数组中的每一项运行给定函数,没有返回值,作用类似于for循环,比如我要把数组中的所有项相加,一般会用for循环,也可以用forEach
1
2
3
4
5
6
|
var values = [
1,
2,
3,
4,
5];
var sum =
0;
values.forEach(
function(item,index,array) {
sum = sum + item;
});
console.info(sum);
|
map():对数组中的每一项运行一个给定函数,返回函数每次调用的结果所形成的一个数组
1
2
3
4
5
|
var values = [
1,
2,
3,
4,
5];
var test = values.map(
function(item,index,array) {
return item+
2;
});
console.info(test);
|
some():同之前一样传入一个函数,作用跟every类似,很容易混淆。some()的作用是数组中的任一项返回true,则这个方法返回true
1
2
3
4
5
|
var values = [
1,
2,
3,
4,
5];
var test = values.some(
function(item,index,array) {
return item>
2;
});
console.info(test);
|
8.归并方法
写到这里感觉自己太啰嗦了,磨磨蹭蹭到了最后一个方法。归并方法是ES5新增的,分别是reduce()
和reduceRight()
,作用都是将数组的所有项相加,回顾一下forEach()
方法中的例子,更简洁的做法是用这两个归并方法。这两个方法之间的区别在于从第一项开始还是最后一项
1
2
3
4
5
|
var values = [
1,
2,
3,
4,
5];
var test = values.reduce(
function(prev,cur,index,array) {
return prev+cur;
});
console.info(test);
|
原文:大专栏 数组方法罗列