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

  1. 绝对定位+margin
  2. 绝对定位+transform
  3. flex

什么是盒模型?

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

  • content(内容区)
  • padding(填充区)
  • border(边框区)
  • margin(外边界区)

列举几种清除浮动

  1. clear
  2. 伪元素
  3. 创建BFC

JS

数组slice和splice的区别?

  1. splice非常霸道,它会改变数组,返回一个新的数组,
  2. slice比较温柔,不会修改数组,而是返回一个子数组。

var、let、const三者的区别?

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

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

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

下面的代码的结果是?

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

for of 和 for in区别 ?

for in

  • 更适合对象----遍历数组和对象

for of

  • 适合遍历数组
  • 遍历没有Symbol.iterator属性的对象是会报错的

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

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

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

cookie,localstorage,sessionstorage区别?

共同点:都保存在浏览器端,且是同源的(顺便解释一下同源:域名、协议、端口号相同)

存储大小的不同:

  1. localStorage的大小一般为5M
  2. sessionStorage的大小一般为5M
  3. cookies的大小一般为4K

有效期不同:

  1. localStorage的有效期为永久有效,除非你进行手动删除。
  2. sessionStorage在当前会话下有效,关闭页面或者浏览器时会被清空。
  3. cookies在设置的有效之前有效,当超过有效期便会失效。

与服务器端的通信

  1. localStorage不参与服务器端的通信。
  2. sessionStorage不参与服务器端的通信。
  3. cookies参与服务器端通信,每次都会携带http的头信息中。(如果使用cookie保存过多数据会带来性能问题)
  4. localStorage和sessionStorage的作用域的区别详解不同浏览器无法共享localStorage或sessionStorage中的信息。 相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

Ajax-网络-http

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

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

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

websocket是怎么与后端交互的?

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

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

watch

  1. 不支持缓存,数据变,直接会触发相应的操作;
  2. watch支持异步;
  3. 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  4. 当一个属性发生变化时,需要执行对应的操作;一对多;

页面中定义一个定时器,在哪个阶段清除?

beforeDestroy 
复制代码

为什么销毁它: 在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章