Web前端最全又又来八道让我萌币的前端面试题，前端开发工程师面试题目

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

a[b]=‘b’;

a[c]=‘c’;

console.log(a[b]);

这题考察的是对象的键名的转换。

• 对象的键名只能是字符串和 Symbol 类型。

• 其他类型的键名会被转换成字符串类型。

• 对象转字符串默认会调用 toString 方法。

// example 1

var a={}, b=‘123’, c=123;

a[b]=‘b’;

// c 的键名会被转换成字符串’123’，这里会把 b 覆盖掉。

a[c]=‘c’;

// 输出 c

console.log(a[b]);

// example 2

var a={}, b=Symbol(‘123’), c=Symbol(‘123’);

// b 是 Symbol 类型，不需要转换。

a[b]=‘b’;

// c 是 Symbol 类型，不需要转换。任何一个 Symbol 类型的值都是不相等的，所以不会覆盖掉 b。

a[c]=‘c’;

// 输出 b

console.log(a[b]);

// example 3

var a={}, b={key:‘123’}, c={key:‘456’};

// b 不是字符串也不是 Symbol 类型，需要转换成字符串。

// 对象类型会调用 toString 方法转换成字符串 [object Object]。

a[b]=‘b’;

// c 不是字符串也不是 Symbol 类型，需要转换成字符串。

// 对象类型会调用 toString 方法转换成字符串 [object Object]。这里会把 b 覆盖掉。

a[c]=‘c’;

// 输出 c

console.log(a[b]);

第四题.Vue 的父组件和子组件生命周期钩子执行顺序是什么

1. 加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2. 子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

3. 父组件更新过程

父beforeUpdate->父updated

4. 销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

。

第五题.input 搜索如何防抖，如何处理中文输入

当用中文输入法的时候，这时即使我们还在拼写的时候，仍然会触发input事件。

如果你不想还没真正的输入完一个中文就触发input的时候，你可以用这几个原生的api辅助你判断是否真正输入完一个中文：

1.compositionstart，键盘按下的时候触发，此时可能你刚刚按下一个n，但是这个并不是英文输入法的n。

2.compositionupdate，每次输入中文输入法的拼音就会触发，并且这个事件触发会紧接着触发一个input事件。

3.compositionend，输入框的拼音变成中文的时候触发，或者结束中文输入也会触发(在中文输入的时候，按esc或者失去焦点)

因此，你可以在上监听这三个事件，当compositionstart和compositionupdate这两个个事件触发的时候，设置一个boolean值，然后续的input事件不要这么快去做一个逻辑，再compositionend触发时再改变这个boolean值，去操作一些事情了。

var test = document.getElementById(‘test’)

test.addEventListener(‘compositionstart’, function (e) {

console.log(‘compositionstart’)

}, false)

test.addEventListener(‘compositionupdate’, function (e) {

console.log(‘compositionupdate’)

}, false)

test.addEventListener(‘compositionend’, function (e) {

console.log(‘compositionend’)

// 去搜索

}, f

。

第六题.周一算法题之「移动零」

示例:

输入: [0,1,0,3,12]

输出: [1,3,12,0,0]

说明:

1. 必须在原数组上操作，不能拷贝额外的数组。

2. 尽量减少操作次数。

function zeroMove(array) {

let len = array.length;

let j = 0;

for(let i=0;i<len-j;i++){

if(array[i]===0){

array.push(0);

array.splice(i,1);

i --;

j ++;

}

}

return array;

}

第七题.（京东）写出如下代码的打印结果

function changeObjProperty(o) {

o.siteUrl = “http://www.baidu.com”

o = new Object()

o.siteUrl = “http://www.google.com”

}

let webSite = new Object();

changeObjProperty(webSite);

console.log(webSite.siteUrl);

对象传值传的是引用，但是引用是copy给函数形参。

// 这里把o改成a

// webSite引用地址的值copy给a了

function changeObjProperty(a) {

// 改变对应地址内的对象属性值

a.siteUrl = “http://www.baidu.com”

// 变量a指向新的地址 以后的变动和旧地址无关

a = new Object()

a.siteUrl = “http://www.google.com”

a.name = 456

}

var webSite = new Object();

webSite.name = ‘123’

changeObjProperty(webSite);

console.log(webSite); // {name: 123, siteUrl: ‘http://www.baidu.com’}

第八题.HTTPS 握手过程中，客户端如何验证证书的合法性

还不了解https握手的请先阅读一次安全可靠的通信——HTTPS原理

大家在网络冲浪时, 在访问一些涉及金融/支付/登录/后台等敏感业务时, 会发现这些网站都会重定向到 https:// 的 URL , 例如:

• 地址为绿色, 表示安全且可信任;

• 地址为红色, 则表示虽然开启了加密, 但网站身份未验证, 无法保证不被中间人嗅探.

从我们在地址栏敲下 https:// 网站那一刹那, 到内容显示到我们面前, 中间经过了哪些过程了? 浏览器根据什么来判断, 当前网站网址是安全的还是未验证的? 这篇文章可帮助你了解到这些. 考虑到个人知识所限, 难免有遗漏或错误之处, 如你有发现, 请在下面留言指出.

图示:

---

讲解:

---

1. Client-hello 阶段

浏览器中完成地址输入后, 解析域名获得 IP Host 地址, 浏览器会与此 Host 的443(默认, 如果指定其他端口则会连接此端口) 尝试连接, 也就是 TLS 握手协议的 Client-hello, 上图的第一步.

浏览器会将"支持的加密组件"/"尝试连接到Host头"等信息发送给服务器, 并会附上一份随机生成的 session ticket1.

2. Server-hello 阶段

服务器收到浏览器发送来的 TLS 握手请求后, 存储浏览器发送的session ticket2, 然后根据发送来的 host 寻找对于的服务器证书, 然后会将服务器证书, 服务器与浏览器妥协(均支持)的加密套件方法, 和一份随机生成的 session ticket 返回给浏览器.

3. Cipher-spec 阶段

浏览器收到服务器返回的证书后, 会验证证书有效性. 验证步骤大概如下:

• 验证证书有效期(起止时间)

• 验证证书域名(与浏览器地址栏中域名是否匹配)

• 验证证书吊销状态(CRL+OCSP), [见本文后"吊销检查"章节].

• 验证证书颁发机构, 如果颁发机构是中间证书, 在验证中间证书的有效期/颁发机构/吊销状态. 一直验证到最后一层证书, 如果最后一层证书是在操作系统或浏览器内置, 那么就是可信的, 否则就是自签名. [见本文后"签发者"章节]

以上验证步骤, 需要全部通过. 否则就会显示警告.

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

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

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

章节]

以上验证步骤, 需要全部通过. 否则就会显示警告.

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

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

96道前端面试题：

• [外链图片转存中…(img-01nh0dT8-1715886992794)]

常用算法面试题：

• [外链图片转存中…(img-zjDUJhg8-1715886992795)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• [外链图片转存中…(img-1BHRgLC2-1715886992796)]