前端常见面试题总结(持续更新中~~~)

promise

是什么

Promise 是一个对象,一般作为构造函数来使用(new Promise),它里面有 3 种状态,pending(处理中)、fulfilled(成功)、rejected(失败)。

怎么用

拿到一个 Promise 实例后,具有 then 和 catch 方法,一般 then 里面拿到成功的结果,catch 拿到失败的结果。

解决了什么问题

它主要解决了回调地狱的问题,但是 Promise 并不能简化代码。

有什么替代方案

所以我一般工作的时候都会配合 async/await 来使用,这样既解决了回调地狱又简化了代码。


rem

是什么

REM 是一个相对于根元素(HTML)字体大小的一个单位。

怎么用

一般我们会做移动端适配

1、引入 flexible.js,它默认划分了 10 份

2、所以基准值设置为 75px(把量取到的设计稿的宽度都除以 75 转成 REM)

3、因为 flexible 它能根据不同设备的宽度动态的计算出根元素的字体大小,这样呢?根元素的字体大小都变了,所以所有使用 REM 做单位的元素自然就跟着变了。

解决了什么问题

解决了移动端适配的问题。

有什么替代方案

vw/vh

将屏幕可视窗口分成100份, 50vw表示可是窗口一半的宽度


1、用户登录成功后,获取用户信息,用户信息里面包含当前用户的==权限标识==。

await store.dispatch('user/getUserInfo')

2、根据当前==权限标识==筛选出有权限的路由(动态路由)。

const routes = await store.dispatch('permission/filterRoutes', roles.menus)

3、之后做了 2 件事情。

4、第 1 件事情,把筛选出的有权限的路由通过 addRoutes 添加到了 router 实例,目的:为了能够通过地址栏能访问。

router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])

5、第 2 件事情,把筛选出的有权限的路由存到了 Vuex 一份,目的:为了侧边栏能够使用。

// 在这个 action 里面做的
const routes = await store.dispatch('permission/filterRoutes', roles.menus)

6、已经添加了路由实例,为什么不直接从路由实例获取呢?因为通过 addRoutes 后续添加的路由确实访问不到,官方建议放到 Vuex 一份。


内存泄露

不在使用的对象,却没有被垃圾回收(Garbage Collection),就是内存泄露。

什么情况下可能会造成内存泄露

  1. 无意的全局变量
// 无意的全局变量,会造成内泄漏
function fn() {
    obj = {
        age: 18,
    }
}
// 函数都已经调用完毕了,内部的对象却没有释放掉
fn()
console.log(obj)
function fn() {
    this.obj = {
        age: 18,
    }
}
fn()
  1. DOM 引用
<button id="btn">btn</button>
<script>
    const oBtn = document.querySelector('#btn')
    oBtn.onclick = function () {
        console.log(1)
    }
    document.body.removeChild(oBtn)

    oBtn.click()
    oBtn.onclick()
</script>

解决

oBtn = null // 手动释放

什么是webpack

webpack是一个打包模块化JavaScript的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注构建模块化项目,webpack可以看作是模块打包机:它做的事情是,分析你的项目结构,找到javaScript模块以及其他的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其打包为合适的格式以供浏览器使用


什么是函数柯里化

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术


js的数据类型

js数据分为基本数据类型和复杂数据类型, 基本数据类型分为: number, string, boolean, null, undefined, , symbol, bigint七种,复杂数据类型分为 object, array, function 三种


高阶函数

1.把函数作为参数

2.返回一个函数


如何判断数据类型

1.typeOf()

2.instanceOf()

3.isArray()

4.object.prototype.toString.call()


元素浮动有什么影响

浮动具有很严重的破坏性,不仅仅对自身的布局可能严重破坏,同时对兄弟节点,特别是父元素的布局也带来破坏性


清除浮动的方法

  1. 给浮动元素的父元素增加固定的height

  2. overFlow:hidden

  3. 伪元素,clearFix (.clearfix:after { content: '.'; height: 0; display: block; clear: both; })

  4. 给父元素和兄弟元素设置BFC


js中的继承


原型链

