最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（1）

本文链接：https://blog.csdn.net/qq_22182989/article/details/106792014

VUE之VUEX常见面试题大全汇总--史上最全【vuex面试题】

前端面试题之HTML+CSS（持续更新）_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；行元素转换为块级元素方式：display：block；2.将多个元素设置为同一行?清除浮动有几种方式?将多个元素设置为同一行：float，inline-block清除浮动的方式：方法一：添.https://blog.csdn.net/qq_22182989/article/details/106867530?spm=1001.2014.3001.5502

JS必看面试题_勤动手多动脑少说多做厚积薄发-CSDN博客2019JS必看面试题1. javascript的typeof返回哪些数据类型.答案：string,boolean,number,undefined,function,object2. 例举3种强制类型转换和2种隐式类型转换?答案：强制（parseInt,parseFloat,number）隐式（== ===）3. split() join() 的区别答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串4. 数组方法pop() push() unshift() shttps://blog.csdn.net/qq_22182989/article/details/106792847?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164446317716781683915410%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164446317716781683915410&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-106792847.nonecase&utm_term=%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4450 JavaScript数组的常用方法总结：遍历，复制，反转，排序，添加，删除（前端常见面试题必考必问）实例演示_勤动手多动脑少说多做厚积薄发-CSDN博客https://blog.csdn.net/qq_22182989/article/details/86726944

给大家推荐一个程序员开发利器：给大家推荐一个让你觉得相见恨晚的工具——utools

可以随意取色！识别图中的所有文字。还能翻译哦！

可以看看使用教程：

utools快速上手心得、给你安利一款国产良心软件uTools工具--uTools 新一代效率工具平台：怎样安装和使用？详细方法？打工人必看、高效工作、提高效率、提高生产力_南北极之间的博客-CSDN博客utools快速上手心得、给你安利一款国产良心软件uTools工具！uTools 新一代效率工具平台：怎样安装和使用？详细方法？打工人必看！高效工作！提高效率！提高生产力！https://blog.csdn.net/qq_22182989/article/details/124897267

笔试题目：

题目：

前端面试题
一、
根据情况选择性答题，答题时问不超过30分钟。
1、CS5实现垂直水平居中
<div class-"bigbox“
<spanclass-"smallbox"></div>
</div>
2、cs清除浮动的几种方法？
3、<div class="content'">s/div>(对盘子模型的理解)
.content{
box-sizing:border-box;
width:100px;
height:100px;
border:1px solid #000;
margin:10px;
padding:10px;
请问div盒子模型占用的width是()：height是()
4、c55选择符有哪些？哪些属性可以继承？优先级算法如何计算？
5、使用c55预处理器有哪些？使用的好处？
6、如何实现响应式布局
7、
请描述一下cookies,sessionStorage和localStorage的区别？

==============

我的参考答案：

1. 题目可能有误。应该是两个div，一个是bigbox，一个是smallbox，图中多了些莫名其妙的东西。

.bigbox{
position: relative;
}
.smallbox{
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow:auto
}

2. 清除浮动方法在浮动元素后使用一个空元素如 <div class="clear"></div> ，并在CSS中赋予 .clear{clear:both;} 属性即可清理浮动。

3. 宽高都是142

4. 选择器类型：①通用元素选择器 ②类型选择器 ③class选择器④id选择器
可以继承的属性（随便写四个，不要写太全了）：1、字体系列属性 2、文本系列属性 3、元素可见性：visibility 4、表格布局属性：caption-side 5、列表属性：list-style-type 6、设置嵌套引用的引号类型：quotes
优先级：下面列表中，选择器类型的优先级是递增的：类型选择器< class选择器< id选择器给元素添加的内联样式 (例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明

5. 常用的有Sass、Less 和 Stylus 这三种 css 预处理器。使用的好处：弥补了直接写 css 的一些缺憾：

语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

6. 实现响应式布局有以下几种方法：
1. 媒体查询
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
2.百分比布局
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
3.rem布局
REM是CSS3新增的单位，并且移动端的支持度很高，

7. 相同点：都是存储数据，存储在web端，并且都是同源
不同点：
（1）cookie 只有4K 小并且每一次请求都会带上cookie 体验不好，浪费带宽
（2）session和local直接存储在本地，请求不会携带，并且容量比cookie要大的多
（3）session 是临时会话，当窗口被关闭的时候就清除掉，而 local永久存在，cookie有过期时间
（4）cookie 和local都可以支持多窗口共享，而session不支持多窗口共享但是都支持a链接跳转的新窗口

8. 基本类型：String、Number、Boolean、Symbol、Undefined、Null
判断类型的5种方法：
1.使用typeof
2.使用instanceof
3.使用constructor：undefined和null没有contructor属性
4.使用Object.prototype.toString.call
5.使用jquery中的$.type

9. JavaScript实现继承的方式：
类式继承
构造函数继承
组合继承
寄生组合式继承
extends继承

10. 1、语法更加简洁、清晰
2、箭头函数不会创建自己的this
3、箭头函数继承而来的this指向永远不变
4、.call()/.apply()/.bind()无法改变箭头函数中this的指向
5、箭头函数不能作为构造函数使用
6、箭头函数没有自己的arguments
7、箭头函数没有原型prototype
8、箭头函数不能用作Generator函数，不能使用yeild关键字

11. 利用filter去重

function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}

12 第一个： 01234
第二个：12435

笔试后问到的技术问题：

1.vuejs的生命周期？

什么是 vue 生命周期？有什么作用？
答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted 中进行。

请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和**数据对象**data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

2.vuejs的传值有哪些方式？

3.vuejs的监听和计算属性介绍一下？

分别简述computed和watch的使用场景
答：computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子：购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

4.项目怎么优化的？

你如何优化自己的代码？

代码重用
避免全局变量（命名空间，封闭空间，模块化mvc..）
拆分函数避免函数过于臃肿
注释

5.js的基本数据类型和引用数据类型。及区别？

JS分两种数据类型：

　　　　基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。

　　　　引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

6.vuejs的路由传参方式？

7.同步和异步有什么区别？

同步

所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，再响应用户，用户体验不好。
异步，不用等所有操作都做完，就相应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。

异步操作例子

为了避免短时间大量的数据库操作，就使用缓存机制，也就是消息队列。先将数据放入消息队列，然后再慢慢写入数据库。

引入消息队列机制，虽然可以保证用户请求的快速响应，但是并没有使得我数据迁移的时间变短（即80万条数据写入mysql需要1个小时，用了redis之后，还是需要1个小时，只是保证用户的请求的快速响应。用户输入完http url请求之后，就可以把浏览器关闭了，干别的去了。如果不用redis，浏览器不能关闭）。

同步就没有任何价值了吗？

银行的转账功能。
在这里插入图片描述