前端面试题

前端面试题

个人解题答案，错误肯定不少，求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循环下面的

• 内容

<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的了解有哪些？
略…