二十家公司前端面试题（一）
题目1:CSS实现垂直水平居中
1.弹性盒子方法
给父容器设置dispaly: flex; justify-content: center; align-items: center
2.绝对定位居中
1 .box2 { 2 position: relative; 3 } 4 .con2 { 5 margin: auto; 6 position: absolute; 7 top: 0; 8 right: 0; 9 bottom: 0; 10 left: 0; 11 }
3负边距居中
设外盒子100px宽高，内盒子50px宽高
1 .box3 { 2 position: relative; 3 } 4 .con3 { 5 position: absolute; 6 top: 50%; 7 left: 50%; 8 margin-left: -25px; 9 margin-top: -25px; 10 }
4变形
原理同3，把margin换成transform: translate(-50%, -50%)
题目2.写出原生js 或者 JQ框架循环出下面的li内容
1 <ul> 2 <li>text1</li> 3 <li>text2</li> 4 <li>text3</li> 5 <li>text4</li> 6 <li>text5</li> 7 <li>text6</li> 8 </ul>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>题目2.写出原生js 或者 JQ框架循环出下面的li内容</title> 8 </head> 9 <body> 10 <h3>题目2. 写出原生js 或者 JQ框架循环出下面的li内容</h3> 11 <ul></ul> 12 <script type="text/javascript"> 13 var oUl = document.querySelector('ul'); 14 for (var i = 0; i < 5; i++) { 15 var oLi = document.createElement('li'); 16 oLi.innerHTML = 'test' + (i+1); 17 oUl.appendChild(oLi); 18 } 19 </script> 20 </body> 21 </html>
题目3.get和post请求区别
1.GET请求将参数跟在url后进行传递， 而POST请求则是作为HTTP消息的实体内容发送给web服务器。当然在ajax请求中，这种区别对用户不可见；
2.GET方式对传输的数据大小有限制，通常不能大于2KB， 而POST方式传递的数据量要比GET方式大得多，理论上不受限制
3.GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下get会带来严重的安全问题，而post方式相对来说可以避免这些问题。
4.GET方式和POST方式传递的数据在服务器端的获取也不同
题目4.js中的函数 split() join() 的区别
1.split方法能把字符串反序列化为数组
2.split两个参数 以第一个参数进行分割，第2个参数用来限制数组的大小
3.join方法能把数组序列化为字符串, join方法后面可以跟match方法进行模式匹配
题目5.dom结点的深度优先遍历和广度优先搜索
1、深度优先遍历的递归写法
1 function deepTraversal(node) { 2 var nodes = []; 3 if (node != null) { 4 nodes.push(node); 5 var children = node.children; 6 for (var i = 0; i < children.length; i++) 7 deepTraversal(children[i]); 8 } 9 return nodes; 10 }
2、深度优先遍历的非递归写法
1 function deepTraversal(node) { 2 var nodes = []; 3 if (node != null) { 4 var stack = []; 5 stack.push(node); 6 while (stack.length != 0) { 7 var item = stack.pop(); 8 nodes.push(item); 9 var children = item.children; 10 for (var i = children.length - 1; i >= 0; i--) 11 stack.push(children[i]); 12 } 13 } 14 return nodes; 15 }
3、广度优先遍历的递归写法：
1 function wideTraversal(node) { 2 var nodes = []; 3 var i = 0; 4 if (!(node == null)) { 5 nodes.push(node); 6 wideTraversal(node.nextElementSibling); 7 node = nodes[i++]; 8 wideTraversal(node.firstElementChild); 9 } 10 return nodes; 11 }
4、广度优先遍历的非递归写法
1 function wideTraversal(selectNode) { 2 var nodes = []; 3 if (selectNode != null) { 4 var queue = []; 5 queue.unshift(selectNode); 6 while (queue.length != 0) { 7 var item = queue.shift(); 8 nodes.push(item); 9 var children = item.children; 10 for (var i = 0; i < children.length; i++) 11 queue.push(children[i]); 12 } 13 } 14 return nodes; 15 }
