淘宝07招聘题(1.css定位 2.js去重复) 我的解法

题目见http://ued.taobao.com/blog/2007/11/20/job_test_explanation/

1.使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。

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

1.

#xxx{
text-align:center;
width:200px;
height:200px;
border:1px solid #ff0;
vertical-align: middle;
display: table-cell;
}
#xxx img{
/* ff和opera已经正确居中,这里只需要对ie hack,以毒攻毒  */
margin-top:expression(100-this.height/2);
}

2.
对于css选择器等等应用,性能是一个很大的问题,我优先考虑效率:)
如果被gmail2.0,csdn的blog等等,卡得半死过的话,就知道性能是一个永恒的问题

Array.prototype.unique=function(){
  var temp=[],objlist=[],dict={};
  for(var i=this.length-1;i>=0;--i){
    if(typeof (this[i])=="object"){//还有function等

//可以动态根据时间生成一个uuid为名字的属性,以免覆盖
//比如var exist=__exist+(new Date()).getTime()
//然后用this[i][exist]访问
      if(this[i].__exist){
        temp.push(this[i]);
      }else {
        this[i].__exist=1;
        objlist.push(this[i]);
      }
    }else {
      if(this[i] in dict){
        temp.push(this[i]);
      }else {
        dict[this[i]]=1;
        objlist.push(this[i]);
      }
    }
  }
  for(var i=objlist.length-1;i>=0;--i){
    objlist[i].__exist=null;
    this[i]=objlist[i];
  }
  this.length=objlist.length;
  return temp;
};
var a=[1,2,3,3,2,1,2];
alert(a.unique());
alert(a);

评论

15 楼 hax 2008-01-07  

使用sort的同志，请执行：

alert(['1',1,'1',1,'1',{toString:function(){return '1'}},{valueOf:function(){return 1}}].sort().map(function(x){return x + ' ' + typeof x}))

注：所用的map()是javascript 1.6增加的方法，spidermonkey(ff)和rhino有原生支持，其它引擎中要自己写一个。

14 楼 yanzimywife 2008-01-07  

引用

题2 太简单了，1分钟搞定

执行最快速，代码最精减,

Array.prototype.unique=function(){
this.sort();
var a = [];
for(var i=this.length-1;i>-1;i--)
{
if( this[i] != a[ a.length - 1 ] )
a.push(this[i]);
}
return a;
}

alert([1,2,3,3,2,1,34,2,8,9,23,6,7,3,9,23,4,32,3,0,43].unique());

咱们想到一块去了,呵呵!

13 楼 hax 2007-12-28  

zcfg 写道

楼主过于自恋了，在css中用expression绝对是下下之举；还有你的unique方法，在数组中加个元素null，再试试？

你也有点自恋。就这个题目来说，用expression是ok的。至于null的问题，原题本身就不严谨。当然如果做题的人做的严谨一点当然更好。

12 楼 chpn 2007-12-28  

<script>
Array.prototype.getDistinctItems=function(){
	var tmp=this.slice(0,this.length).sort();
	var a = [];
	for(var i=tmp.length-1;i>-1;i--)
	{
		if(typeof tmp[i] !="undefined" &&  tmp[i] != a[ a.length - 1 ] )
			a.push(tmp[i]);
	}
	return a;
}
alert([1,2,3,3,2,1,3,34,2,234,223,23,332,221,3,33,23,4,32,32,323,43].getDistinctItems());
</script>

11 楼 chpn 2007-12-28  

题2 太简单了，1分钟搞定

执行最快速，代码最精减,

Array.prototype.unique=function(){
this.sort();
var a = [];
for(var i=this.length-1;i>-1;i--)
{
if( this[i] != a[ a.length - 1 ] )
a.push(this[i]);
}
return a;
}

alert([1,2,3,3,2,1,34,2,8,9,23,6,7,3,9,23,4,32,3,0,43].unique());

10 楼 dingyuan 2007-12-13  

这个题目出得就强人所难，本身这个问题最好就用表格，用这么多方法，写这么多代码，不如嵌入一个表格实际...w3c从来就没有把表格踢出标准之外，表格也属于盒模型的范围

9 楼 zcfg 2007-12-13  

楼主过于自恋了，在css中用expression绝对是下下之举；还有你的unique方法，在数组中加个元素null，再试试？

