前端技术面试

css三角形
image
promise 介绍 有几种状态

三种状态分别为:pending(待处理),fulfilled(成功),rejected(失败)

bfc

“块级格式化上下文”。block可以理解为一个简单的盒模型, Formatting Context则为block的上下文渲染环境.它是一个独立的渲染区域,其作用是使内部元素的布局不受外部元素影响。

应用场景 防止margin出现重叠 两栏布局,防止出现文字环绕效果 清除浮动,防止元素塌陷

页面发生乱码的原因

声明meta charset=UTF-8

h5和html区别

在文档声明上,html比html5长;html5提供了语义化标签,新增了绘图功能(canvas标签、svg)

函数参数数量不固定,怎么获取参数

不管函数有多少个参数,所有的参数都会被保存到arguments到这个数组类型中。如果我们可以从argments数组中拿到最后一个元素,即代表函数的fn,再把其它数组元素作为fn的参数,执行fn(arguments),这样,不管方法的参数列表有多长,都可以把所有参数放到argments中再传递给函数。

怎么区分数组和对象

es6新增:Array.isArray() 如果值是array,返回true,否则返回false (和instance的区别可以检测iframes)

instanceof用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

toString.call()检测类型

用constructor

== 和===区别

==值比较 ===类型不同为false

防抖和节流

使用时间戳,当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为 0 ),如果大于设置的[时间周期]就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。

axios二次封装

安装 axios、安装后在,main.js中全局引入、在src下新建一个文件夹,在新文件夹创建一个新api.js文件、在文件夹新建一个axios.js文件,用来封装请求接口、在组件中引入使用

解决连续请求,显示loading导致页面闪烁问题

1.在一个请求的情况下,就不会有问题。但是如果存在请求一个接一个(连续请求),就会造成页面闪烁(loading显示 => 关闭 => 马上有显示 => 在关闭 …)
在store中增加两个变量isShowLoading变量用来控制是否 显示loading、loadingCount,用来计算请求次数
2.增加两个方法来对loadingCount进行增减操作
3.修改axios拦截器
4.在App.vue中处理是否显示loading

vue组件传值

1、父向子传值使用props;
2、子向父传值使用emit; 3、使用EventBus或Vuex进行兄弟传值; 4、使用“provide/inject”或“attrs/$listeners”方法进行跨级传值。
5.ref

单向数据流

方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立。单向数据流指只能从一个方向来修改状态。 Vue中的单向数据流是针对基本数据类型,而引用类型是对数据地址的引入

路由拦截

路由拦截是通过vue-router的beforeEach方法在发生变化时进行每一次路由访问需要进行的拦截处理,。判断拦截信息中是否有鉴权要求或者权限校验,以此来实现鉴权。如果权限不够,访问的路径虽然存在但会被拦截。
比如跳转某个页面内要判断是否有登录等

登录流程

1.在登录页点击登录的时候,前端会带着用户名和密码去调用后端的登录接口
2.后端收到请求,验证用户名和密码,若验证失败,返回错误信息,前端提示相应的错误信息。如果验证成功,就会给前端返回一个token
3.前端拿到token,将token存储到vuex和localStorage中,并跳转页面,即登录成功
4.前端每次跳转至需要具备登录状态页面时,都需要判断当前token是否存在,不存在就跳转到登录页,存在则正常跳转(通常封装在路由守卫中)
5.最后,前端在向后端发送其他请求的时候,需要在请求头中带上token(项目中通常封装在请求拦截器中),后端判断请求头中有无token,有则验证该token,验证成功就正常返回数据,验证失败(如已过期)则返回相应错误码。前端拿到错误信息,清除token并回退至登录页
延申
1.这个token的值是我们在登录也就是login.vue这个页面从后端获得的。但是我们利用这个token值获取用户信息是在另一个页面(个人中心,我的)。也就是说我们在登录页面获取token,在“我的”页面通过token请求用户名放到对应位置
2.在登录界面我们主要是通过localstorage来把token值存到本地。
3.什么时候在localStorage中取token?
在created中,此时数据已经创建完毕,可以在localStorage中拿到持久化存储的token

持久化存储

localStorage、插件

组件模块化开发的优点

