背景：前端经验2年，5月份经历了几个公司的面试，记录一下面试总结
css部分
- 上下左右居中布局
1. 父元素flex布局
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
background:gray;
width:300px;
height:300px;
display: flex;
justify-content: center;
align-items: center;
}
.child{
background:red;
width:100px;
height: 100px;
}
2. 父元素相对定位 子元素绝对定位 结合left top margin/transform-translate
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
background:gray;
width:300px;
height:300px;
position: relative;
}
.child{
background:red;
width:100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
/*margin-top: -50px;
margin-left: -50px;*/
transform: translate(-50%,-50%);
}
</style>
- 盒模型
每个块级元素都看做有一个盒子 盒子包含content padding border，
一般块元素的height width是指content 部分的height width，
在怪异模式下 是指border box的height width，
标准模式下可以使用box-sizing 属性 指定为border box;
- 纯css写轮播
- css3新特性有哪些
- 动画与过渡的区别
两者都是从一个状态 变化 到另外一个状态
过渡 不能在始 终状态之间 定义过渡的子过程细节
动画 可以在始 终在始 终状态之间 定义过渡的子过程细节
过渡属性有
transition-property
transition-duration
transition-timing-function
transition-delay
动画属性有
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
- css动画与js动画的区别
css动画经过GPU加速优化，更流畅，
但是他属于CSS3的特性，浏览器支持程度不一样，js动画浏览器支持程度更好
- css动画的优点
css动画经过GPU加速优化
- css3选择器中:与::的区别
:伪类 ::伪元素 - CSS 选择器 优先级（实战题）
答案 gray
<div id="wrapper">
<p class="inner">
<span class="content">
<b class="txt">color is ?</b>
</span>
</p>
<style type="text/css">
#wrapper span{
color:green
}
.content b.txt{
color:gray;
}
p.inner b{
color:red;
}
.txt{
color:black;
}
</style>
</div>
- BFC怎么形成的
- BFC的特点
- BFC实战
题目：问A的宽 高分别是多少？代码如下
答案：280px 260px
<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
</div>
<style type="text/css">
.A{
float: left;
background: gray;
}
.B,.C,.D{
height: 50px;
width:200px;
margin:20px;
padding:20px;
}
.B{
float: left;
background:green;
}
.D{
float: right;
background:red;
}
.C{
position: relative;
top:50px;
left:50px;
background:yellow;
}
</style>
JS部分
- 二维数组拍平
[].concat.apply([],arr)
- 数组去重
这个方法时间复杂度为O(n),而且稍微gai'd
let arr=[1,2,3,4,5,8,10,2,4,7,3,2]
function noRepeat(arr){
let obj={}
arr.forEach(item=>{
obj[item]||(obj[item]=true)//这样写去重
// obj[item]=obj[item]?obj[item]+1:1 //这样不仅去重而且方便后期统计出现的次数
})
return Object.keys(obj)
}
console.log(noRepeat(arr))
- this
在一般函数中
1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj
2.在默认情况,没找到直接调用者,则this指的是 window;在严格模式下,没有直接调用者的函数中的this是 undefined
3.使用call,apply,bind绑定的,this指的是绑定的对象
- 箭头函数
this已经定义 指向已经明确 指向其父级作用域的this，默认指向在定义它时,它所处的对象,而不是执行时的对象,
没有arguments
- 原型与原型链
推荐阅读 - 闭包的特性与作用
推荐阅读 - 手写继承
- event Loop
推荐阅读 - DOM事件
- 自定义DOM事件
- promise与async await
推荐阅读 - 手动实现一个promise
- console.log(1+2+'3')
答案：33
- console.log([0,1,2,10].map(parseInt))
答案：[0, NaN, NaN, 3]
解析：parseInt接受两个参数，第二个标示进制（2-36之间），map函数将vaule和key传给parseInt，y因此parseInt接受到的参数依次为
(0,0)--第二个参数为零，默认采用10进制解析，输出结果为0；
(1,1)--第二个参数为1,不在2-36之间 所以输出NAN；
(2,2)--第二个参数为2，则采用二进制解析第一个参数，但是二进均是0或1标示的，所以2进制不能解析2，输出NAN；
(10,3)--第二个参数为3，3采用三进制解析，输出结果为3；
框架相关
- JQuery $与$.fn,$.ready与window.onload与window.DOMcomponentLoaded
- Vue:生命周期及各个钩子的作用
- React：生命周期及各个钩子的作用
- Vuex：什么情况下使用，与eventbus区别
- redux：
- 前端路由：动态路由与子路由
- 框架选型
栈外技术
相同点：数据存储机制 不跨域
不同点:
1. 作用：cookie用于前后端通信，localStorage sessionStorage本地存储
2. 长度：cookie限制4k,localStorage sessionStorage 各浏览器不一致，但是比cookie大很多 一般5M
3. 存储方式：cookie字符串形式，不同字段用分号隔开，localStorage sessionStorage 均是键值对方式，且都是简单数据类型，对于数组 对象等引用类型 可先用JSON.stringfy转换后存储
4. 有效期：cookie 在其字段中expire对应的时间内有效，localstorage长期有效，除非手动删除，sessionstorage关闭会话时候失效
5. 作用域：cookie在其字段domain path对应的域名即父级域名内有效，在所有同源窗口中都是共享的；localstorage在同域名下有效，在所有同源窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
- 计算机的7层、4层结构
推荐文章
算法
- 冒泡排序、快速排序、排序二叉树
参看另一篇博客 - 最短路线
- 协方差
- 时间复杂度及推导
- hash算法怎么实现的
其他
- 平时怎么学习的
- 遇到了什么问题，怎么解决
- 有什么打算、规划是怎样的
- 为什么跳槽
- 你有什么要问的么
写在最后
面试心态很重要：自信 稳重 不卑不亢 实事求是
