首页 > 技术文章 > JS中数组方法小总结

yangxiaoguai132 2016-03-11 09:37 原文

1.array.concat(item……)

返回:一个新数组

该方法产生一个新数组,它包含一份array的浅复制,并把一个或多个参数item附加在其后。如果参数item是一个数组,那么它的每个元素会被分别添加。例如:

1 var a = [1,2,3];
2 document.write(a.concat(4,5));
3 或者
4 var b= [4,5];
5 document.write(a.concat(b));

在连接的时候不会将数组中数据类型变成字符串,也不会改变原数组。例如:

<script type="text/javascript">
         var foo=function  () {
            var a=[1,2,3],b=[4,5];
            if(typeof (a.concat(b)[3])==="string"){
                alert("string");
            }else if(typeof (a.concat(b)[3])==="number"){
                alert("number");//number
            }else{
                alert("other");
            }
            console.log(a);//[1,2,3]
            console.log(b);//[4,5]
         }
         foo();
</script>

 当参数中有一个是空数组时,

var e=[];

var a=[1,2,3];

console.log(a.concat(e));//[1,2,3],不是[1,2,3,""]

console.log(e.concat(a));//[1,2,3]

 

 

2.array.join(separator)

返回:一个新字符串

该方法把一个数组构造成一个字符串(把数组所有元素放进一个字符串中),然后元素与元素之间用separator分隔开。

具体来讲,首先先把array中的每一个元素构造成一个字符串,接着用一个separator分隔符把他们连接在一起。默认的separator是逗号','。想做无间隔的连接,可以把separator设为空字符串""。例如:

1 var foo=function  () {
2             var a=[1,2,3],b=[4,5];
3             var c=a.concat(b).join("");
4             console.log(typeof c);
5          }
6 foo();

如果想要将大量的字符串片段组合到一个字符串,把这些片段放到一个数组中并用join方法连接起来通常比+元素运算符连接起来要快。

在IE6/7中,join方法比+运算符效率快,IE8以后的版本对+运算符进行了特别的优化,性能已经显著高于join方法,建议首选使用+方法。

当数组为空数组时,

var e=[];

console.log(e.join(","));语句没有执行结果

 

3.array.pop()

返回:被移除的那个元素

移除array中最后一个元素并返回该元素。如果该array是empty,它会返回undefined。数组为空时返回undefined。例如:

1 <script type="text/javascript">
2          var foo=function  () {
3             var a=[1,2,3];
4             var c=a.pop();
5             console.log(c);//3
6             console.log(a);//[1,2]
7          }
8          foo();
9 </script>

 该方法不能用于null,会报错

 1 <script type="text/javascript">
 2          var foo=function  () {
 3             var a=[1,2,3];
 4             var b=[];
 5             var d=null;
 6             console.log(b.pop());//undefined
 7             console.log(d.pop());//报错
 8          }
 9          foo();
10 </script>

 pop可以这样实现:

Array.method("pop",function(){
     return this.splice(this.length-1,1)[0];               
});

 

4.array.push(item……)

返回:原数组的新长度

push方法把一个或多个参数item附加到一个数组的尾部。和concat方法不同的是,这个方法会改变元素组,也就是说将item加入原数组中。

 1 <script type="text/javascript">
 2          var foo=function  () {
 3             var a=[1,2,3];
 4             var b=["x","y","z"];
 5             var c=a.push(b,true);
 6             console.log(a);//[1,2,3,Array(3),true],这里a的长度为5
 7             console.log(c);//5
 8          }
 9          foo();
10 </script>

 push可以这样实现:

1 Array.method("push",function(){
2   this.splice.apply(this,[this.length,0].
3       concat(Array.prototype.slice.apply(ayguments))
4   );
5   return this.length;
6 )};

 

5.array.reverse()

返回:array本身反转之后

将array里的元素的顺序反转,并返回array本身,例如:

1 var a=["a","b","c"];
2 var b=a.reverse();
3 console.log(a);//["c","b","a"]
4 console.log(b);//["c","b","a"]

 

6.array.shift()

返回:移除数组第一个元素并返回该元素。如果这个数组是空的,则返回undefined

shift通常比pop慢得多,例如:

1 var a=[[2,3,4],1,"x",true,undefined,null];
2 var b=[false,undefined,null];
3 var c=null;
4 var d=undefined;
5 var e=[];
6 console.log(a.shift());//[2,3,4]
7 console.log(b.shift());//false
8 console.log(e.shift());//undefined
9 console.log(c.shift());//报错
10 console.log(b);//[undefined,null]

该方法是在数组本身上操作。

 

7.array.slice(start,end)

返回:截取的新数组

首先对array中的一段进行浅复制。先复制array[start],一直复制到array[end]为止。end参数是可选的,默认值是该数组长度array.length。

