2024年前端最全又来八道让我萌币的前端面试题，b站hr面试

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

});

return new_arr.join(‘’);

}

console.log(processString(‘AbC’));

第 2 题：下面的代码打印什么内容，为什么？

解析：

几个例子：

var b = 10;

(function b() {

// 内部作用域，会先去查找是有已有变量b的声明，有就直接赋值20，确实有了呀。发现了具名函数 function b(){}，拿此b做赋值；

// IIFE的函数无法进行赋值（内部机制，类似const定义的常量），所以无效。

// （这里说的“内部机制”，想搞清楚，需要去查阅一些资料，弄明白IIFE在JS引擎的工作方式，堆栈存储IIFE的方式等）

b = 20;

console.log(b); // [Function b]

console.log(window.b); // 10，不是20

})();

所以严格模式下能看到错误：Uncaught TypeError: Assignment to constant variable

var b = 10;

(function b() {

‘use strict’

b = 20;

console.log(b)

})() // “Uncaught TypeError: Assignment to constant variable.”

其他情况例子：

有window：

var b = 10;

(function b() {

window.b = 20;

console.log(b); // [Function b]

console.log(window.b); // 20是必然的

})();

有var:

var b = 10;

(function b() {

var b = 20; // IIFE内部变量

console.log(b); // 20

console.log(window.b); // 10

})();

第 3 题：（京东）下面代码中 a 在什么情况下会打印 1？

答案解析 因为==会进行隐式类型转换 所以我们重写toString方法就可以了

var a = {

i: 1,

toString() {

return a.i++;

}

}

if( a == 1 && a == 2 && a == 3 ) {

console.log(1);

}

解法二：

let a = [1,2,3];

a.toString = a.shift;

if( a == 1 && a == 2 && a == 3 ) {

console.log(1);

}

第 4 题：实现一个 sleep 函数

4种方式：

//Promise

const sleep = time => {

return new Promise(resolve => setTimeout(resolve,time))

}

sleep(1000).then(()=>{

console.log(1)

})

//Generator

function* sleepGenerator(time) {

yield new Promise(function(resolve,reject){

setTimeout(resolve,time);

})

}

sleepGenerator(1000).next().value.then(()=>{console.log(1)})

//async

function sleep(time) {

return new Promise(resolve => setTimeout(resolve,time))

}

async function output() {

let out = await sleep(1000);

console.log(1);

return out;

}

output();

//ES5

function sleep(callback,time) {

if(typeof callback === ‘function’)

setTimeout(callback,time)

}

function output(){

console.log(1);

}

sleep(output,1000);

第 5 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。

• display: none;

1. DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；

2. 事件监听：无法进行 DOM 事件监听；

3. 性能：动态改变此属性时会引起重排，性能较差；

4. 继承：不会被子元素继承，毕竟子类也不会被渲染；

5. transition：transition 不支持 display。

• visibility: hidden;

1. DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；

2. 事件监听：无法进行 DOM 事件监听；

3. 性 能：动态改变此属性时会引起重绘，性能较高；

4. 继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；

5. transition：transition 不支持 display。

• opacity: 0;

1. DOM 结构：透明度为 100%，元素隐藏，占据空间；

2. 事件监听：可以进行 DOM 事件监听；

3. 性 能：提升为合成层，不会触发重绘，性能较高；

4. 继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；

5. transition：transition 不支持 opacity。

第 6 题：使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果

我的答案：

[102, 15, 22, 29, 3, 8]

解析：

根据MDN上对Array.sort()的解释，默认的排序方法会将数组元素转换为字符串，然后比较字符串中字符的UTF-16编码顺序来进行排序。所以'102' 会排在 '15' 前面。以下是MDN中的解释原文：

The sort() method sorts the elements of an array in place and returns the array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

第 46 题：输出以下代码执行的结果并解释为什么

var obj = {

‘2’: 3,

‘3’: 4,

‘length’: 2,

‘splice’: Array.prototype.splice,

‘push’: Array.prototype.push

}

obj.push(1)

obj.push(2)

console.log(obj)

以下为个人猜想没有确切的理论依据：

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

根据MDN的说法理解，push方法应该是根据数组的length来根据参数给数组创建一个下标为length的属性

我们发现，push方法影响了数组的length属性和对应下标的值。

在对象中加入splice属性方法，和length属性后。这个对象变成一个类数组。

这个时候控制台输出的是一个数组，但是实际上它是一个伪数组，并没有数组的其他属性和方法。

所以我认为题目的解释应该是：

1. 使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1

2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1

3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印

4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined

第一第二步还可以具体解释为：因为每次push只传入了一个参数，所以 obj.length 的长度只增加了 1。push方法本身还可以增加更多参数

第 7 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

• 没有自己的 this，无法调用 call，apply。

• 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 __proto__

new 过程大致是这样的：

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

• 没有自己的 this，无法调用 call，apply。

• 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 __proto__

new 过程大致是这样的：

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】