20家前端面试题参考
2017-04-28 本文已影响1216人
土乒76
题目来自前端面试--四月二十家前端面试题分享，知道某一题目时可以直接ctrl+f找答案，有些选择题或者输出结果的题目就没放到这里，一起学习交流~
1、CSS实现垂直水平居中
<div class="box">
<div class="con"></div>
</div>
解：
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.con {
height: 100px;
width: 100px;
background-color: red;
}
2、原生JS或JQ循环出li中的内容
解：
// JS版本
var aLi = document.querySelectorAll('ul li');
aLi.forEach(function(item, index, arr){
console.log(item.innerHTML);
});
// JQ版本
$('ul li').each(function(index, item){
console.log(item.innerHTML);// item是原生的DOM元素喔
});
3、Ajax请求的时候GET和POST的区别
解：
GET大小限制，安全低，POST则相反
GET请求需考虑缓存问题，POST无需关心
POST请求必须设置Content-Type值为application/x-form-www-urlencoded
GET请求的参数写在url里，所以send函数发送的参数为null，而POST请求的数据需要写在send中
4、JS中函数split()和join()的区别
解：
// 根据传入参数的不同，字符串拆分成数组和数组拆分成字符串
var str = 'my name is moka.';
var arr = str.split(" ");
console.log(arr);// ["my", "name", "is", "moka."]
str = arr.join(" ");
console.log(str);// my name is moka.
5、熟悉微信小程序吗
解：
实事求是的随便扯点吧...去面试时可以先关注下该公司是否有做这个，根据情况往要点子上扯
6、HTTP状态码及其含义
解：
1开头表示信息类：收到请求正在处理中
2开头表示成功类：请求被正确接收，理解和处理，例如：200
3开头表示重定向类：请求失败
4开头表示客户端错误：请求有错误，例如：404代表请求内容不存在
5开头表示服务器错误：服务器不能完成对请求的处理：如 500
7、设置元素浮动后，该元素的display值是多少
解：
var oBox = document.querySelector('#box');
console.log(getComputedStyle(oBox, "null")['display']);// block
// PS：猛一瞅这题吓我一跳，难道不是block吗，事实就是block...
8、请描述cookie、sessionStorage、localStorage的区别
解：
同：
都是保存在浏览器端，且同源的（同协议，同域名和同端口）
异：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下；
cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；
数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，cookie在设置的过期时间之前一直有效；
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面，localStorage 在所有同源窗口中都是共享的，cookie也是在所有同源窗口中都是共享的；
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者，其api接口使用更方便
9、请解释你对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局
解：
W3C标准盒子模型：宽是宽，高是高
IE盒子模型：宽高包括padding和border
box-sizing: border-box;// 变为IE盒子模型
10、下面的语句的返回值是什么
var a = 6;
setTimeout(function(){
alert(a);
a = 666;
}, 1000);
a = 66;
解：
是66，setTimeout是异步的
11、CSS选择符有class选择符，还有另外两种是什么，按优先级
解：
选择符多了去了，后代、兄弟、属性，这里问的应该是常用的ID和标签，优先级：ID、class、标签
12、前端页面有行为层JS和另外两个层是什么，作用是什么
解：
HTML（结构）和CSS（样式），假如盖一个楼：HTML就是整体楼空荡荡的框架，CSS相当于粉刷装修，JS就是给屋子里面通电后，电视机，空调，电脑等一系列功能性的东西
13、你做的页面在哪些内核浏览器测试过，说出3种
解：
Trident(IE内核)
Gecko(Firefox内核)
Webkit(Safari内核)
14、在jQuery中被誉为工厂函数的是
解：
$()
我的第一印象以为是要问工具方法有哪些：$.extend()、$.type()、$.proxy()
15、要动态改变层中内容可以使用的方法有
解：
innerHTML/innerText
16、当按键盘A时，使用onkeydown事件打印even.keyCode的结果是
解：
65
17、能设置或返回下拉列表中被选选项的索引号是什么属性
解：
selectedIndex
18、希望图片具有”提交”按钮同样的功能,该如何编写表单提交
解：
在图片的onClick事件中手动提交
19、ping基于什么协议
解：
// 涨姿势了
ICMP：Internet控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息
20、JS如何操作select中的值
解：
// http://www.cnblogs.com/jiujiaoyangkang/p/6797315.html
21、console.log(1&&2)和console.log(1||2)结果是
解：
2和1，"&&"是同真才为真，开始1是真，还不能确定最终的结果，所以会继续往下运行是2，"||"是有真即真，1是真已经能确定结果就不会往下走了
22、下面代码的输出结果
解：
window.val = 1;
var json = {
val: 10,
dbl: function(){
this.val *= 2;
}
};
json.dbl();// json.val = 20
var dbl = json.dbl;
dbl();// window.val = 2
json.dbl.call(window);// window.val = 4
console.log(window.val + json.val);// 24
(function(){
var val = 1;
var json = {
val: 10,
dbl: function(){
val *= 2;
}
};
json.dbl();
alert(json.val + val);// 12
}());
var foo = "Hello";
(function(){
var bar = " world";
alert(foo + bar);// Hello world
})();
alert(foo + bar);// Uncaught ReferenceError: bar is not defined
(function func(){
var a = b = 'res';
})();
console.log(b);// res
console.log(a);// a is not defined
23、请实现下列的findDocList方法
var docs = [
{
id: 1,
words: ['hello','world']
},
{
id: 2,
words: ['hello','kids']
},
{
id: 3,
words: ['hello','dogs']
}
];
findDocList(docs, ['hello']);// 文档1，文档2，文档3
findDocList(docs, ['hello','world']);// 文档1
解：
function findDocList(docs, arr){
for(var i = 0;i < docs.length; i++){
var oBar = false;
for(var j = 0;j < arr.length; j ++){
var str = arr[j];
if(docs[i].words.indexOf(str) == -1){
oBar = true;
}
}
if(!oBar){
console.log('文档' + docs[i].id);
}
}
}
24、用JS写一个继承实例
解：
// 构造函数A
function A() {
this.name = 'aaa';
}
A.prototype.showName = function() {
console.log(this.name);
};
// 构造函数B
function B(){ /*...*/ }
// 继承开始
B.prototype = new A();
B.prototype.constructor = B;
// 使用
var b1 = new B();
b1.showName();
25、移动端如何适配不同手机屏幕，你的适配方案是什么
解：
百分比、REM、Flexible，后面展开说...
26、编写JS深度克隆函数deepClone
解：
// 浅拷贝
var json1 = {
name: 'aaa',
age: 25,
data: {
a: 1,
b: 2
}
};
function copy(parent, child) {
var child = child || {};
for(var i in parent) {
child[i] = parent[i];
}
return child;
}
var json2 = copy(json1);
json2.data.a = 3;
console.log(json1.data.a);// json1.data.a受影响也变成3了
console.log(json2.data.a);
// 深拷贝：利用递归
var json1 = {
name: 'aaa',
age: 25,
data: {
a: 1,
b: 2
}
};
function deepCopy(parent, child) {
var child = child || {};// 并不是直接声明一个新child为空{}，传过来的就用传过来的
for(var i in parent) {
if(typeof parent[i] === 'object') {
child[i] = (parent[i].constructor === Array) ? [] : {};// child.data = {};
deepCopy(parent[i], child[i]);// {a: 1,b: 2}，传过去的是child.data的空json
}
else {
child[i] = parent[i];// child.data.a ...
}
}
return child;
}
var json2 = deepCopy(json1);
json2.data.a = 3;
console.log(json1.data.a);// json1.data.a不受影响，仍旧是1
console.log(json2.data.a);
27、有一个数组a = [8, 10, 30, 55, 78, 90, 1]，新建一个数组b，b从a中一次随机选取一个元素，取完为止
解：
var a = [8, 10, 30, 55, 78, 90, 1];
var b = [];
for(var i=0; i<a.length; i++) {
var randomNum = Math.floor( Math.random() * a.length );
var newStr = a.splice( randomNum, 1 ).toString();
i --;// 注意splice后数组塌陷的问题
b.push( newStr );
}
console.log(b);
27、假设发现有一篇文章，var content = "大量文字..."，过滤其中的敏感词汇，如何发现敏感词汇并将其背景标记为红色
解：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>敏感词高亮</title>
<style>
#div1 {
width: 330px;
height: 200px;
border: 10px solid #063;
font-size: 14px;
font-family: "微软雅黑";
padding: 10px;
}
span {
background: #F0F;
}
</style>
<script>
window.onload = function() {
// 敏感词
var arr = ['君子', '也'];
var oDiv = document.getElementById('div1');
var oTxt = oDiv.innerHTML;
for (var i = 0; i < arr.length; i++) {
oDiv.innerHTML = oTxt.split(arr[i]).join("<span>" + arr[i] + "</span>");
// 注意更新
oTxt = oDiv.innerHTML;
}
};
// ps：用正则应该是更好的办法，有时间再改吧
</script>
</head>
<body>
<div id="div1">
君子曰：学不可以已。 青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规，虽有槁暴，不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：「嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。」神莫大于化道，福莫长于无祸。
</div>
</body>
</html>
28、请用JS实现数组的快速排序
解：
推荐阮一峰老师的文章快速排序的JS实现
// 在数据集之中，选择一个元素作为"基准"
// 所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边
// 对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止
var arr = [3, 1, 4, 6, 5, 7, 2];
function quickSort(arr) {
if(arr.length == 0) {
return [];
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);// 从索引n开始删除m个元素，并返回删除的元素，原来数组改变
var l = [];
var r = [];
for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
}
else {
r.push(arr[i]);
}
}
return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
29、编写sum()函数求和，非number类型参数需要进行过滤
解：
function sum() {
var result = 0;
for(var i = 0; i < arguments.length; i ++) {
if(isNaN(arguments[i])){// 不是数字
continue;
}
result += arguments[i];
}
console.log(result);
}
sum(7, 'aaa', 8, 'bbb');
30、写一个方法将字符串“abcdefg”逆序
解：
var str = "abcdefg";
function reverseStr(str) {
return str.split("").reverse().join("");
}
console.log( reverseStr(str) );
31、<input type="radio" name="hello">，让radio为选中状态
解：
// 注意两种不同的书写形式，jQuery中prop相当于原生"."的操作形式，attr相当于setAttribute
input.checked = true;
setAttribute('checked','checked');
32、HTML5为什么只需要写<!DOCTYPE html>
解：
HTML5不基于SGML,因此不需要对DTD进行引用，只需要doctype来规范浏览器的行为即可。
33、
解：
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
link是XHTML标签，是普通DOM节点，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
34、HTML5离线缓存有几种方式
解：
localStorage和sessionStorage两种
35、Doctype作用，标准模式与兼容模式各有什么区别
解：
作用：告知浏览器的解析器用什么文档标准解析这个文档
区别：标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行，兼容模式顾名思义...
36、如何修改chrome记住密码后自动填充表单的黄色背景
解：
// 使用足够大的纯色内阴影来覆盖默认的背景色
input: -webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
// 或者关闭这个自带功能
autocomplete=‘off’
37、介绍JS的基本数据类型
解：
基本：number、string、boolean、null、undefined
引用：object
38、如何将字符串转换为数字，例如"12.3b"
解：
parseInt/parseFloat
39、如何将浮点数点左边的数12000000.11每3位添加一个逗号
解：
// 试着先理解，关于正则后面专门再写吧
var num = 12000000.11;
function addDot(num) {
// ?=表示“只能是”，(\d{3})+：表示3的倍数个数字
return num && num.toString().replace( /(\d)(?=(\d{3})+\.)/g, function($1, $2) {
return $2 + ',';
} );
}
var newNum = addDot(num);
console.log(newNum);
40、实现数组的随机排序，2种方法以上
解：
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.sort(function(num1, num2) {
// -1表示每次num1在num2的前面，1则相反，用Math.random()和0.5相比较，也就实现随机的正反，即随机排序
return Math.random() > 0.5 ? -1 : 1;
});
console.log(arr);
41、this在JS中如何工作的
解：
// case1：看方法名前面是否有点，有的话点前面是谁this就是谁
function fn(){
console.log(this);
}
var obj = {
fn:fn
};
fn();// this > window,严格模式下undefined
obj.fn();// this > obj
..........
function Person(){
this.name = "yangk";
}
Person.prototype.showName = function(){
console.log(this.name);
};
var p1 = new Person;
p1.showName();// this > p1
p1.__proto__.showName();// this > p1.__proto__
Person.prototype.showName();// this > p1.prototype
// case2：自执行函数中的this永远是window，严格模式下是undefined
(function(){
console.log(this);// this > window
})();
~function(){
console.log(this);// this > window
}();
// case3：元素的某一个行为绑定一个方法，this > 元素
function fn(){
console.log(this);
}
oDiv.onclick = fn;
oDiv.onclick = fn();// 注意这里是执行的返回结果返回！！！！！！undefined
oDiv.onclick = function(){
fn();// this > window
};
// case4：使用call/apply强制改变this
var obj = {
fn: function(){
console.log(this);
}
};
obj.fn();// this > obj
obj.fn.call(12);// this > 12
.........
function sum(){
}
sum.call(100,100...)// 第一个参数是this，后面对应接受的形参，没有undefined
sum.call();//在非严格模式下，call的第一个参数不写或者写null/undefined，默认的this都是window，严格模式下写谁就是谁，写null就是null，不写是undefined
apply(obj,[...]);
42、请至少用两种方法实现两个变量对调，不借用第三个变量的情况下
解：
// 首先想到的是利用ES6的解构赋值
var a = 'Aaa';
var b = 'Bbb';
[a, b] = [b, a];
console.log(a);
console.log(b);
// 下面这种方法适用a和b都是数字的情况，还可以用位运算（^）有兴趣的研究下
var a = 666;
var b = 888;
a = a + b;// 先变和
b = a - b;// 和减b自然等于a，然后赋给b
a = a - b;// 和减b，此时的b已经是调换后的b了
console.log(a);
console.log(b);
// 把a变成一个JSON，也可以把a变成一个Array
var a = 'Aaa';
var b = 'Bbb';
a = {
a: b,
b: a// 此时的a还是'Aaa'
};
b = a.b;
a = a.a;
console.log(a);
console.log(b);
// 此方法神妙，不知道哪位大神想的，随意感受下
var a = 'Aaa';
var b = 'Bbb';
a = [b, b = a][0];// b = a先执行
console.log(a);
console.log(b);
43、实现一个300300的canvas画布，内含100100的红色矩形
解：
var oCanvas = document.createElement("canvas");
// 注意canvas设置宽高的正确姿势，不是oCanvas.style.width，其不是普通的DOM元素，有自己规则
oCanvas.width = 300;
oCanvas.height = 300;
document.body.appendChild(oCanvas);
var oGC = oCanvas.getContext('2d');
oGC.fillRect(50, 50, 100, 100);// L, T, W, H
oGC.fillStyle = "red";
44、用CSS或者JS实现物体的平移动画
解：
// CSS
利用transform:translate(x, y)
// JS
利用定时器
45、一个满屏“品”字布局如何设计
解：
// 定位或浮动，不具体写了
46、::before双冒号和单冒号的区别，解释其作用
解：
// 伪对象选择符和伪类选择符，双冒号是CSS3新增的，配合content在内容最前面添加一些内容
47、HTML5有哪些新特性
解：
// case1：新增/废除了一些标签，例如新增header，废除s、big
// case2：canvas
// case3：数据存储
// case4：Web Socket
// ...
48、如何判断变量是否是数组
解：
// typeof
// instanceof
// constructor
// Object.prototype.toString.call()
49、谈谈对闭包的理解
解：
// http://www.cnblogs.com/jiujiaoyangkang/p/5879384.html
50、列举一下JS垃圾回收方法以及原理
解：
// 详见JavaScript高级程序设计第78页
