目录
1、数组的常用方法以及迭代方法,对于push、pop可能会问到返回值
10、对于如下两次函数调用,参数 test 函数的函数体内 a,b,c 的值分别是什么?
11、创建两个数组[1,2,3,4],[3,’4’,5,6],求两个数组的并集/交集.,并写出他们的结果.
2、常见的布局方式,比如上div固定高度,下div自使用; 左中右布局,左右固宽,中自适应
1、vue的生命周期,created和mounted的区别,在beforeCreate中可以做什么
5、computed和watch的区别以及watch的属性(deep和immediate、handler)
8、vue的一些底层原理(双向数据的绑定原理、v-model实现原理,虚拟DOM)
3、http常用方法,http2.0,以及http常见状态码
5、协商缓存和强缓存(体现在状态码中就是304:协商缓存,200:强缓存)
曾就职于某上市外包公司,由于种种原因辞职,开启了面试之旅。在这里给大家一个建议,对于一些刚毕业的最好不要去外包公司,一是待遇低,活多,二是跳槽不好跳,大部分公司会歧视外包公司出来的,懂的都懂。
约了九家公司,面试了四家公司,两家达成意向发了offer,一家面试体验极差。在投简历过程中大家要有耐心,前几天回复的人可能比较少,后面就会好啦。再有就是应聘者和面试官是平等的,是一个双向选择的过程,大家面试一定要自信,遇到高高在上,处处刁难你的面试官不要气馁。
下面来总结一些面试题,因为毕竟工作经验不多,所以面试题还是比较基础比较简单的。
一、关于js的
1、数组的常用方法以及迭代方法,对于push、pop可能会问到返回值
2、js如何减少操作DOM
a. 用修改class名的方法替代
b. 需要大量修改DOM时,先缓存在统一进行修改
c. 采用虚拟DOM的方式
3、post和get的区别,ajax请求超时如何处理
1.相对post请求是安全的,get请求会暴露在url中
2.get请求参数放在url后,post放在http请求主体里面
3.get请求有长度限制,而post请求没有限制
ajax的请求超时
设置一个timeout,利用ajax的complete方法,complete是ajax请求完成的回调,无论成功或失败都会触发
|
status的取值
success"、 "notmodified"、"nocontent"、"error"、"timeout"、 "abort"、"parsererror"
4、es6新增了哪些特性,你常用哪些
5、对promise的理解
https://blog.csdn.net/qq_38974956/article/details/109035460
6、js 的eventloop
这里是阮一峰的一些讲解 : http://www.ruanyifeng.com/blog/2014/10/event-loop.html
由此题会引申出一些输出顺序的问题,网上有好多例子,多练习一下就会啦
7、关于js基本类型和引用类型的存储方式
基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象。(也就是栈和堆)
引用数据类型在内存中会有一个内存地址,对应着数据值,我们引用是只是引用的内存地址(也就是浅拷贝)
这里可能会引申一道浅拷贝和深拷贝的题,要注意一下,尤其是数组,不能大意
var a=[ ]
var b=a
a[2]=2
b[3]=3
请写出下面的输出结果
a.length a b b.length
结果:4 Array(4) [ undefined, undefined, 2, 3 ] Array(4) [ undefined, undefined, 2, 3 ] 4
这道题就是一道引用类型的浅拷贝当b=a时,这里只是进行了浅拷贝,在修改b时修改的是修改堆内存中的同一个值
这里是关于深拷贝和浅拷贝的一些总结 https://blog.csdn.net/qq_38974956/article/details/109034790
8、关于原型和原型链,原型链最终指向的是什么(null)
https://blog.csdn.net/qq_38974956/article/details/109187713
9、箭头函数的特点,let和const,var的区别
10、对于如下两次函数调用,参数 test 函数的函数体内 a,b,c 的值分别是什么?
function test(a,b,...c) {/*a,b,c*/}
test(1,2,3,4,5) 与 test();
结果:
1,2,[3,4,5]
Undefined,undefined,[ ]
这里考察点是剩余参数
11、创建两个数组[1,2,3,4],[3,’4’,5,6],求两个数组的并集/交集.,并写出他们的结果.
var a = [1, 2, 3, 4]
var b = [3, '4', 5, 6]
a.forEach(item => {
b.forEach(itemB => {
if (item === itemB) {
console.log(item);
}
})
})
并集:3 这道题比较简单,注意4和‘4’不一样就可以,===和==的区别
12、一个假期旅游团有十八人,[{name: 张,age:16},{name:章,age:15}…].请给出旅游团平均年龄的算法.我们该如何判断旅游团内是否有人年龄小于14,以便需要监护人同意.现在旅游团要两两结伴做游戏,如何将前一半人与后一半人按顺序结伴.
var arr = [{
name: '张',
age: 16
}, {
name: '章',
age: 15
}, {
name: 'li',
age: 12
}]
var sum = 0
arr.forEach(item => {
sum += item.age
})
//平均年龄
console.log(sum/arr.length)
//判断是否有小于14
arr.forEach(item => {
if (item.age < 14) {
console.log(item);
}
})
var a = arr.splice(arr.length / 2)
arr.forEach((item1, index1) => {
a.forEach((item2, index2) => {
if (index1 == index2) {
console.log(item1.name + '和' + item2.name);
}
})
})
13、按顺序写出下面程序的打印值。
new Promise(function executor(resolve){
console.log(1);
for (var i = 0; i < 10000; i++) {
i == 9999 && resolve();
}
console.log(2);
}).then(function () {
setTimeout(function () {
console.log(3);
},10);
console.log(4);
});
setTimeout(function () {
console.log(5);
}, 0);
console.log(6);
结果:1,2,6,4,5,3
14、如何判断数据类型
https://blog.csdn.net/qq_38974956/article/details/109109935
15、防抖和节流
二、关于HTML和css的
有关这部分问的还是比较少的,但是应届生要多看看这部分
1、使块级元素&行级元素垂直居中的几种办法
行级元素:
-
设置height和line-height
-
vertical-align
块级元素
-
flex布局,设置align-items
-
绝对定位,上下左右设置为0,margin:0 auto
-
绝对定位,top:50%;margin-top:-高度的一半
2、常见的布局方式,比如上div固定高度,下div自使用; 左中右布局,左右固宽,中自适应
经典布局总结:https://blog.csdn.net/qq_38974956/article/details/108048434
布局题:请使用至少两种布局方式.其中一种必须为 flex 布局..
- flex布局
.container {
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
}
.header {
width: 100%;
height: 100px;
background-color: pink;
}
.main {
width: 100%;
flex: 1;
background-color: green;
position: relative;
}
.left {
float: left;
width: 200px;
background: red;
height: 100%;
}
.right {
margin-left: 200px;
height: 100%;
background: #000;
}
@media screen and (max-width: 992px) {
.left {
display: none;
}
.right {
margin-left: 0;
height: 100%;
background: #000;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</body>
2、
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
background-color: black;
}
.header {
width: 100%;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
.main {
width: 100%;
background-color: green;
position: absolute;
top: 100px;
bottom: 0;
}
.left {
width: 200px;
background: red;
height: 100%;
float: left;
}
.right {
margin-left: 200px;
height: 100%;
background: #000;
}
@media screen and (max-width: 992px) {
.left {
display: none;
}
.right {
margin-left: 0;
height: 100%;
background: #000;
}
}
*/
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</body>
3、什么是BFC,特点以及如何触发
https://blog.csdn.net/qq_38974956/article/details/108088443
4、重绘和重排,标准盒子模型和怪异盒子模型
自行百度
5、rem实现原理
https://blog.csdn.net/qq_38974956/article/details/108109295
三、关于vue
1、vue的生命周期,created和mounted的区别,在beforeCreate中可以做什么
https://blog.csdn.net/qq_38974956/article/details/109455991
2、vue路由的两种模式history和哈希
vue-router 有 2 种路由模式:hash、history
其中,2 种路由模式的说明如下:
-
hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;
-
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;
(1)hash 模式的实现原理
早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单,location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站,它的 location.hash 的值为 '#search':
https://www.word.com#search
hash 路由模式的实现主要是基于下面几个特性:
- URL 中 hash 值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash 部分不会被发送;
- hash 值的改变,都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换;
- 可以通过 a 标签,并设置 href 属性,当用户点击这个标签后,URL 的 hash 值会发生改变;或者使用 JavaScript 来对 loaction.hash 进行赋值,改变 URL 的 hash 值;
- 我们可以使用 hashchange 事件来监听 hash 值的变化,从而对页面进行跳转(渲染)。
(2)history 模式的实现原理
history 路由模式的实现主要基于存在下面几个特性:
- pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ;
- 我们可以使用 popstate 事件来监听 url 的变化,从而对页面进行跳转(渲染);
- history.pushState() 或 history.replaceState() 不会触发 popstate 事件,这时我们需要手动触发页面跳转(渲染)。
3、vue父子组件的生命周期
https://www.cnblogs.com/status404/p/8733629.html
4、组件之间的通信
5、computed和watch的区别以及watch的属性(deep和immediate、handler)
https://blog.csdn.net/qq_38974956/article/details/109457767
6、vue的优化方法
7、vue的路由懒加载
8、vue的一些底层原理(双向数据的绑定原理、v-model实现原理,虚拟DOM)
9、 v-for 中key的作用
10、vuex 的五个属性,以及适用场景
11、 vue脚手架搭建过程
四、其他
1、git常用命令
2、git和svn的区别
3、http常用方法,http2.0,以及http常见状态码
4、401和403的区别
401是用于身份验证
403是禁止响应
5、协商缓存和强缓存(体现在状态码中就是304:协商缓存,200:强缓存)
6、做项目的流程以及出现bug如何调试