Javascript Array类型的相关操作

Array是JS内置的引用类型。用得很多用法也很灵活，而且似乎很容易在笔试面试题里出现，故总结一下。

贴过来的代码都是在jsFiddle上运行过的

 

》》初始化。用length属性可以取得数组当前的长度

//建立空数组
var colors=new Array();

//用长度建立数组
var colors=new Array(4);
alert(colors[0]);//undefined
colors[0]="red";
alert(colors[0]);//red

//用值建立数组
var colors=new Array("red","blue","black");
alert(colors.length);//3

//上面的方式可以换成数组字面量的表示法
var colors=[];
var colors=["red","blue","yellow"];

 

》》输出

可以使用toString或者valueOf的方式把数组转换成字符串输出。此时默认用逗号分隔。如果需要更换分隔方式，使用join函数

var colors=["red","green","yellow"];
alert(colors);
alert(colors.valueOf());
alert(colors.toString());
//上述调用均输出red,green,yellow，其中第一种alert(colors)隐式调用了toString方法

alert(colors.join("||"));//red||green||yellow

 

》》栈方法和队列方法

使用栈方法和队列方法，可以像操纵栈或者队列一样操作数组。

push(item) - 压栈，在数组末尾追加新项，返回新的数组长度

pop() - 出栈，弹出数组末尾的项，返回这一项，数组长度减1

shift() - 弹出数组的第一项，返回这一项，数组长度减1

unshift(item) - 在数组开头追加新项，返回新的数组长度

其中push和unshift都可以接受多个参数（即一次追加多项）

var colors=["red","green","yellow"];
var item=colors.pop();
alert(item);//yellow
alert(colors.length)//2

var newLength=colors.push("blue","brown");
alert(newLength);//4
alert(colors);//red,green,blue,brown

var item=colors.shift();
alert(item);//red
alert(colors.length)//3

var newLength=colors.unshift("red","yellow");
alert(newLength);//5
alert(colors);//red,yellow,green,blue,brown

 》》逆转和排序

用reverse()方法可以把数组中元素的顺序逆转过来

用sort()方法可以对数组中的元素进行排序，但默认的sort()方法使用了字符串序的排列规则，也就是如果是1,5,9,10,15的话，会按照字符串序被排列成1,10,15,5,9。

可以通过传入一个函数作为参数，来制定sort()的排列顺序。传入的函数接受两个参数value1,和value2，如果想要value1排在value2之前，那么返回一个负数，否则返回一个正数。

var colors=[1,10,5,9,15];

colors.reverse();
alert(colors);//15,9,5,10,1

//按字符串序排列
colors.sort();
alert(colors)//1,10,15,5,9

//按数字升序排列
colors.sort(function(value1,value2){
    return value1-value2;    
});
alert(colors);//1,5,9,10,15

//按数字降序排列
colors.sort(function(value1,value2){
    return value2-value1;    
});
alert(colors);//1,5,9,10,15

》》切割、拼接和替换

实现切割、拼接、替换的方法有两类，一类是不改变原数组的值，把结果作为一个新的数组返回，包括

concat() - 把接收到的参数作为新的元素追加到当前数组末尾，并返回拼接后的新数组

slice() - 创建一个当前数组的子数组，可以接受一个参数或两个参数，接受一个参数value1时，返回下标从value1到数组末尾的元素组成的新数组。接受两个参数value1、value2时，返回下标[value1,value2)的元素组成的新数组（不包括value2所包含的元素）。

上面两个方法均不改变原数组，注意slice()方法还可以接受负数作为参数，此时用数组长度加上这个数来确定相应的位置。或者接受结束位置比起始位置小的参数，不会报错，但返回一个空数组。不过这样的操作通常没什么实际意义。

var colors=["red","green","yellow"];

var morecolors=colors.concat("blue","white");
alert(morecolors);//red,green,yellow,blue,white

var subcolors=morecolors.slice(2);
alert(subcolors);//yellow,blue,white
var subcolors2=morecolors.slice(1,3);
alert(subcolors2);//green,yellow

 另一个splice方法，则是直接在原数组上进行操作的方法，功能很强大，也很常用。有以下几种用法

splice(value1,value2) - 删除从value1开始，往后数value2项元素

splice(value1,value2,newItems...) - 插入或替换。首先删除从value1开始，往后数value2项元素，然后把后面的参数作为新项，追加到value1后面。如果不需要替换，只是插入，则把value2指定成0即可

注意这个操作会直接对原数组进行更改，而返回值是那些被删除掉的元素组成的新数组

var colors=["red","green","yellow"];

var removed=colors.splice(0,1);
alert(colors);//green,yellow
alert(removed);//red

colors.splice(1,0,"purple","brown");
alert(colors);//green,purple,brown,yellow;

》》两道习题

附上两道网上流传得比较广的面试题，都是Array相关的。自己实现了一下。

一、为Array对象添加一个去掉重复元素的方法

可以实现的方式很多。这里选取了创建中间对象的方式，新建一个空对象mid，将src中的元素作为属性添加到该对象中，这样就可以达到一个去重映射的效果。
全部添加完后，将mid对象的属性依序输出到数组中。

题目要求本身说得不是很清楚，是要在原数组上做修改，还是输出到一个新数组里。这里选择了后一种方式。题目重点不在此，具体问题具体分析就好。

给Array添加方法，就是把新方法添加到Array的原型链中，这样Array实例化出的数组对象a，就可以调用该方法了。

function uniq(){
    var src=this;
    var res=[];
    var mid=[];
    for(var i=0;i<src.length;i++){
        mid[src[i]]=true;
    }
    for(var o in mid){
        if(mid.hasOwnProperty(o))
            res.push(o);
    }
    return res;
}
Array.prototype.unique=uniq;

var a = [0, 8, 5, 4, 78, 8, 90, 4, 'a', 'b', 'a']; 

var b=a.unique(); 
alert(b.length); 
for(var i=0;i<b.length;i++){ 
　　alert(b[i]); 
} 

 

二、
请给Array本地对象增加一个原型方法，它的用途是删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。

和第一题很类似，只是对返回值的处理不同，还是采用给中间对象添加属性的方法，通过一次遍历即可解决。

Array.prototype.deleteUniq=function(){
    var src=this;
    var mid=[];
    var res=[];
    var len=src.length;
    for(var i=0;i<src.length;i++){
        if(mid[src[i]]!=true){
            mid[src[i]]=true;
        }
        else{
            res.push(src[i]);
            src.splice(i,1);
            i--;
        }
    }
    return res;
};

var a=[1,3,2,7,1,8,'a','b','a',3,1,4];
var b=a.deleteUniq();
for(var i=0;i<a.length;i++){
    alert(a[i]);
}
alert("return value is");
for(var j=0;j<b.length;j++){
    alert(b[j]);
}

以上，遗漏待补，欢迎讨论。