JavaScript中Array类型方法总结

Posted 2020-08-07 Jeremy阳仔

Array类型是ECMAScript中最常用的类型之一，ECMAScript中的数组与其他多数语言中的数组有着相当大的区别。ECMAScript数组的每一项可以保存任何类型的数据。这里总结了数组类型的大多数方法，方便以后查找使用。

一、创建数组的基本方式

　　创建数据的基本方式有两种：

　　1.使用Array构造函数

var colors=new Array();
var colors=new Array(20);　　//创建length值为20的数组
var colors=new Array("red","blue"); //创建包含2个字符串值得数组

　　2.使用数组字面量表示法

var colors=[];
var colors=["red","blue"];

二、读取和设置数组值

var colors=["red","blue","green"];
alert(colors[0]);　　//读取第一项
colors[2]="black";　　//修改第三项
colors[3]="brown";　　//增加第四项
colors.length=2;　　//删除第二项后的所有值
colors[colors.length]="yellow";　　//在数组末尾位置添加新项

附注：数组的length属性不是只读的。因此可以通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。

三、检测数组

if(Array.isArray(value)){
    //用户操作
}

四、转换方法

var colors=["red","blue","green"];
alert(colors.toString());　　//red,blue,green
alert(colors.valueOf());　　//red,blue,green

所有对象都具有toString()和valueOf()方法。调用toString()方法会返回由数组中的每个值得字符串形式拼接而成的一个以逗号分隔的字符串。valueOf()返回的还是数组.数组的toString()方法可以使用join()方法代替。不过join()方法可以自定义分隔符

var colors=["red","blue"];
alert(colors.join(","));　　//red,blue
alert(colors.join("||"));　　//red||blue

五、栈方法

　　栈是一种LIFO后进先出的数据结构，也就是最新添加的项最早被移除。使用push()和pop()方法可以实现类似栈的行为。

　　push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组的长度。

　　pop()方法则从数据末尾移除最后一项，减少数组的length值，然后返回移除的项。

var colors=new Array();
var count=colors.push("red","blue");
alert(count);　　//2
var item=colors.pop();　　
alert(item);　　//blue
alert(colors.length);　　//1

六、队列方法

 　　队列数据结构的访问规则是FIFO先进先出结构。队列在列表的末端添加项，从列表的前端移除项。使用push()和shift()方法可以实现类似队列的行为。

　　shift()方法能够移除数组中第一个项并返回该项，同时将数组的长度减1。

var colors=new Array();
var count=colors.push("red","blue");
alert(count);　　//2
var item=colors.shift();
alert(item);　　//red
alert(colors.length);　　//1

附注：ECAMScript还提供了一个unshift()方法。它与shift用途相反：它能在数组前添加任意个项并返回新数组的长度。同时使用unshift()和pop()方法，可以从相反的方向来模拟队列，即在数组的前端添加项，从数据末端移除项。(不再举例).

七、重排序方法

　　1.反转数组顺序reverse()

var arr=[1,2,3,4,5];
arr.reverse();
alert(arr);　　//5,4,3,2,1

　　2.排序方法sort()

　　排序方法sort()大多数情况下都会接收一个比较函数作为参数，以便我们指定哪个值位于哪个值得前面。

function compare(v1,v2){
    return v2-v1;
}
var arr=[0,1,5,10,15];
arr.sort();
alert(arr);　　//0,1,10,15,5 不是我们希望的排序结果
arr.sort(compare);
alert(arr);　　//0,1,5,10,15 希望的结果

八、操作方法

　　1.concat()

　　concat()方法可以基于当前数组中的所有项创建一个新数组，这个方法会先创建当前数据的一个副本，然后将接收到的参数添加到这个副本的末尾。

var arr=[1,2];
var arr2=arr.concat(3,[4,5]);
alert(arr);　　//1,2
alert(arr2);　　//1,2,3,4,5

　　2.slice()

　　slice()方法能够基于当前数组中的一个或多个项创建一个新数组。它可以接收一或两个参数，即要返回项的起始和结束位置（不包括结束位置）。一个参数时返回指定位置到当前数组的末尾所有项。

var arr=[1,2,3,4,5];
var arr2=arr.slice(1);
var arr3=arr.slice(1,4);
alert(arr2);    //2,3,4,5
alert(arr3);　　//2,3,4

　　附注：如果参数是负值，则用数组长度加上该数来确定相应的位置。例如slice(-2,-1)与slice(3,4)得到的一样的。如果结束位置小于起始位置，则返回空数组。

　　3.splice()

　　splice()方法主要用途是向数组中部插入项。

splice(0,2)　　//删除数组中前两项(第一个参数为要删除第一项的位置，第二个参数为要删除的项数)
splice(2,0,"red","blue")　　//从当前数组的位置2开始插入"red"和"blue"(第一第二个参数同上，第三个及以后的任意个表示要插入的项)
splice(2,1,"red","blue")　　//从当前数组中删除位置2的项，然后再从位置2开始插入"red"和"blue"

九、位置方法

　　indexOf()和lastIndexOf().它们都接收两个参数:要查找的项和表示查找起点的位置的索引(第二个参数可选).

var arr=[1,2,3,4,5,4,3,2,1];
alert(arr.indexOf(4));　　//3
alert(arr.lastIndexOf(4));　　//5
alert(arr.indexOf(4,4));　　//5
alert(arr.lastIndexOf(4,4));　　//3

 十、迭代方法

　　every():对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult=numbers.every(function(item,index,arry){ //参数说明：数组项的值、该项在数组中的位置、数组对象本身
　　return (item>2);
});
alert(everyResult);　　//false

　　some():对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

var numbers=[1,2,3,4,5,4,3,2,1];
var someResult=numbers.some(function(item,index,arry){ //参数说明：数组项的值、该项在数组中的位置、数组对象本身
　　return (item>2);
});
alert(someResult);　　//true

　　filter():对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

var numbers=[1,2,3,4,5,4,3,2,1];
var filterResult=numbers.filter(function(item,index,arry){ //参数说明：数组项的值、该项在数组中的位置、数组对象本身
　　return (item>2);
});
alert(filterResult);　　//[3,4,5,4,3]

　　map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var numbers=[1,2,3,4,5,4,3,2,1];
var mapResult=numbers.map(function(item,index,arry){ //参数说明：数组项的值、该项在数组中的位置、数组对象本身
　　return item*2;
});
alert(mapResult);　　//[2,4,6,8,10,8,6,4,2]

　　forEach():对数组中的每一项运行给定函数，没有返回值。

var numbers=[1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,arry){ //参数说明：数组项的值、该项在数组中的位置、数组对象本身
　　//用户操作
});

十一、归并方法

　　ECMAScript5新增两个归并方法。reduce()和reduceRight()。这两个方法都会迭代数组中的所有项。不同的是reduce()方法从数组的第一项开始，reduceRight()则从数组的最有一项开始。这两个方法都接收两个参数：一个在每一项上调用的函数，一个是作为归并基础的初始值（可选）。

var values=[1,2,3,4,5];
var sum=value.reduce(function(prev,cur,inex,array){　　//参数说明：前一个值、当前值、项的索引、数组对象
    return prev+cur;
});
alert(sum);　　//15

var sum2=values.reduce(function(prev,cur,index,arry){
   return prev+cur;
},20);
alert(sum2);　　//35

感谢阅读。