【前端面试--四月二十家前端面试题分享】1-5套个人解题答案

2017-04-14 本文已影响3262人姚冰coding

注意：解法错误颇多，请一定要看评论，评论中指出了很多错误！！！

前端面试题

个人解题答案，错误肯定不少，求review。

第一套：

题目1：CSS实现垂直水平居中，HTMl结构如下：

<div class="box">
    <div class="con"></div>
<div>

解：

.con{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

题目2：写出原生js或者JQ循环下面的`<li>`内容

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

解：

    var li=document.getElementsByTagName('li');
    for (var i = 0; i < li.length; i++) {
        console.log(li[i].innerHTML);
    }

var li=$("li");
    for (var i = 0; i < li.length; i++) {
        console.log(li.eq(i).html());
    }

题目3：ajax请求的时候get和post方式的区别，用jQ写出ajax请求。

解：

get-请求服务器资源，不会在http上显示
post-向指定的资源提交要处理的数据，在http上面进行字符串拼接

$.ajax({
    url:url,
    data:data,
    success:success,
    dataType:dataType
});

POST:

$.ajax({
    type:'POST',
    url:url,
    data:data,
    success:success,
    dataType:dataType
});

Get：

$.ajax({
    url:url,
    data:data,
    success:success,
    dataType:dataType
});

题目4：js中函数split(),join()区别

解：

split()把一个字符串分割成数组
join（）把数组中的元素放入一个字符串
两者可以理解为相反的过程

题目5：熟悉微信小程序吗？什么是微信小程序？

不熟悉....
微信小程序是微信推出的新能够，不需要按照，扫描二维码即可使用。

大题：

如图所示有一个对象为树形结构，每个节点结构为：

node：{id='xxx',name='xxx',children:[node,node,node,...]},每个id唯一，当没有子节点时，children为false

WX20170414-122826.png

现有一需求，给出id输出node信息，请完成方法getNodeById。

var data={id='xxx',name='xxx',children:[node,node,node,...]};
var id='aaa';
var node=getNodeById(data,id);
console.log(node);

答题要求，先写出解题思路，在进行编码。

解：

第二套：

1.HTTP状态码及其含义

2Xx:请求成功
3xx:重定向
4xx:客户端错误
5xx:服务器错误

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

display:blcok

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

特性	Cookie	sessionStorage	localStorage
数据的生命周期	一般由服务器生成，可以设置失效时间，如果在浏览器端生成Cookie，默认关闭浏览器后失效	仅在当前会话下有效，关闭页面或浏览器后被清除	除非被清除，否则永久保存
存放数据大小	4k左右	一般为5m	一般为5m
与服务器端通信	每次都会携带在HTTP头中，如果保存过多数据，会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

4.请解释你对盒模型的理解，以及如何在css中告诉浏览器使用不同的盒模型。

标准盒子模型：
总宽度 = width + border(左右) + padding(左右) + border(左右)

14921478211030.jpg

怪异盒子模型：
总宽度 = width + margin(左右)

14921478076474.jpg

box-sizing:border-box;
box-sizing:content-box;

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

var a=6;
setTimeout(function(){
    
    console.log(a);
    a=666;

},1000)
a=66;

解：

66
理解：setTimeout()在xx毫秒之后调用一次，setInterval()在xx毫秒之后调用多次

var a = 6;
function b() {

    console.log(a);
    a = 666;
}
b();
var a = 66;
//结果：6

var a = 6;

function b() {
    a = 666;
    console.log(a);
    
}
b();
var a = 66;
//结果：666

这题考察的是函数作用域的问题，原题目执行顺序是：

var a=6;
a=66;
setTimeout(function(){
    
    console.log(a);
    a=666;

},1000)

在变量a在全局作用域中已经变成了66，在函数中，因为a在前面调用，所以就会向全局作用域寻找a，找到66.如果是这样：

var a=6;
a=66;
setTimeout(function(){
    a=666;
    console.log(a);
},1000)

那么打印出来的就是666，因为在函数中已经声明了a=666;

第三套

题目1.css选择符有哪些？按照优先级进行排序。

id>class>tagname

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

HTML 结构层前端页面结构
CSS 表现层前端页面样式

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

Trident - ie内核
Gecko - firefox内核
Webkit - chrome safari
Presto - opera（前任），现在opera也使用webkit

题目4.在Jquery中被誉为工厂函数的是()

a)ready()
b)function()
c)$()
d)factory()

