手把手带你简单回答真实前端面试题

最新推荐文章于 2024-05-06 11:12:35 发布

一行注释

最新推荐文章于 2024-05-06 11:12:35 发布

阅读量415

点赞数

分类专栏：面试题文章标签：面试题

原文链接：https://juejin.im/post/5efa01df5188252e6350cf36

版权

面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

这些内容都是真实遇到的

面试的时候千万别简单回答，给我往死里吹，往复杂的去吹，这样你就成功了三分之一

CSS

说一下rem和em的区别

rem是根据文档根节点html的字体大小设置
em是根据父节点的字体大小设置的

吹rem的时候可以往自适应方向吹，比如通过rem配合fixable实现了多端设备自适应。

如果有更好的建议，评论吧

有哪些选择器？

类选择器
id选择器
标签选择器
后代选择器
子选择器

水平垂直居中有几种方式，分别是什么？

绝对定位+margin
绝对定位+transform
flex
文字居中+行高

什么是盒模型？

盒模型由这四个部分组成：

content（内容区）
padding（填充区）
border（边框区）
margin（外边界区）

列举几种清除浮动

clear
伪元素
创建BFC（BFC是块级格式化上下文，作用：其内部的元素布局状态不会影响到外部元素的布局状态）
flex
父级overflow：hidden

JS

什么是闭包

闭包就是能够读起其它函数内部变量的函数

请你说说js有哪些数据类型？

基本数据类型

String
Number
Undefined
Symbol
Null
布尔（booloan）

引用数据类型

Function
Object
数组（Array）

数组slice和splice的区别？

splice它会改变数组，返回一个新的数组，
slice不会修改数组，而是返回一个子数组。

下面的代码的结果是？

var a = 2
var fun = (function(){
    var a = 3;
    return function(){
        a++;
        alert(a)
    }
})()
fun(); // 4
fun(); // 5
复制代码

for of 和 for in区别？

for...in 循环只遍历可枚举属性（包括它的原型链上的可枚举属性）。像 Array和Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性。
- 例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。
for...of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

介绍一下vuex

vuex是状态管理模式，通过创建集中式数据存储，给程序中所有组件访问

使用场景：当我们开发中大型项目或者数据量较大的时候，就会使用vuex
复制代码

核心

state：数据共享/存储
getter：对共享数据进行过滤
mutation：注册改变数据状态
action：解决异步改变共享数据
module(模块)：每个模块都有自己的state，getter，mutation，action，解决项目臃肿

一个数组有重复元素，怎么用简单的方式去重？

Array.from(new Set([1,1,1,1,1,1,4]))
复制代码

cookie，localstorage，sessionstorage区别？

区分	localStorage	sessionStorage	cookies
相同点	保存在浏览器端，且是同源的
存储大小	5M	5M	4kb
有效期	永久，除非手动删除	关闭页面或者浏览器	可设置时长，超时失效。
与服务器端的通信	不可能	不可能	参与，每次都会携带http请求头

Ajax-网络-http

get和post区别？

区分	get	post
参数位置	url	请求体（request body）
参数长度	有限制	无限制
参数编码	ASCII编制	无限制
后退/刷新	不重复提交，回退无害	重复提交，回退有害
安全性	参数暴露，不安全	安全
缓存	YES	NO
收藏书签	同上	同上
历史	参数保留在浏览器历史中	不保留
相同点	都是http请求，tcp连接

重大区别

get产生一个TCP数据包
post产生两个TCP数据包

出现错误时会返回错误状态码，分别是什么？

简单几个

401 无法解析此请求。
403 禁止访问：访问被拒绝。
404 找不到文件或目录
500 服务器内部错误

介绍一下ajax

ajax是什么？

ajax就是异步的javascr和xml的结合

作用

通过AjAx与服务器进行数据交换，AjAx可以使用网页实现布局更新

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

说一下ajax执行流程

向服务器请求有哪些方式？请求有几种格式？

两种提交方式：get、post

三种格式

表单提交 get，post
超链接 get
地址栏跳转 get

前端向后端发送请求有几种方式？

link src=""
script src=""
img src=""
ajax请求
表单提交
a href=""
iframe src=""

websocket是怎么与后端交互的？

项目升级后，前端js脚本在不要求用户强刷浏览器的情况怎么更新?

思路：监听加载js的错误信息》处理错误信息加入刷新页面功能》获取最新的runtime.[hash].js文件》用户正常访问

blog.csdn.net/guzhao593/a…

Es6

介绍一下promise

什么是promise

Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中。

promise有三个状态：

pending[待定]未完成
fulfilled[实现]完成
rejected[被否决]拒绝

有两种过度：pending -> fulfilled 或者是 pending -> rejected 总的来说呢，就是Promise对于错误处理机制的理解

如果错误已经捕获了，那么错误不会继续传递下去

如果错误没有被捕获，那么错误会隐式传递下去，直到有错误处理函数来捕获这个错误

Promise 常用的方法有哪些？它们的作用是什么？

Promise.resolve(value) :返回一个状态已变成 resolved 的 Promise 对象。
Promise.reject :类方法，且与 resolve 唯一的不同是，返回的 promise 对象的状态为 rejected。
Promise.prototype.then: 就是将Promise中的resolve或者reject的结果拿到,实例方法，为 Promise 注册回调函数，函数形式：fn(vlaue){}，value 是上一个任务的返回结果，then 中的函数一定要 return 一个结果或者一个新的 Promise 对象，才可以让之后的then 回调接收。
Promise.prototype.catch:实例方法，捕获异常，函数形式：fn(err){}, err 是 catch 注册之前的回调抛出的异常信息。
Promise.race :多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败
Promise.all: 类方法，多个 Promise 任务同时执行。

作用/使用场景

解决地狱回调
将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
主要用于异步计算
可以在对象之间传递和操作promise，帮助我们处理队列

var、let、const三者的区别？

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

Vue

Vue的双向数据绑定原理是什么？

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.definePorperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

自定义指令如何定义，它的生命周期是什么？

 Vue.directive('red',{
    * bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
    * inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
    * update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
    * componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
    * unbind:只调用一次，指令与元素解绑时调用。
});
复制代码

子组件如何主动获取父组件中的数据？

this.$parent.数组
this.$parent.方法
复制代码

组件通信有哪些方案？

数组变动

这行代码是否正确，原因是什么？ vm.items[1] = 'x';

var vm = new Vue({
    data:{
        items:['a','b','c']
    }
})
vm.items[1] = 'x';
复制代码

computed和watch的区别？

computed

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法