前端基础面试题总结
作为一个优秀的程序员,不仅仅可以解决工作的问题,还要不断的关注前端技术的发展,其中也包括了解最新的前端面试题,那么知识点来了,请接好
1. 你熟悉的es6
- let、const、var的使用区别
let: 相当于var,用于声明一个变量,在块级作用域有效(可解决for循环问题);不能重复声明;不会变量提升;不会预处理
const: 用于定义一个常量,不能修改,其他特点等同于let,用于保存不用改变的数据 - Map与普通对象的区别
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
除了这两个,关于es6的常用还有箭头函数、模板字符串、变量的解构赋值等
2. 你使用的跨域
所谓的跨域问题是由于浏览器的同源策略限制的,当协议域名端口号不同即为跨域,对于协议和端口来说,前端不能解决。
解决跨域的几种方式:
- JSONP 跨域 : 这种方式跨域是通过script标签引入js文件,这个js文件又会返回一个js函数调用,也就是请求后通过callback的方式回传结果
优点:
1.不受同源策略的限制
2.兼容性更好
3.支持老版本浏览器
缺点:只支持get请求 - CORS 跨域
其原理是使用自定义的http头部请求,让浏览器与服务器之间进行沟通,从而决定请求或响应是否成功
优点:
1.支持所有类型的http请求
2.比jsonp有更好的错误处理机制
3.被大多数浏览器所支持 - h5的postMessage方法
window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据,只能在两个窗口(iframe)之间交换数据
3. 你了解的http状态码
1** 信息,服务器收到请求,需要请求者继续执行操作(101,升级为websocket协议)
2** 成功,操作被成功接收并处理(206,部分内容,分段传输)
3** 重定向,需要进一步操作以完成请求(301,302重定向;304命中缓存)
4** 客户端错误,请求包含语法错误或无法完成请求(401,要求身份验证;403,服务器理解客服端需求,但是禁止访问)
5** 服务器错误,服务器在处理请求的过程中发生了错误
4. 你来评价一下ajax
- ajax的优势
1.无刷新页面请求,使产品更快,更小更友好
2.服务器端的任务转嫁到客户端处理
3.减轻浏览器负担,节约带宽
4.基于标准化对象,不需要安装特定的插件
5.彻底将页面与数据分离 - 缺点
1.无法使用回退按钮
2.不利于网页的SEO
3.不能发送跨域请求
-写一个简单的ajax请求
getList: function () {
var me = this;
$.ajax({
url: '/test',
type: 'POST',
data: {
repaymentId: repaymentId
},
xhrFields: {
withCredentials: true
},
success: function (result) {
if (result.status == 0) {
console.log('请求成功')
} else {
console.log('请求异常')
}
},
error: function (result) {
$.toaster({ title: 'info', priority: 'danger', message: '服务器异常,请联系管理员!' });
}
})
}
复制代码
5. 你知道的vue的生命周期
关于vue生命周期,可参考这篇文章 链接
6. 你知道的react的生命周期
初始化
- componentWillMount 初始化调用,只调用一次
render 渲染页面 - componentDidMount 第一次渲染后调用
更新
- componentWillReceireProps 接收新的props时调用
- shouldComponentUpdate state或props改变时调用
- componentWillUpdate 将要更新时调用,可改变state的值
render - componentDidUpdate 更新后调用
卸载
- componentWillUnMount
7. react声明默认props
设置默认props有两种方式
- 指定 props 的默认值, 这个方法只有浏览器编译以后 才会生效
static defaultProps = {
age: 18
}
复制代码
- 指定 props 的默认值,这个方法会一直生效
Greeting.defaultProps = {
name: '我是props的默认值!'
}
复制代码
8. react创建组件的三种方式
1.函数式定义的无状态组件,适用于纯展示组件,只负责根据传入的props展示,不涉及state状态的操作,特点如下
- 组件不会被实例化,整体渲染性能得到提升。
- 组件不能访问this对象
- 组件无法访问生命周期的方法
- 无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用
function MyTest1() {
return <h1>工厂(无状态)函数(最简洁, 推荐使用)</h1>
}
复制代码
2.es5原生方式React.createClass定义有状态的组件
- 组件会被实例化
- 可以访问生命周期
- 会自绑定函数方法
var MyTest2=React.createClass({
render(){
return <h1>ES5老语法(不推荐使用了)</h1>
}
})
复制代码
3.es6形式的extends React.Component定义的组件,是以ES6的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式
class MyTest3 extends React.Component{
render(){
return <h1>ES6类语法(复杂组件, 推荐使用)</h1>
}
}
复制代码
React.createClass与React.Component区别
- this绑定不同
React.createClass创建的组件,其每一个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可,函数中的this会被正确设置。
React.Component创建的组件,其成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。 - 组件属性类型propTypes及其默认props属性defaultProps配置不同
- 组件初始状态state的配置不同
- Mixins的支持不同
9. 你知道http与https的区别吗
1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全
10. get与post的区别
- 表单的method属性设置post时发送的是post请求,其余都是get请求
- get请求通过url地址发送请求参数,参数可以直接在地址栏中显示,安全性较差;post是通过请求体发送请求参数,参数不能直接显示,相对安全
- get请求URL地址有长度限制,根据浏览器的不同,限制字节长度不同,post请求没有长度限制
11. 你对闭包的了解
外部函数调用之后其变量对象本应该被销毁,但闭包的存在使我们仍然可以访问外部函数的变量对象
12. vue动态传参以及获取
// 传参
router: {
path: '/test/:id'
}
// 获取
this.$route.params.id
// 通过query
<router-link :to="{path: '/test',query:{name: 'aaa'}}">跳转</router-link>
复制代码
13. h5和css3新属性
1.H5
- 语意化标签(nav、aside、dialog、header、footer等)
- canvas
- 拖放相关api
- Audio、Video
- 获取地理位置
- 更好的input校验
- web存储(localStorage、sessionStorage)
- webWorkers(类似于多线程并发)
- webSocket
2.CSS3 - 选择器
- 边框(border-image、border-radius、box-shadow)
- 背景(background-clip、background-origin、background-size)
- 渐变(linear-gradients、radial-gradents)
- 字体(@font-face)
- 转换、形变(transform)
- 过度(transition)
- 动画(animation)
- 弹性盒模型(flex-box)
- 媒体查询(@media)
14. 实现左右固定宽,中间自适应(已知宽高和未知宽高)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css居中的十种方式</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.size {
width: 100px;
height: 100px;
}
/*第一种 已知元素宽高下使用position+ 负margin实现 兼容性较好*/
.box1 {
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
/*第二种 已知元素宽高下使用position+margin auto实现 兼容性较好*/
.box2 {
background-color: pink;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
/*第三种 已知元素宽高下使用position+calc计算实现 考虑c3 calc兼容性 需注意的问题是运算符之间要有空格,否则不生效*/
.box3 {
background-color: pink;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
/*第四种 未知元素宽高下使用position+transform实现 依赖translate2d兼容性*/
.box4 {
position: absolute;
background-color: pink;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*第五种 未知元素宽高下使用lineheight实现*/
.wrap2 {
line-height: 400px;
width: 200px;
text-align: center;
border: 1px solid red;
}
.box5 {
background-color: pink;
/*不加以下内容内部div会扩充外部div,且内容居中*/
display: inline-block; /*不独占一行的块元素*/
vertical-align: middle; /*垂直方向居中*/
line-height: initial; /*默认内容行高*/
text-align: left;
}
/*第六种 未知宽高使用writing-mode属性*/
.wrap3 {
writing-mode: vertical-lr; /*内容变为垂直分布*/
text-align: center;
}
/*inner 部分宽度100%居中*/
.inner{
writing-mode: horizontal-tb;
text-align: center;
display:inline-block;
width: 100%;
background-color: pink;
}
.box6 {
display: inline-block;
margin: auto;
background-color: rgb(140, 216, 68);
}
/*第七种 未知宽高使用table-cell属性*/
.wrap4 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box7 {
background-color: pink;
display: inline-block;
}
/*第八种 未知宽高使用flex属性*/
.box8{
background-color: pink;
}
.wrap5{
display: flex;
justify-content: center;
align-items: center;
}
/*第九种 未知宽高使用grid, 兼容性较差*/
.wrap6{
display: grid;
}
.box9 {
align-self: center;
justify-self: center;
background-color: pink;
}
/*第十种 使用表格table实现*/
.wrap7 {
text-align: center;
}
.box10 {
display: inline-block;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1 size">知11111</div>
</div>
<div class="wrap">
<div class="box2 size">知2222</div>
</div>
<div class="wrap">
<div class="box3 size">知3333</div>
</div>
<div class="wrap">
<div class="box4">未44444</div>
</div>
<div class="wrap2">
<div class="box5">未55555</div>
</div>
<div class="wrap3 wrap">
<div class="inner">
<div class="box6">未66666</div>
</div>
</div>
<div class="wrap wrap4">
<div class="box7">未777777</div>
</div>
<div class="wrap wrap5">
<div class="box8">未88888</div>
</div>
<div class="wrap wrap6">
<div class="box9">未9999</div>
</div>
<table>
<tbody>
<tr>
<td class="wrap wrap7">
<div class="box10">未10101010</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
复制代码
15.父子组件传值
- 父传子:通过props传递
- 子传父: 通过$emit传递
- 子孙之间: 通过一个中间文件作为媒介,子组件传值到中间文件,上级文件在中间文件中获取,避免逐级获取
16.输入一个网址,直到网址打开并加载结束,这个过程浏览器发生了什么
- 查看浏览器中是否有缓存,有的话直接访问缓存
- 如果缓存过期或者没有缓存,重新请求
- 在发送http请求前,需要域名解析,获取相应的IP地址
- 浏览器想服务器发起tcp链接,与浏览器建立tcp三次握手
- 握手成功后,浏览器向服务器发送http请求,请求数据包
- 服务器处理收到的请求,将数据返回至浏览器
- 浏览器收到HTTP响应
- 读取页面内容,浏览器渲染,解析html源码
17. rem与em的区别
rem是根据根的font-size变化,而em是根据父级的font-size变化
这里值得注意的是,在react的子组件中是不可以改变父组件中的值,解决办法可以是在子组件中向父组件传递一个状态,接着在父组件中通过这个状态值来判断是否要改变数据值,并在父组件中更新状态
还在后续补充中,不足之处还请指教……