解：

选择：c

题目5.setTimeout("buy()",2000)表示的是：

解：

间隔2秒后，buy()函数被调用一次，且仅被调用一次

第四套

要动态改变层中内容可以使用的方法：innerHTML
当按键盘A时，使用oneKeyDown事件打印event.keyCode的结果是：13(这题好没意思)
在javascript里，不属于数组方法的是：length()
注：数组length是属性，调用方式arr.length,没有括号
检索被选定的选项的索引号：selectedIndex
希望图片具有“提交”按钮同样的功能，如何编写表单提交：在图片的onSubmit事件中手动提交（不确定）
ping基于什么协议：ICMP
注：ping在主机和服务器之间传递控制消息，属于ICMP协议，但是ICMP协议是TCP/IP的子协议。。。
C

var emp = newArray(3);
for(var i in emp)

==
for(var i=0;i<emp.length;i++)

制作级联菜单功能时调用的下拉列表框是什么事件：onChange
数组声明方式：

var arry=new Array;
var arry=new Array();

实现层的隐藏：display:none
太多了...略

第五套

1.写出以下值

alert(1&&2);
alert(1||2);

解：

alert(1&&2);//2
alert(1||2);//1

1、只要“||”前面为false，无论“||”后面是true还是false，结果都返回“||”后面的值。

2、只要“||”前面为true，无论“||”后面是true还是false，结果都返回“||”前面的值。

3、只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

4、只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

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

解：

var c=/^[\d]{1}[/w]{4,19}/
c.test(string)

3.以下代码，alert值是多少？

window.val = 1;
var json = {
    val: 10,
    dbl: function() {
        this.val *= 2;
    }
};
json.dbl();
var dbl = json.dbl;
dbl();
json.dbl.call(window);
alert(window.val + json.val);

解：

值为：24

window.val = 1;
var json = {
    val: 10,
    dbl: function() {
        this.val *= 2;
    }
};
json.dbl();//通过json调用dbl方法，把json里面的val改为20
var dbl = json.dbl;//把dbl函数赋值给dbl
dbl();//全局作用域，调用dbl()函数，把window的val改为2
json.dbl.call(window);//同上，window的val改为4
alert(window.val + json.val);//4+20=24

4.以下代码，alert值是多少？

(function() {
    var val = 1;
    var json = {
        val: 10,
        dbl: function() {
            val *= 2;
        }
    };
    json.dbl();
    alert(json.val + val);
}());

解：

12

(function() {
    var val = 1;
    var json = {
        val: 10,
        dbl: function() {
            val *= 2;
        }
    };
    json.dbl();//这里调用的是val=1，如果这里是this.val则指向json内部
    alert(json.val + val);//10+2=12;
}());

6.以下代码，alert值是多少？

var foo = 'Hello';
(function() {
    var bar = 'World';
    alert(foo + bar);
})();
alert(foo + bar);

解：

var foo = 'Hello';
(function() {
    var bar = 'World';
    alert(foo + bar);//HelloWorld
})();
alert(foo + bar);//报错，因为bar未定义

7.foo.x的值是什么？

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

解：

undefined
解答

8.写出以下代码的输出内容

console.log('one');
setTimeout(function() {
    console.log('two');
}, 0);
console.log('three');

解：

❌:one,two,three
这题考察了setTimeout(Fn,time)的异步机制
参考资料：详解setTimeout(fn,0)

9.你对ES6的了解有哪些？

略...