当前位置：首页 > news >正文

前端面试题汇总

news 2025/7/8 15:07:40

一：JavaScript

1、闭包是什么？利弊？如何解决弊端？

闭包是什么：JS中内层函数可以访问外层函数的变量，外层函数无法操作内存函数的变量的特性。我们把这个特性称作闭包。

闭包的好处：

隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。
让我们可以使用回调，操作其他函数内部；
变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；

闭包的弊端：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起内存泄露。

解决办法：无法自动销户，就及时手动回收，使用后将函数的引用赋null。

2、深度拷贝

1、JSON的stringify和parse处理的缺点？

如果对象中有属性是function或者undefined，处理后会被过滤掉；
如果属性值是对象，且由构造函数生成的实例对象，会丢弃对象的constructor；

2、$.extend()

使用jquey的extend方法不仅能实现深度拷贝，还能实现深度合并。具体用法

深度拷贝：$.extend({},targetObject) // targetObject是需要复制的对象

深度合并：$.extend(true,{},targetObject1,targetObject2) // 可以将两个对象深度合并后再返回出一个新对象

3、判断空对象

1、用JSON的stringify和parse转成字符串后，跟'{}'对比；

2、用ES6，判断Object.keys(targetObject)返回值数组的长度是否为0；

3、用ES5，判断Object.getOwnPropertyNames(targetObject)返回的数组长度是否为0；

4、如何改变this指向？

call/apply

let a = {name: 'sunq',fn:function(action){console.log(this.name + ' love ' + action);}
}
let b = {name:'sunLi'}// 正常的this指向
a.fn('basketball');   // sunq love basketball
// 改变this指向，并体现call与apply的区别
a.fn.apply(b,['football']); // sunLi love football
a.fn.call(b,'football'); // sunLi love football

bind

// 还是上面的示例，bind也可以实现call和apply的效果。
// bind的不同之处在于bind会返回一个新的函数。如果需要传参，需要再调用该函数并传参
a.fn.bind(b)('piano'); // sunLi love piano

5、沙箱隔离怎么做？

使用iframe可以实现，变量隔离

二：CSS

1、如何实现一个宽度不固定的上下左右居中的弹框？

方法一：
.pop{width: 300px;height: 300px;position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto;border: 1px solid red;
} 方法二：
.chartLengend {   // 父元素width: 60px;height: 40px;position: relative;.line {       // 子元素width: 100%; height: 3px;background-color: #DEA182;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 2px;}
}

三：Vue

1、单页面应用是什么？优缺点？如何弥补缺点

单页面对一个入口DOM通过路由去更改内容，整个应用只有一个html页面

SPA优点：用户体验好，没有页面切换就没有白屏情况；

SPA缺点：首屏加载慢，不利于SEO

SPA弥补：通过压缩、路由懒加载缓解首屏慢；通过SSR 服务器端渲染解决SEO问题；

2、组件间通信方式常用哪些？

父子：props和$emit

兄弟：使用EventBus（事件总线），vue.$bus.on和emit方法。详情

3、v-if和v-show区别？

v-if控制Dom是否存在，v-show控制样式

4、vuex是什么？使用步骤大概说下

5、vue watch和computed区别？

computed

计算结果并返回，只有当被计算的属性发生改变时才会触发（即：计算属性的结果会被缓存，除非依赖的响应属性变化才会重新及孙）

watch

监听某一个值，当被监听的值发生变化时，执行相关操作。

与computed的区别是，watch更加适用于监听某一个值得变化，并做对应操作，比如请求后台接口等。而computed适用于计算已有的值并返回结果。监听简单数据类型：

data(){      return{        'first':2     }   
},   watch:{      first(){        console.log(this.first)    }   },

6、Vue的虚拟Dom是什么？

7、vue的双向绑定原理，为什么返回对象？

8、vue首屏优化怎么做？

1、vue-cli开启打包压缩和后台配合 gzip访问；

2、路由懒加载；

9、vue2的缺陷是什么？如何解决vue2.0数组中某一项改变，页面不改变的情况？

缺陷：数据如果为对象直接新增属性，如果为数组通过下标操作数组项，页面无法触发更新。

原因： Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。关于数组作者通过重写push/pop/shift/unshift/splice/reverse/sort这些方法来实现数据的相应绑定，其余的操作无法触发页面更新；

对策：关于对象可以通过Vue.$set(obj,key,value)，组件中通过this.$set(obj,key,value)实现新增，修改属性vue可以相应更新视图。关于数组也可以通过Vue.$set(obj,key,value)，或者作者重写的那些方法来操作；

10、异步操作放在created还是mouted？

如果有些数据需要在初始化时就渲染的，比如select下拉框的下拉内容，在mouted中请求。好处如下

页面初始化速度更快，减少用户等待时间
放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数

四：ES6

1、箭头函数与es5函数区别？

箭头函数的this指向是固定的，普通的this指向是可变的

let a = {name: 'sunq',fn:function(action){console.log(this.name + ' love ' + action);}
}
let b = {name:'sunLi'}// 正常的this指向调用他的对象
a.fn('basketball');   // sunq love basketball
// 改变this指向
a.fn.apply(b,['football']); // sunLi love football// 如果将a对象的fn函数改成箭头函数，this.name会是undefined
// 箭头函数的this指向不会改变，且总是指向函数定义生效时所在的对象。

不可以当作构造函数，不可以对箭头函数使用new命令，否则会抛出一个错误。

var Person = function(name){this.name = name;
}
let sunq = new Person('sq'); // {name: 'sq'}var Person = (name) => {this.name = name;
}
let sunq = new Person('sq'); // 报错 Person is not a constructor