只要是对象就会有原型,原型也是对象,所以只要定义了一个对象,就可以找到它的原型,如此反复知道返回的是一个undefined,形成的一个链式结构,就是原型链 (把下面这张图说出来就差不多了)

 个人理解:

构造函数可以通过prototype访问到它的原型对象,构造函数通过new方法得到的实例化对象,可以通过__proto__访问到对象原型(这两个访问到的是同一个原型),原型对象(对象原型)也可以通过__proto__访问到它的原型对象,直到为null结束,以此形成的链式结构称之为原型链。


闭包

实现数据和方法私有化的方式。内层函数可以调用外层函数的变量和方法


如何判断this的指向

1.使用函数名调用函数, 此时 this 指向 它的调用者

2.使用对象调用函数, 此时 this 指向 该方法所属的对象

3.调用事件处理函数,此时 this 指向 绑定事件的对象

(前三种其实可以归结为谁调用指向谁)

4.定时器调用函数,此时 this指向window

5.箭头函数的this指向包裹它的最近一级的函数

6.构造函数的this指向它的实例化对象


call apply bind的使用

call和bind的第一个参数都是this,可以传无数个参数,apply传的是一个数组,call和apply是可以立即执行的,bind不能立即执行,他返回的是一个函数,需要调用之后才能执行


数组常用api

pop() push() shift() unshift() splice() slice() filter() map() reduce() erery()  sort()  reverse() forEach() some() includes()


reduce的使用格式

reduce(function(累加器,当前项,向前项索引,数组本身),当前项)


什么是回调地狱,如何解决

回调地狱最主要的就是因为功能逻辑代码嵌套的层次太多,导致可读性降低,维护困难,避免回调地狱的最重要的方面是将功能移开,保持代码简单,不嵌套并分成小模块,也就是多多进行代码封装,将你所要的属性和方法用function关键字包裹起来,而且还要给它取一个有意义的名字

常见的解决回调地狱有promises,Generators,async


new的背后做哪些事情

1.创建了一个空对象

2.将空对象的指针指向构造函数的原型对象

3.改变构造函数的this指向这个空对象,

4.返回这个空对象


防抖和节流

防抖:(王者荣耀回城):在一段时间内,多次触发,每次触发都会 重新计时

节流:(轮播图,滚动条) 在一段时间内,多次触发,只会生效一次


for in和for of的区别

for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值

for in总是得到对象的key或数组、字符串的下标

for of总是得到对象的value或数组、字符串的值


递归及应用场景


eventloop事件循环

事件循环分为同步任务和异步任务,


深拷贝和浅拷贝

深拷贝拷贝的是数据,浅拷贝拷贝的是地址


垃圾回收机制

垃圾回收机制是浏览器自带的


await async的使用方式


https和http的区别


常见http的状态码

404 找不到页面

405 

500  有可能是传参错误,也可能是后端错误


js延迟加载的方式



如何减少重绘和回流


描述输入url地址到网页展示的过程


跨域问题及解决方案

1.procy代理

2.跨域浏览器

3.跟后端同事沟通一下


本次持久化的方式和区别

三种

1. localStorage() 数据保存在本地,需要手动清除

2. sessionStorage()  数据存储在浏览器中,关闭浏览器自动清除

3. cookie   有时效性


get请求和post请求的区别


http的协议的三个内容


请求头中的contentType有什么用处


事件冒泡和事件捕获


事件委托

事件委托的原理是:事件冒泡


如何添加和删除事件


单个组件的生命周期钩子


哈希路由和history路由的区别


哈希路由和history路由的原理


父子组件的生命周期钩子


组件之间传参方式


v-mode和.sync的对比


vue路由钩子beforeEach的参数


vuex的基本使用步骤


组件之间传参方式


vue路由钩子beforeEach的参数


vuex的getters的作用


mutation和action的使用区别


计算属性和watcher的使用区别


vue2中v-model是一个语法糖,那具体是怎么实现的


v-if和v-show的区别


key的作用


vue2常用指令有哪些


vue2和vue3的区别


vue2中过滤器是怎么使用的


vue2中如何自定义指令


vue2中vue.use是怎么用的


vue2中$nextTick

(持续更新中.........)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值