8 楼 zuroc 2007-12-13  

afcn0 写道

首先我不知道uniq大都应该出现在什么场合，个人认为不知道干什么用，其次性能来说，当然是使用js1.6的Array新方法indexOf性能最好，其次如果没有原生indexOf或者原生indexOf效率不好，那最简单的也就是splice和i--;这也是比较简单的，比较效率高的。但从语法上理解，这个效率是最高的，因为其他的使用中间数组的，如果要修改原数组引用都需要2次循环。但是对于不需要修改原数组引用，include判断显然最合适。

我晕倒,看看算法的复杂度,indexOf是O(n^2),我的对应于html element是O(n)

7 楼 afcn0 2007-12-13  

首先我不知道uniq大都应该出现在什么场合，个人认为不知道干什么用，其次性能来说，当然是使用js1.6的Array新方法indexOf性能最好，其次如果没有原生indexOf或者原生indexOf效率不好，那最简单的也就是splice和i--;这也是比较简单的，比较效率高的。但从语法上理解，这个效率是最高的，因为其他的使用中间数组的，如果要修改原数组引用都需要2次循环。但是对于不需要修改原数组引用，include判断显然最合适。

6 楼 zuroc 2007-12-12  

"如果一架飞机看起来很棒,那它一般飞的也不差"]
我也听说
"金玉其外，败絮其中也哉"
"人不可貌相"
哲学的游戏永远没有结论

"清晰的逻辑用最简单的代码"
这是依靠封装而不是把实际问题想象得简单:)

当然实际问题简单时也没有必要复杂化
但是unique是一个很常用的操作,在纯ajax网页(比如gmail)中往往要处理大量数据.
所以我认为:
每天都用的轮子应该优先考虑性能
正如
我们要用节油的汽车:O

5 楼 afcn0 2007-12-12  

怎么说呢,一句话,就和哪个什么飞机一样,如果一架飞机看起来很棒,那它一般飞的也不差,web开发也是,应该把清晰的逻辑用最简单的代码表述出来,用最正确的工具解决最需要解决的问题才是问题的关键,如果代码看起来很好,那它一般工作起来也不次,所以如果使用最正确解决办法,和最清晰代码会给高分,性能是一个很有趣的问题,webkit opera jscript spidermonkey rhino都不一样,任何性能优化都是建立在大量实现测试上的,纯逻辑说什么性能好比较空.

4 楼 zuroc 2007-12-12  

1.
"expression始终是css之外的东西,web就是要分离css js才要避免使用expression"

是 用药疗毒 还是 以毒攻毒 都有用处
2.
"uniq重要的不是性能"
如果用gmail2.0的话,被csdn的blog卡的半死的话,就知道性能是一个永恒的问题

3 楼 afcn0 2007-12-12  

jquery怎么做不代表那么做就是正确的,expression始终是css之外的东西,web就是要分离css js才要避免使用expression,并且也根本没有必要,宁可使用table一行一列垂直居中我也不用expression,uniq重要的不是性能,而是严谨,逻辑清晰,所以这样写

Array.prototype.include=function(object){   
for (var i=0;i<this.length;i++)   
{   
if (object==this[i])   
return true;   
}   
return false;   
}   
Array.prototype.uniq=function(){   
var temp=[];   
for (var i=0;i<this.length;i++ )   
{   
if(!temp.include(this[i]))   
temp.push(this[i]);   
}   
return temp;   
}   
Array.prototype.selfUniq=function(){   
var temp=this.uniq();   
this.length=0;   
for (var i=0;i<temp.length;i++)   
{   
this.push(temp[i]);   
}   
return this;   
}   

是最严谨,当然即使这样,还是要考虑弱类型转换之间的问题,那就看需要是否===了

2 楼 zuroc 2007-12-12  

jquery在对__exist属性做法是动态根据时间生成一个uuid为名字的属性

expression不错:)ff和opera已经正确居中,这里只需要对ie hack

1 楼 afcn0 2007-12-12  

第一,expression不能用,解法background最好
第二,unique,太费劲,来回来去倒动好几次,还对于object类型实行了侵入属性,如果原来对象存在_exist属性呢,所以不好,最后=null不好,使用delete,我的给分65分