平安科技-前端面试1_平安科技 前端 面试题

• setTimeout和setInterval的区别和setInterval的区别
  setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环直至用clear来清除定时器。

function hello(){
		alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法，可带参数
window.clearTimeout(t1);//清除定时器
1
2
3
4
5
6
7

业务场景：
setTimeout用于延迟执行某方法或功能
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

• es6新特性
  新特性
  默认参数
  模板对象 $ {NAME}
  多行字符串 （反引号）
  解构赋值
  增强对象字面量
  箭头函数
  Promises
  块作用域和构造let和const

• 箭头函数和普通函数的区别
  博客链接
  箭头函数相当于匿名函数，有两种格式：

(1)
let fun=（）=>{
	console.log('ssss')
	return 
}
(2)
let fun =()=>console.log()
1
2
3
4
5
6
7

箭头函数不能作为构造函数，不能new
箭头函数不绑定arguments，取而代之用rest参数…解决

let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]
1
2
3
4

箭头函数不绑定this，捕获其所在的上下文的this值，作为自己的this值
箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响
箭头函数没有原型属性

• 如何实现一个多行文本的垂直居中
  博客
  方法1:父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
  方法2:对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度
  方法3:脱离文档流的居中方式，把内部div设置宽高之后，再设置top为50%，使用负边距调整，将margin-top设置为负的高度的一半就可以垂直居中了。缺点：需要计算出多行文字固定的高度。高度一旦改变，负边距也要调整。

• http的缓存机制
  -博客

http报文：浏览器向服务器请求数据，发送request报文；服务器向浏览器返回数据，返回response报文

• 定位
  参考博客

• absolute基于哪一元素定位
  
  子元素的绝对定位相对于父元素；如果没有父元素，位置是相对于body来进行的；绝对定位会使元素从文档流中被删除，该元素原本占据的空间会被其他元素所填充

• 实现深拷贝和浅拷贝的方式
  博客
  知乎

• json实现深拷贝有什么缺点？
  简书
  原理：将对象序列化成一个json字符串，将对象的内容转化为字符串形式保存在内存中，再用json.parse()反序列化将json字符串变成一个新的对象

• 如何获取当前时间的毫秒数
  参考掘金

• 防抖和节流的区别
  防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次；如果在设定时间到来之前，又一次触发了事件，就重新开始延时
  节流：当持续触发事件时，保证在一定时间段内只调用一次事件处理函数；
  两种实现方式：时间戳和定时器

• vue中的组件通信
  参考博客
  方法1:
  父传子：props （组件中的数据共有三种形式：data、props、computed）
  子传父：子组件$emit 父组件v-on等事件绑定数据
  方法2

var event=new Vue()
event.$emit(事件名，数据)
event.$on(事件名，data=>{})
1
2
3

方法3
vuex

vuex原理：vuex实现了一个单向数据流，State存放全局数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation提供了订阅者模式外部插件调用获取State数据的更新，异步操作或批量的同步操作需要经过Action执行，但是Action无法直接修改数据，还是需要Mutation执行修改数据的操作；最后根据State变化后的数据，渲染至视图上。

方法4
$attrs 表示没有继承数据的对象，格式为{属性名：属性值} 存放父组件中绑定的非props属性

$listeners 存放父组件中绑定的非原生事件

• vuex中mutation和action的区别

Mutation中是同步函数和Action中是异步函数，属于一种约定，为了更好的追踪vuex的状态变化，希望我们都按照这种原则进行开发

Mutation必须是同步函数

更改state的唯一方法是通过提交 mutation

Action中不进行状态的直接更改，而是通过commit触发mutation

mutation的触发通过store.commit来进行

action的触发通过store.dispatch进行

• 选择器优先级
  内联样式 > id选择器 > 类和伪类 > 元素选择器 > 通配选择器
  在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式