2024年Web前端最新一些看起来很叼难的前端面试题，2024历年华为跳动前端面试真题解析

2401_84447362

于 2024-05-12 01:38:57 发布

阅读量773

点赞数 21

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447362/article/details/138736301

版权

程序员专栏收录该内容

146 篇文章 2 订阅

订阅专栏

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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

8.请描述一下 cookies ， sessionStorage 和 localStorage 的区别

9.请列举 html5 本地存储（ localStorage ）相关 api ，并实现 getAll 方法，获取本地存储

链接：https://www.nowcoder.com/questionTerminal/4fa885ec00f347db8e7217475f731fc7 来源：牛客网

setItem(key,value) 添加数据
getItem(key) 根据key获取值
key(index) 根据索引获取key
removeItem(key) 根据key删除一条数据
clear() 清空数据
length:获取总数据的长度

getAll()这个方法我没太明白想获取什么，所以我采用了key()和getItem()方法结合获取键值对

function() {

for (let i = 0; i < localStorage.length; i++) {

let key = localStorage.key(i)

let value = localStorage.getItem(key)

console.log(key + “:” + value)

}

10.JS中substr与substring的区别

JS中substr与substring的区别

js中substr和substring都是截取字符串中子串，非常相近，可以有一个或两个参数。

语法：substr(start [，length]) 第一个字符的索引是0，start必选 length可选

substring(start [, end]) 第一个字符的索引是0，start必选 end可选

相同点：当有一个参数时，两者的功能是一样的，返回从start指定的位置直到字符串结束的子串

var str = “hello Tony”;

str.substr(6); //Tony

str.substring(6); //Tony

不同点：有两个参数时

（1）substr(start,length) 返回从start位置开始length长度的子串

“goodboy”.substr(1,6); //oodboy

【注】当length为0或者负数，返回空字符串

（2）substring(start,end) 返回从start位置开始到end位置的子串（「不包含end」）

“goodboy”.substring(1,6); //oodbo

【注】:

（1）substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点

（2）start 或 end 为 NaN 或者负数，那么将其替换为0

❝

str是字符串时str.substring(start,end)和str.slice(start,end)完全等价；str是数组时str.slice(start,end)还可以继续用，str.substring(start,end)就不行了。

❞

11.JS 截取地址栏指定字符后的内容

一、获取地址栏路径

var url = window.location.href;

二、截取指定字符后的内容

/**

* 截取指定字符后的内容

* @param url 路径

* @param parameter 字符

function getCaption(url,parameter) {

var index = url.lastIndexOf(parameter);

url = url.substring(index + 1, url.length);

return url;

}

三、调用方法及结果

示例：

var url=“http://www.baidu.com?123”;

var a = getCaption(url, “?”);

输出结果：123

12.以下代码的运行结果是

var game=‘4399’

game.substring(2,1)

console.log(game)

这里有两个坑，第一个是start<stop的话，会自动交换这两个参数，第二个是substring对原数组不会改变。

13.JS的重定向有哪些

location.assign(“http://www.baidu.com”);

location.href=“http://www.baidu.com”;

window.location=“http://www.baidu.com”;

top.location=“http://www.baidu.com”;

self.location=“http://www.baidu.com”;

window.location.href=“http://www.baidu.com”;

14.谈谈你对虚拟DOM原理的理解？

什么是Virtual DOM

Virtual DOM是对DOM的抽象，本质上是JavaScript对象，这个对象就是更加轻量级的对DOM的描述.

为什么需要Virtual DOM

既然我们已经有了DOM,为什么还需要额外加一层抽象？

首先，我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢，更因为频繁变动DOM会造成浏览器的回流或者重回，这些都是性能的杀手，因此我们需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况.

其次，现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率.

最后，也是Virtual DOM最初的目的，就是更好的跨平台，比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtual DOM本身是JavaScript对象.

15.怎么利用img进行xss攻击

这个问题，我有点蒙蔽，我以为是转发图片给上当者，然后就攻击了，网上找了答案，果不其然，我想错了

因为最近在学习web安全，出于好奇，尝试对CSDN进行了XSS注入，没想到真的成功了。

操作步骤：

直接找一篇博客，在底下评论

因为CSDN做了简单的转义，他会将注入的标签，去掉闭合性，也就是会把我注入的内容处理为：

这样，注入的标签就失去了他的闭合性了，对一些普通的攻击就进行了防御，但是onerror事件是专门针对js出错的，所以，标签闭合性被破坏刚好触发了这个事件，所以，他会被执行，执行之后将img标签的src属性替换成我们想要的属性，然而我注入的这个地址，故意又是一个不能访问的地址，于是，就反复的触发这个onerror事件，最终导致浏览器堆栈溢出了。

说明：如果图片存在，但网络很不通畅，也可能触发 onerror。

解决方法：

- 1、用html转义，将<>转义成转义符，这样标签就编程了文本了（QQ空间的做法） - 2、使用jsoup白名单过滤掉onerror关键字，让他不要在前台显示（这种更安全，因为转义还有可能被绕过）