前端面试

最新推荐文章于 2021-08-10 17:02:21 发布

barnett_y

最新推荐文章于 2021-08-10 17:02:21 发布

阅读量639

点赞数 1

分类专栏：【前端面试点滴知识】

【前端面试点滴知识】专栏收录该内容

299 篇文章 39 订阅

订阅专栏

http://www.cnblogs.com/bhan/p/6733890.html

1.以下代码，alert出来的值是多少？

alert(1&&2); // 2

alert(1||2); // 1

2.验证字符串的组成规则，第一个须为数字，后面可以是字母、数字、下划线，总长度为5-20位

/^\d{1}[\w|_|\d]{4,19}$/

3.以下代码，alert出来的值是多少。

4.以下代码alert 出来的值是多少

1: css选择符有class类选择符还有另外2种是什么？按优先级排序？

id选择符和标签选择符

id选择符 > class选择符 > 标签选择符

2: 前端页面有行为层js和另外2个层是什么？作用是什么？

结构层html和样式层css

行为层：主要指页面交互、动画效果

结构层：主要指DOM节点

样式层：主要是指页面渲染

3: 你做的页面在哪些内核浏览器测试过？

Trident内核代表产品Internet Explorer，又称其为IE内核。

Gecko内核代表作品Mozilla 使用它的浏览器有Firefox、Netscape6至9

WebKit内核代表作品Safari、Chromewebkit

Presto内核代表作品OperaPresto

4: 在JQuery中被誉为工厂函数的是( c )

(a) ready()

(b) function()

(d) factory()

5: setTimeout("buy", 2000) 表示的意思是( c )

(a) 间隔 2000 秒后， buy()函数被调用一次

(b) buy() 函数被持续调用 2000 次

(d) 间隔 2 分钟后， buy()函数被调用一次

1. HTTP状态码及其含义

100-199 : 表示成功接收请求, 要求客户端继续提交下一次请求才能完成整个处理过程
200-299: 表示成果接收请求并已完成整个处理过程. 常用200
300-399: 为完成请求, 客户需进一步细化需求: 例如: 请求的资源已经移动一个新地址, 常用302(重定向), 307和304(拿缓存)
400-499: 客户端的请求有错误, 包含语法错误或者不能正确执行. 常用404(请求的资源在web服务器中没有) 403(服务器拒绝访问, 权限不够)
500-599: 服务器端出现错误常用:
200 　　正常　　表示一切正常, 返回的是正常请求结果
302/307　　临时重定向　　指出请求的文档已被临时移动到别处, 此文档的新的url在location响应头中给出
304　　未修改　　表示客户机缓存的版本是最新的, 客户机应该继续使用它
403　　禁止　　服务器理解客户端请求, 但拒绝处理它, 通常用于服务器上文件或目录的权限设置所致
404　　找不到　　服务器上不存在客户机所请求的资源
500　　服务器内部错误　　服务器端的cgi, asp, jsp等程序发生错误

2. 设置元素浮动后，该元素的display值是多少？

block

设置position:absolute/fixed、float:left/right的时候，行内元素会变成了块级元素，他们本身的display属性被忽略了。

3. 请描述cookies、sessionStorage 和 localStorage 的区别?

共同点：都是保存在浏览器端

区别：cookies缓存 sessionStorage会话存储 localStorage本地存储

1.cookies存储在http信息的实体中，http每次请求都会携带cookie, cookie在浏览器和服务器间来回传递，后两者仅在本地保存

2.存储大小：cookie数据不能超过4k; 后两者要大很多，可以达到5M；

3.有效期：cookie在设置的cookie有效期之前有效，即使浏览器或窗口关闭；sessionStorage仅在当前浏览器窗口关闭前有效，不可持久保存；localSorage始终有效，窗口或浏览器关闭也一直保存，可做持久数据；

4.作用域：cookie、localStorage在所有的同源窗口中都是共享的；sessionStorage只能在当前页面使用。

4. 请你解释你对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局?

盒模型：文档中的每个元素被描绘为矩形盒子，渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。

　　在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin edge，边框边界border edge，内边距边界padding edge和内容边界content edge。

盒子模型分为两类：W3C标准盒子模型和IE盒子模型

　　这两者的关键差别就在于：

　　1.W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含填充（padding）和边框（border） box-sizing:content-box

　　2.IE盒子模型——属性高（height）和属性宽（width）这两个值包含填充（padding）和边框（border） box-sizing:border-box

　　我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型）。

5. 下面的语句的返回值是什么？

弹出66

6. 下面两个alert的结果是什么？

1     var foo = "Hello";
2     (function() {
3       var bar = "world";
4       alert(foo + bar);
5     })();
6     alert(foo + bar);

考察闭包

第一个弹出Hello world 第二个bar没有定义会报错

7. 下面foo.x的值是什么？

1     var foo = {n: 1};
2     var bar = foo;
3     foo.x = foo = {n: 2};

undefined

参考https://segmentfault.com/a/1190000002965140

https://segmentfault.com/a/1190000004224719

8. 下面代码的输出是什么？

1     console.log('one');
2     setTimeout(function() {
3       console.log('two');
4     }, 0);
5     console.log('three');

9. 对ES6的了解？

箭头操作符、let和const关键字、支持类、字符串模板、for of 遍历、模块、 Promises等

题目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 }

barnett_y

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端面试

http://www.cnblogs.com/bhan/p/6733890.html1.以下代码，alert出来的值是多少？alert(1&&2); // 2alert(1||2); // 12.验证字符串的组成规则，第一个须为数字，后面可以是字母、数字、下划线，总长度为5-20位/^\d{1}[\w|_|\d]{4,19}$/3.以下代码，al
复制链接

扫一扫