使用模块化开发能解决文件之间的依赖关系
可以避免命名的冲突
能进行代码的复用

ajax的请求方式

1、使用“$.ajax()”,可返回其创建的XMLHttpRequest对象;2、通过远程HTTP GET请求载入信息;3、通过远程HTTP POST请求载入信息;4、通过HTTP GET请求载入JSON数据。

get和post区别

post请求更安全,发送的数据更大,能发送更多的数据类型,post请求放在request body中传递
get请求的是静态资源,则会缓存,如果是数据,则不会缓存,get请求有url长度限制,get请求只能发送ASCII字符,get请求参数通过url传递

css隐藏元素的方式

1、设置“display:none”语句;
2、设置“visibility:hidden”语句;
3、设置“opacity:0”语句;
4、设置盒模型属性为0;
5、利用“position:absolute;top:-9999px;”语句。

垂直居中方式

display:flex
grid
使用绝对定位和transform
绝对定位结合margin: auto`
padding实现子元素的垂直居中

js声明变量的方式

var 存在变量提升,声明的变量为全局变量,不存在块级作用域,可以跨块访问, 不能跨函数访问
let、const具有块级作用域用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。存在暂时性死区,不存在变量提升
const用来定义常量,使用时必须初始化(即必须赋值)

vue2和vue3的区别

1、vue2的双向数据绑定利用了ES5的API Object.definePropert(),而vue3中使用了es6的API Proxy;
2、Vue3支持碎片,而vue2不支持;
3、 Vue2使用选项类型API,而Vue3使用合成型API;
4、建立数据,vue2把数据放入数据属性中,而Vue3使用setup()方法;
5、vue3有Teleport组件,vue2没有。

普通函数和箭头函数的区别

1:写法不一样
2:普通函数存在变量提升的现象
3:箭头函数不能作为构造函数使用
4:两者this的指向不同
5:箭头函数的arguments指向它的父级函数所在作用域的arguments
6:箭头函数没有new.target

http和https的区别

HTTP协议以明文方式发送内容,不提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息。https则是具有安全性的ssl加密传输协议。http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。并且https协议需要到ca申请证书。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全。

es6新特性

新增了let和const具有块级作用域,不存在变量提升的问题。
新增了箭头函数,简化了定义函数的写法,同时可以巧用箭头函数的this、(注意箭头函数本身没有this,它的this取决于外部的环境),
新增了promise解决了回调地域的问题,
新增了模块化、利用import、export来实现导入、导出。
新增了结构赋值,ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
新增了class类的概念,它类似于对象。

vuex模块化

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

vuex组件化和模块化的区别

模块化:是从代码逻辑的角度进行划分的:方便代码分层开发保证每个功能模块的职能一致。
组件化是从界面的角度进行规划:前端的组件化方便UI组件的重用。

mutation不能使用异步函数

如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。

vue 中key 的作用

key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,

ts优缺点

优点:
js文件可以直接改成 ts 文件,不定义类型可自动推论类型,可以定义几乎一切类型,ts 编译报错时也可以生成 js 文件,兼容[第三方库],减少bug
缺点:
需要理解接口(Interfaces)和泛型(Generics),类(class),枚举类型(Enums),增加类型定义,和有些库结合时不是很完美

vue3新特性

1、性能比vue2.x快1.2~2倍-Performance;
2、支持tree-shaking-Tree shaking support;
3、引入了Composition API-Composition API;
4、暴露了自定义渲染API-Custom Renderer API;
5、新增三个组件(Fragment、Teleport、Suspense);
6、更好的支持TS-Better TypeScript support;

vue中路由meta的作用

是路由元信息,通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可

map和foreach的区别

map()会分配内存空间存储新数组并返回,forEach()不会返回数据。

深拷贝和浅拷贝

浅拷贝就是指对象复制的时候只复制一层;深拷贝是指复制对象的所有层级。

不同请求方式的区别是什么

1、get:请求指定的页面信息,并返回实体主体
2、post:向指定资源提交数据并进行处理请求。数据被包含在请求体中,post请求可能会导致新的资源的建立或已有资源的修改
3、put:从客户端向服务器传送的数据取代指定的文档的内容
4、Delete:请求服务器删除指定的页面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容