2016前端面试题总结

最新推荐文章于 2024-03-01 10:10:17 发布

我行我上

最新推荐文章于 2024-03-01 10:10:17 发布

阅读量589

点赞数 1

分类专栏：前端开发文章标签：面试题前端

本文链接：https://blog.csdn.net/yangjidaimin/article/details/60608413

版权

前端开发专栏收录该内容

37 篇文章 0 订阅

订阅专栏

css

1: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;
}
<div class="parent">
  <div class="child">
    <p>jfdajfdajfjdajafdjfdjaafjdsjfds</p>
    <div>kfdksafkakfdskafdfskfdk</div>
  </div>
</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;
}
<div class="parent">
  <div class="child">
    <p>jfdajfdajfjdajafdjfdjaafjdsjfds</p>
    <div>kfdksafkakfdskafdfskfdk</div>
  </div>
</div>

transform让百分比布局元素水平垂直居中

.center{
position: absolute;
top: 50%;
left: 50%;
width:50%;
height:30%;
padding:20px;
text-align:center;
background:#393;
color:#fff;
transform: translate(-50%, -50%);
}
<div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div>

关键是top,left和transform的定义
table-cell实现水平和垂直居中

.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;
}
<div class="wrapper">
  <div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div>
</div>

flex弹性布局实现居中

.wrapper{
  display: flex;
  justify-content:center;
  align-items:center;
  width: 300px;
  height: 300px;
  background: red;
}
.center{
background:#393;
color:#fff;
width: 100px;
height: 100px;
}
<div class="wrapper">
  <div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div>
  </div>

2:怎么清除浮动以及原理？BFC是什么有什么作用？

3:怎么实现左右各100px定宽布局，中间宽度自适应？

4:div#a .b.c{}有什么问题

5：怎么实现如下布局

<body>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
</body>

当nav+content的高度小于屏幕高度-footer的高度时，footer一直固定在屏幕底部
当页面出现滚动条后footer在页面底部。

6：手机端如何实现1px的细线。

7:rem实现自适应布局的原理描述。

JS

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：apply，call和bind函数的区别

3：cookie，session，localStorage，sessionStorage的区别

localStorage，sessionStorage都是H5 web Storage API新增的方法，都是只在客户端存储数据，不会自动把数据发送给服务器，有效的避免在浏览器和服务器端传递数据，减少请求。cookie也把数据保存在服务器，但是会始终在同源的http请求中携带，即使不需要，即cookie来回在浏览器和服务器端传递，而session始终保存在服务器端，具体用法可参考PHP中session。
生命周期：localStorage除非主动删除，否则不会过期，在同源中有效；sessionStorage在同源同窗口中有效，窗口一旦关闭，sessionStorage就会失效。cookie能够设置有效期，也必须是同源。
大小限制：cookie一般不能超过4KB，localStorage和sessionStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
作用域：cookie可以设置作用域

4:数组去重

var a = [1, 3, 4, 5, 5, 6, 7, 7, 9, 9, 11, 17, 19, 20];
var b = {};
var c = [];
for(var i = 0; i< a.length; i++) {
  if(!b[a[i]]) {
    b[a[i]] = a[i];
    c[i] = a[i]
  }
}
console.log(c);

5:原生js实现insertAfter方法。

6:怎么把两个有序数组合并成一个有序数组

var a = [1,4,5,7,9,20];
var b = [3,5,6,7,9,11,17,19];
var c = a.concat(b);
c.sort(function(x, y) {
  return x - y;
});
console.log(c);

7:

 var a = [[1,1],[2,2],[3,3]];
  var b = a;
  b.push([4,4]);
  此时a  = b =  [[1,1],[2,2],[3,3],[4,4]];
  怎么实现b的值改变但不影响a的值？ 
 var b=a.concat([]);
  b.push([4,4]);

8:null和undefined的区别

9:alert(a);->referenceError

10:如何把类数组对象arguments变成真正的数组。

11:区分[]和{}

12:节流函数以及使用场景

13:图片懒加载

14：怎么实现边滚动变加载页面（分页请求数据）

15:怎么实现页面滚动停止执行某个事件？

16:js中this的指向问题。

17:实现二叉树先序查找算法。

18:闭包相关问题。

19:如何实现深度拷贝？

function deepCopy(p, c) {
  var c = c || {};
  for(var key in p) {
    if(p.hasOwnProperty(key)) {
      if(typeof p[key] === 'object') {
        c[key] = Array.isArray(p[key]) ? [] : c[key] || {};
        deepCopy(p[key], c[key]); 
      } 
    } else {
      c[key] = p[key];
    }
  }
  return c;
}

20：数组去重

var uniq = function(array) {
  return Array.prototype.filter.call(array, function(item,index) {
    return array.indexof(item) === index;
  })
}

未完待续