2016前端面试题总结
2016-11-05
1：I believe I can fly.按字母表顺序排列
function compare(s1,s2){
if(s1.toLowerCase() > s2.toLowerCase()){
return 1;
}
else if(s1.toLowerCase() == s2.toLowerCase()){
return 0;
}
else{
return -1;
}
}
var s = “I believe I can fly”;
var s_arr = s.split(” “);
var new_s_arr = s_arr.sort(function(a,b){
return compare(a,b);
});
console.log(new_s_arr.join(” “));
2：css实现水平和垂直居中
.parent{
position:relative;
background: red;
width: 500px;
height: 500px;
}
.child{
position: absolute;
width: 100px;
height: 100px;
top:0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow: auto;
background: green;
}
jfdajfdajfjdajafdjfdjaafjdsjfds
</div>
.parent{
position: relative;
background: red;
width: 500px;
height: 500px;
}
.child{
position: absolute;
width: 100px;
height: 100px;
top:50%;
left: 50%;
margin-left:-50px;
margin-top:-50px;
overflow: auto;
background: green;
}
jfdajfdajfjdajafdjfdjaafjdsjfds
</div>
.parent{
width: 500px;
height: 500px;
position: relative;
background:green;
}
.child{
position: absolute;
top:50%;
left:50%;
transform: traslate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background: pink;
}
关键是top,left和transform的定义
.wrapper{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 300px;
height: 300px;
background: red;
}
.center{
background:#393;
color:#fff;
width: 100px;
height: 100px;
margin:0 auto;
}
.wrapper{
display: flex;
justify-content:center;
align-items:center;
width: 300px;
height: 300px;
background: red;
}
.center{
background:#393;
color:#fff;
width: 100px;
height: 100px;
}
3：apply，call和bind函数的区别
var xw = {
name : “小王”,
gender : “男”,
age : 24,
say : function(school,grade) {
alert(this.name + ” , ” + this.gender + ” ,今年” + this.age + ” ,在” + school + “上” + grade);
}
}
var xh = {
name : “小红”,
gender : “女”,
age : 18
}
call方法
xw.say.call(xh,”实验小学”,”六年级”);
apply方法
xw.say.apply(xh,[“实验小学”,”六年级”]);
bind方法
xw.say.bind(xh)(“实验小学”,”六年级”);
或者
xw.say.bind(xh,”实验小学”,”六年级”)();
call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以