slice方法不可以用在null和undefined上,会报错。

当array为空数组时,返回空数组

var e=[];

console.log(e.slice(0));//[]

slice的操作时不影响原数组的,例如:

 1 <script type="text/javascript">
 2          var foo=function  () {
 3             var a=[[2,3,4],1,"x",true,undefined,null];
 4             var b=[false,undefined,null];
 5             var c=null;
 6             var d=undefined;
 7             var e=[];
 8             //slice的方法
 9             console.log(b.slice(0,1));//[false]
10             console.log(b);//[false, undefined, null]
11             console.log(b.slice(1,2));//[undefined]
12          }
13          foo();
14 </script>

 

 

 

8.array.sort(comparefn)

返回:一个排序过的数组,在原数组上排序

不过,排序方法不稳定。例如: var n=[4,8,15,16,23,42]; ,执行n.sort();之后,得到的却是[15,16,23,4,42,8],有点类似于字典排序。因为该方法将每个元素都转化成了字符串。

举例:

 1 <script type="text/javascript">
 2             var foo=function  () {
 3             var a=[[2,3,4],1,"x",true,undefined,null];
 4             var b=[false,undefined,null];
 5             var c=null;
 6             var d=undefined;
 7             var e=[];
 8             //sort的方法
 9             console.log(e.sort());//[]
10             console.log(a.sort());//[1, Array[3], null, true, "x", undefined]
11             console.log(b.sort());//[false, null, undefined]
12             console.log(c.sort());//报错
13             console.log(d.sort());//报错
14          }
15          foo();
16 </script>

 

如果想要实现数字的从小到大排序,可以将函数改成如下所示:

1 n.sort(function(a,b){
2   return a-b;//等于0,则两个数相等,小于0,则第一个数排在前面
3 }
4 )

 

若是从大到小,改成b-a即可。b-a为负数,则前一个数排在后一个数前面。

 

如果是想要实现自定义属性的排序,可以进行如下处理:

 1 var objectList=new Array();
 2          function Person(name,age){
 3             this.name=name;
 4             this.age=age;
 5          }
 6         objectList.push(new Person('a',20));
 7         objectList.push(new Person('b',25));
 8         objectList.sort(function(a,b){
 9             return a.age-b.age;
10         }
11 );

 

 

如果想要实现可改变的属性排序,可以进行一下处理:

 1 var objectList=new Array();
 2          function Person(name,age){
 3             this.name=name;
 4             var _age;
 5             this.age=function(){
 6                 if(arguments){
 7                     _age=arguments[0];
 8                 }else{
 9                     return age; 
10                 }
11             }
12 
13          }
14         objectList.push(new Person('a',20));
15         objectList.push(new Person('b',25));
16         objectList.sort(function(a,b){
17             return a.age()-b.age();
18             });
19         );

 

 

 

9.array.splice(start,deleteCount,item……)

返回:一个包含被移除元素的数组。在原数组上操作,主要功能就是删除数组元素,或者替换。

从array中移除一个或多个元素,并用新的item替换他们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素个数。如果有额外的参数,那些item会插入到被移除元素的位置上。

例如:

 1 <script type="text/javascript">
 2             var foo=function  () {
 3             var a=[[2,3,4],1,"x",true,undefined,null];
 4             var b=[false,undefined,null];
 5             var c=null;
 6             var d=undefined;
 7             var e=[];
 8             console.log(a.splice(1,1));//[1]
 9             console.log(b.splice(1,1));//[undefined]
10             console.log(b.splice(1,1,"splice"));//[null]
11             console.log(b);//[false, "splice"]
12             console.log(c.splice(1,1));//报错
13             console.log(d.splice(1,1));//报错
14             console.log(e.splice(1,1));//[]
15          }
16          foo();
17 </script>

 

 

10.array.unshift(item……)

返回:添加后的数组的长度,在原数组上操作

与push方法类似,用于把元素添加到数组中,但是是从开始部分添加不是从尾部添加。

例如:

 1 <script type="text/javascript">
 2             var foo=function  () {
 3             var a=[[2,3,4],1,"x",true,undefined,null];
 4             var b=[false,undefined,null];
 5             var c=null;
 6             var d=undefined;
 7             var e=[];
 8             console.log(a.unshift([]));//7
 9             console.log(a);//[Array[0], Array[3], 1, "x", true, undefined, null]
10             console.log(b.unshift("a"));//4
11             console.log(b);//["a", false, undefined, null]
12             console.log(c.unshift("[]"));//报错
13             console.log(d.unshift("[]"));//报错
14             console.log(e.unshift([]));//1
15             console.log(e);//[Array[0]]
16             console.log(b.push([]));//5
17             console.log(b);//["a", false, undefined, null, Array[0]]
18          }
19          foo();
20 </script>

 

推荐阅读