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

6,799 阅读6分钟
原文链接: www.jianshu.com

前端面试题

前端面试--四月二十家前端面试题分享

个人解题答案,错误肯定不少,求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()函数被调用一次,且仅被调用一次

第四套

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

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

  9. 制作级联菜单功能时调用的下拉列表框是什么事件:onChange

  10. 数组声明方式:
var arry=new Array;
var arry=new Array();
  1. 实现层的隐藏: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的了解有哪些?

略...