Javascript语言精粹之Array常用方法分析

Javascript语言精粹之Array常用方法分析

1、Array常用方法分析

1.1 Array.prototype.sort()

Javascript的默认比较函数假定被排序元素都是字符串，所以直接调用sort方法，不能正确对数字数组排序

var n=[3,11,6,23];
n.sort();
alert(n);//n: 11,23,3,6

我们可以使用自己的比较函数来进行排序，如果想要给任何简单值类型数组排序（知识点，Javascript基本数据类型不多，有string,number,boolean,undefined,null）

var m=['aa',4,'b',12,2];
m.sort(function(a,b){
　　if(a===b){
　　　　return 0;
　　}
　　if(typeof a === typeof b){

　　　　return a<b ? -1 : 1;
　　}
　　return typeof a < typeof b ? -1 : 1;

});
alert(m);// 2,4,12,aa,b

如果需要以对象数组的某一熟悉为关键字进行排序

var by=function(name){
return function(o,p){
var a,b;
if(o && p && typeof o === 'object' && typeof p ==='object'){
a=o[name];
b=p[name];
if(a===b){
return 0;
}
if(typeof a === typeof b){
return a<b ? -1 : 1;
}
return typeof a < typeof b ? -1: 1;
}else{
throw{
name:'error',
message:'expected an object when sorting by '+name
}
}

}
};

var s=[
{first:'moe',last:'besser'},
{first:'joe',last:'haha'},
{first:'joe',last:'abc'}
];

s.sort(by('first'));

s=[
{first:'joe',last:'haha'},
{first:'joe',last:'abc'},
{first:'moe',last:'besser'}
];

上述排序，发现仅按单个key排序时，

{first:'joe',last:'haha'}排在了{first:'joe',last:'abc'}

如果需要last为abc的对象排在前面，就需要基于多个key进行排序，此时可让by第二个参数为一个比较函数

var by=function(name,minor){
return function(o,p){
var a,b;
if(o && p && typeof o === 'object' && typeof p ==='object'){
a=o[name];
b=p[name];
if(a===b){
return typeof minor === 'function' ? minor (o,p) : 0;
}
if(typeof a === typeof b){
return a<b ? -1 : 1;
}
return typeof a < typeof b ? -1: 1;
}else{
throw{
name:'error',
message:'expected an object when sorting by '+name
}
}

}
};

var s=[
{first:'moe',last:'besser'},
{first:'joe',last:'haha'},
{first:'joe',last:'abc'}
];

s.sort(by('first',by('last')));

s=[
{first:'joe',last:'abc'},
{first:'joe',last:'haha'},
{first:'moe',last:'besser'}
];
};

1.2 Array.prototype.splice()

array.splice(start,deleteCount,item...)方法从array中移除一个或多个元素，并用新的item替换他们。start是移除元素的开始位置，deleteCount是要移除的元素个数，如有额外插入的参数，这些item将被插入到所移除元素的位置上。返回一个包含被移除元素的数组。

var a=['a','b','c'];
var r=a.splice(1,1,'ache','bug');
//a是['a','ache','bug','c']
//r是['b']

splice实现代码和详细解读

Array.prototype.splice=function(start,deleteCount){
var max=Math.max,
min=Math.min,
delta,//偏移量
element,
insertCount=max(arguments.length-2,0),//排除掉arguments参数中,start,deleteCount,剩余是待插入元素
k=0,
len=this.length,//对array调用时，this指向当前数组
new_len,
result=[],//返回数组
shift_count//需移位的数量;

start = start || 0;//start默认值为0
if(start<0) start+=len;//start<0时，从数组后端开始
start=max(min(start,len),0);//经过处理，0<=start<=len
deleteCount=typeof deleteCount === 'number' ? deleteCount : len;//deleteCount默认值是len
deleteCount=min(deleteCount,len-start);//deleteCount<=可删除数量
deleteCount=max(deleteCount,0);//0<=deleteCount<=可删除数量

delta=insertCount-deleteCount;
new_len=len+delta;

//获取删除元素
while(k<deleteCount){
element=this[start+k];
if(element!=undefined){
result[k]=element;
}
k +=1;
}
shift_count=len-start-deleteCount;
//待插入数量小于删除数量，原数组后续元素依次向左偏移
if(delta<0){
k=start+insertCount;//从start至start+insertCount留给待插入元素
while(shift_count){
this[k]=this[k-delta];
k+=1;
shift_count-=1;
}
this.length=new_len;
}
//待插入数量大于删除数量，原数组后续元素依次向右偏移
else if(delta>0){
k=1;
while(shift_count){
this[new_len-k]=this[len-k];
k+1;
shift_count-=1;
}
//this.length=new_len;非必须，因给一开始this[new_len-k]赋值时，length属性已经自动设置为数组最后元素下标值
}
//delta===0 时，待插入数量等于删除数量，无需偏移

//最后将待插入元素插入原数组
for(k=0;k<insertCount;k+=1){
this[start+k]=arguments[k+2];//排除掉arguments参数中start和deleteCount
}
return result;
});

1.3 Array.prototype.slice()

array.slice(start,end)方法是对array中一部分做浅复制，end参数可选，默认为array.length

注意，slice方法不改变原数组，返回新的结果数组

var a=['a','b','c'];
var b=a.slice(0,1);//b是['a']
var c=a.slice(1);//c是['b','c']
alert(a);//['a','b','c']

1.4 Array.prototype.push()、Array.prototype.pop()

push、pop方法可以实现栈的先进后出。

push(item...)方法将一个或多个参数item附加到一个数组的尾部，返回数组新的长度值

var a=['a','b','c'];
var b=[1,2];
var c=a.push(b,true);
//a=['a','b','c',[1,2],true];
//c=5

push方法实现和详细解读

Array.prototype.push=function(){
//对arguments对象通过array.slice方法转换成数组
var args=Array.prototype.slice.apply(arguments);
//通过array.concat，连接两个数组
var params=[this.length,0].concat(args);
//对数组调用splice方法,start=this.length,deleteCount=0,insertItems=args
this.splice.apply(this,params);
//返回新的数组length
return this.length;
});
//上述步骤合并，简写为下面方式
Array.prototype.push=function(){
this.splice.apply(
this,
[this.length,0].concat(Array.prototype.slice.apply(arguments)));
return this.length;
});

pop方法移除array最后的一个元素并返回该元素，array为空时，返回undefined

var a= ['a','b','c'];
var c = a.pop();
//a是['a','b'],c是'c'

Array.prototype.pop=function(){
//start=this.length-1,deleteCount=1，结果数组的第[0]个元素
return this.splice(this.length-1,1)[0];
}

1.5 Array.prototype.shift()、Array.prototype.unshift()

array.shift()方法移除数组array中第一个元素并返回该元素。数组为空时，返回undefined

var a= ['a','b','c'];
var c = a.pop();
//a是['b','c'],c是'a'

shift可以这样实现

Array.prototype.shift=function(){
//start=0,deletecount=1,返回结果数组中第[0]个元素
return this.splice(0,1)[0];
}

unshift将item插入array的开始部分

var a = ['a','b','c'];
var r=a.unshift('?','@');
//a是['?','@','a','b','c'];
//r是5

unshift可以像这样实现

Array.prototype.unshift=function(){
//start=0,deleteCount=0,insertItems=arguments
this.splice.apply(this,
[0,0].concat(Array.prototype.slice.apply(arguments)));
return this.length;
});