前端经典面试题

一、JavaScript全局变量和全局函数
1.全局变量：
Infinity：无穷大的数值；
NaN：判断某个值是不是数字值；
undefined：未定义的值；
2.全局函数：
decodeURI(): 解码某个编码的URI；
decodeURIComponent(): 解码一个编码的URI组件；
encodeURI(): 把字符串编码为URI；
encodeURIComponent(): 把字符串编码为URI组件；
escape(): 对字符串进行编码；
eval(): 计算JavaScript字符串，并把它作为脚本代码执行；
isFinite(): 检查某个值是否是数字；
isNaN(): 检查某个值是否是数字；
Number(): 把对象的值转换为数字；
parseFloat(): 解析一个字符串并返回一个浮点数；
parseInt(): 解析一个字符串并返回一个整数；
String(): 把对象的值转换为字符串；
unescope(): 对由escape()编码的字符串进行解码；

二、二叉树求和

三、为es5的Array写forEach
// forEach 用于调用数组中的每个元素，并将元素传递给回调函数
Array.prototype.forEach = function(cb) {
for (var i=0;i < this.length;i++) {
cb(this[i], i);
}
return this;
}

array.forEach(function(currentValue, index, arr), this.value);

四、垂直居中的css
1.display: flex
.box {
display: flex;
justify-content: center;
align-items: center;
}
2.绝对定位和负边距
.box { position: relative; }
.box span {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -50px;
text-align: center;
}
3.display: table-cell
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}

五、深克隆对象
function deepCopy(source) {
const result = [];
Object.keys(source).forEach((key) => {
result[key] = typeof source[key] === 'object' ? this.deepCopy(source[key]) : source[key];
});

return result;
}

var obj = {
name: 'lyn',
age: 18
};

let lynObj = deepCopy(obj);
console.log(lynObj); // [name: 'lyn', age: 18] 将克隆对象的属性属性值存到一个集合里

六、清除浮动
1.overflow: hidden
给父元素添加overflow: hidden属性；
2.clear: both
在浮动元素下面添加一个空元素，定义：
.clear {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
3.定义:after
.parent :after {
clear: both;
content: '';
display: block;
width: 0;
height: 0;
visibility: hidden;
}

七、块元素行内元素空元素
1.块元素
ul, ol, li, dd, dt, p, h1...h6, div, table, address, fieldset,tbody, tfoot, thead, td
2.行内元素
span, input, a, textarea, label, select, radio, big,
3.空元素
img, hr, br, link, meta, embed, area

八、盒子模型有多少种
盒子模型有两种：标准w3c盒子模型、IE盒子模型
IE盒子模型：width和height包括padding、margin；
w3c盒子模型：width和height不包括content、padding、border、margin四个部分；

九、跨域处理和jsonp原理
主流处理跨域问题的3种方法：iframe，jsonp，CORS
jsonp原理：
因为浏览器使用了同源策略，所以ajax不能访问跨域资源。但是浏览器能够跨域请求标签内的某些外链内容，jsonp就是利用这一点，利用createElement创建一个script标签，然后给script的src属性赋值，此时可以获取得到跨域的js脚本。利用这个特性，服务端不再返回json格式的数据，而是返回一段调用某个函数的代码，在src中进行了调用，这样就实现了跨域。

a、前端请求：
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
</body>
</html>

b、jquery提供了jsonp方法：
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://www.practice-zhao.com/student.php?id=1",
dataType: "jsonp",
jsonp:"callback", //请求php的参数名
jsonpCallback: "jsonhandle",//要执行的回调函数
success : function(data) {
alert("age:" + data.age + "name:" + data.name);
}
});
});
</script>
</body>
</html>

后端代码：
<?php
$data = array(
'age' => 20,
'name' => '张三',
);

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";
return;

十、h5新标签有哪几个
canvas, audio, viedo, article, section等

十一、描述从URL到网页渲染的过程
1.浏览器输入url后会新开一个窗口，并开启一个网络请求进程。
2.浏览器会解析url，查找浏览器缓存--操作系统缓存--路由器缓存，看是否有当前url的映射。若有，直接向对应ip进行网络请求。若无，则访问dns解析器进行域名解析，拿到对应ip。
3.浏览器向获取到的目标服务器发送http请求，此时客户端会与服务器端进行三次握手来建立http连接。
4.服务器收到来自客户端的请求，会对应后台程序，运行后台代码，进行请求处理，返回处理后的数据。
5.浏览器收到返回后的数据，开始解析（html，css，JavaScript，图片，视频等）；
6.浏览器绘制页面。
7.http四次握手，连接结束。

十二、http请求头和响应头的处理
请求头：
Accept: image/gif, image/jpeg, ...
Accept-Language: zh-cn
Connection: Keep-Alive
Host: localhost
User-Agent: Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding: gzip,deflate
响应头：
Server: Apache Tomcat/5.0.12
Date: Mon,6oct2003 13:13:33 GMT
Content-Type: text/html
Last-Moified: Mon,6Oct 2003 13:23:42 GMT
Content-Length: 112

猜你喜欢