JavaScript的Array类型总结-白红宇

JavaScript的Array类型总结

阅读量：4086 次

发布时间：2019-05-25

本文共 4206 字，大约阅读时间需要 14 分钟。

http://blog.csdn.net/bboyjoe/article/details/51502264

1)length属性：通过设置length，可以从数组的末尾移除项或向数组中添加新项。

[javascript]
 var colors4=[1,2,3,4];  
 colors4.length=3;  
 console.log(colors4);//=>[1, 2, 3]  

2）instanceof操作符:可检测对象是否为数组类型。

[javascript]
 var colors=['red','blue','green'];  
 console.log(colors instanceof Array);//=>true  

3）转换方法：

3.1）toString():会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

[javascript]
 var colors1=colors.toString();  
 console.log(colors1);//=>red,blue,green  
 console.log(colors1 instanceof Array);//=>false  

3.2）valueOf():返回的还是数组。

[javascript]
 var colors2=colors.valueOf();  
 console.log(colors2);//=>["red", "blue", "green"]  
 console.log(colors2 instanceof Array);//=>true  

3.3）join():可以使用不同的分隔符来构建这个字符串。

[javascript]
 var colors3=colors.join('||');  
 console.log(colors3);//=>red||blue||green  

4）栈方法：

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

[javascript]
 var colors5=[];  
 var count=colors5.push('red','green');  
 console.log(count);//=>2  

4.2）pop():从数组末尾移除最后一项，减少数组的length值，返回移除的项。

[javascript]
 var item=colors5.pop();  
 console.log(item);//=>green  

5）队列方法

5.1）shift():移除数组中的第一项并返回该项，同时将数组长度减1。

[javascript]
 var colors6=['red','blue','green','pink'];  
 var item1=colors6.shift();  
 console.log(item1);//=>red  

5.2）unshift()：在数组前端添加任意个项并返回新数组的长度。

[javascript]
 var count1=colors6.unshift('brown','yellow');  
 console.log(count1);//=>5  

6）重排序方法

6.1)reverse():反转数组项的顺序。

[javascript]
 var values=[1,2,3,4,5];  
 values.reverse();  
 console.log(values);//=>[5,4,3,2,1]  

6.2）sort()：按字符串升序排列数组项。还可以接受一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

[javascript]
 var values1=[0,1,5,10,15];  
 values1.sort();  
 console.log(values1);//=>[0,1,10,15,5]  
 function compare(value1,value2){  
     if(value1<value2){  
         return -1;  
     }else if(value1>value2){  
         return 1;  
     }else{  
         return 0;  
     }  
 }  
 values1.sort(compare);  
 console.log(values1);//=>[0,1,5,10,15]  

7）操作方法

7.1）concat()：基于当前数组中的所有项创建一个新数组。

[javascript]
 var colors7=['red','green','blue','pink'];  
 var colors8=colors7.concat('yellow',['black','brown']);  
 console.log(colors8);//=>["red","green","blue","pink","yellow","black","brown"]  

7.2）slice():能够基于当前数组中的一或多个项创建一个新数组。slice()方法不会影响原始数组。

[javascript]
 var colors9=colors7.slice(1);  
 console.log(colors9);//=>['green','blue','pink']  
 var colors10=colors7.slice(1,3);  
 console.log(colors10);//=>['green','blue']  

7.3）splice():主要用途是向数组的中部插入项。

[javascript]
 var colors11=['red','green','blue','pink'];  
 var removed=colors11.splice(1,2);//删除  
 console.log(colors11);//=>["red", "pink"]  
 console.log(removed);//=>["green", "blue"]  
 removed=colors11.splice(1,0,'yellow','orange');//插入  
 console.log(colors11);//=>["red", "yellow", "orange", "pink"]  
 console.log(removed);//=>[]  
 removed=colors11.splice(1,1,'red','purple');//替换  
 console.log(colors11);//=>["red", "red", "purple", "orange", "pink"]  
 console.log(removed);//=>["yellow"]  

8）位置方法 IE9+

8.1）indexOf()和lastIndexOf():返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。

在比较第一个参数与数组中的每一项时，会使用全等操作符。

[javascript]
 var numbers=[1,2,3,4,5,4,3,2,1];  
 console.log(numbers.indexOf(4));//=>3  
 var person={name:'Jason'};  
 var people=[{name:'Jason'}];  
 var morePeople=[person];  
 console.log(people.indexOf(person));//=>-1  
 console.log(morePeople.indexOf(person));//=>0  

9）迭代方法 IE9+

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

[javascript]
 var numbers=[1,2,3,4,5,4,3,2,1];  
 var everyResult=numbers.every(function(item,index,array){  
     return (item>2);  
 });  
 console.log(everyResult);//=>false  

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

[javascript]
 var someResult=numbers.some(function(item,index,array){  
     return (item>2);  
 });  
 console.log(someResult);//=>true  

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

[javascript]
 var filterResult=numbers.filter(function(item,index,array){  
     return (item>2);  
 });  
 console.log(filterResult);//=>[3, 4, 5, 4, 3]  

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

[javascript]
 var mapResult=numbers.map(function(item,index,array){  
     return item*2;  
 });  
 console.log(mapResult);//=>[2, 4, 6, 8, 10, 8, 6, 4, 2]  

9.5）forEach():对数组中的每一项运行给定函数。这个方法没有返回值。

[javascript]
 var sum=0;  
 numbers.forEach(function(item,index,array){  
     sum+=item;  
 });  
 console.log(sum);//=>25  

10）归并方法：ie9+

10.1）reduce()和reduceRight()：迭代数组的所有项，然后构建一个最终返回的值。

[javascript]
 var values=[1,2,3,4,5];  
 var sumRes=values.reduce(function(prev,cur,index,array){  
     return prev+cur;  
 });  
 console.log(sumRes);//=>15  