Web前端面试题(附答案及解析)（2025.6月最新版）

5、localStorage、sessionStorage、cookie 三者明细区别？（⭐⭐⭐）


cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。


存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。


有期时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
————————————————                            
                       
原文链接：https://blog.csdn.net/m0_69257679/article/details/129794885


9、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ （⭐）

     title与h1的区别


从网站角度看，title 更重于网站信息。title可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。
从文章角度看，h1则是用于概括文章主题。
一个网站可以有多个title,最好一个单页用一个title，以便突出网站页面主体信息，从seo看，title权重比h1高，适用性比h1广。
标记了h1的文字页面给予的权重会比页面内其他权重高很多。一个好的网站是h1和title并存，既突出h1文章主题，又突出网站主题和关键字。达到双重优化网站的效果。


     b与strong 的区别


b 是只是对文本的简单加粗， strong 是一个语义化标签，对相关文本具有强调作用
b 标签只是侧重于字体加粗， strong标签加强字体的语气都是通过粗体来实现的，相比之下，搜索引擎更喜欢侧重于strong标签
strong标签更注重于内容上的应用，在html中，对关键词的标明，然而还有一些网站上，也有使用strong标签登对小标题进行强调，但是在页面中，如果出现过多的strong标签，可能会对排名不利。


     i 与 em 的区别


 i(italic)是实体标签，用来使字符倾斜，em(emphasis)是逻辑标签，作用是强调文本内容
i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。
建议：为了符合CSS3的规范，i 标签应尽量少用而应改用 em
————————————————

11、js列举和数组操作相关的方法(常用)（⭐⭐⭐⭐⭐）

在JavaScript中，数组操作是编程的常见任务之一。JavaScript提供了一系列与数组操作相关的方法，这些方法可以用来操纵数组，如添加、删除、查找、排序和遍历元素等。以下是一些常用的数组方法：

添加元素
push(): 在数组的末尾添加一个或多个元素，并返回新的长度。
unshift(): 在数组的开头添加一个或多个元素，并返回新的长度。

删除元素
pop(): 删除数组的最后一个元素，并返回那个元素。
shift(): 删除数组的第一个元素，并返回那个元素。
splice(): 通过删除、替换或添加新元素来改变数组的内容。


查找元素
indexOf(): 查找元素在数组中的索引。
lastIndexOf(): 从数组的末尾开始查找元素。
find(): 查找第一个满足测试函数的元素。
findIndex(): 查找第一个满足测试函数的元素的索引。


排序和翻转
sort(): 对数组元素进行排序。
reverse(): 颠倒反转数组中元素的顺序。


遍历和过滤
forEach(): 对数组的每个元素执行一次提供的函数。
map(): 创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。
filter(): 创建一个新数组，包含通过所提供函数实现的测试的所有元素。
reduce(): 对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。
reduceRight(): 类似reduce()，但是从数组的末尾开始累加。


归并数组
concat(): 合并两个或多个数组。
slice(): 提取原数组的一部分，返回一个新数组。


其它方法
join(): 将数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。
toString(): 返回一个表示数组内容的字符串。
split(): 把字符串转换成数组。
toLocaleString(): 返回一个表示数组内容的本地化字符串。
这些方法可以在日常编程中大大简化数组操作的复杂性。使用这些方法时，需要注意它们的返回值和副作用。例如，push 和 pop 方法会改变原数组，而 concat 方法则会返回一个新数组。在编写代码时，了解这些方法的特性对于避免不必要的错误和优化性能至关重要。
 
————————————————


12、typeof和instanceof的区别是什么？ （⭐⭐）
（1）typeof 的返回值是一个字符串，用来说明变量的数据类型；
typeof用于数据类型的判断，返回值有number、string、boolean、function、undefined、object 六个。但是，在其中你会发现，typeof判断null、array、object以及函数的实例（new + 函数）时，它返回的都是object。这就导致在判断这些数据类型的时候得不到真实的数据类型。所以，typeof 存在的弊端——它虽然可以判断基本数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断。
（2）instanceof的返回值是布尔值，用于判断一个变量是否属于某个对象的实例。instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型。
————————————————


13、JS中 “==“和“===“的区别详解（⭐⭐）
区别
===：三个等号我们称为等同符，当等号两边的值为相同类型的时候，直接比较等号两边 的值，值相同则返回 true，若等号两边的值类型不同时直接返回 false。也就是说三个等号既要判断值也要判断类型是否相等。
==：两个等号我们称为等值符，当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。也就是说两个等号只要值相等就可以。
————————————————


16、讲解js的call、apply和bind区别？（⭐⭐⭐）

       首先，call apply bind三个方法都可以用来改变函数的this指向，具体区别如下：

    call( ) 是接收一个及其以上的参数，第一个参数表示this要指向的对象，其余参数表示调用函数需要传入的参数，返回调用函数的返回结果，属于立即执行函数；
    apply( ) 是接收两个参数，第一个参数表示this要指向的对象，第二参数表示调用函数需要传入的参数所组成的数组，返回调用函数的返回结果，属于立即执行函数；
    bind( ) 是接收一个及其以上的参数，和call(）一致，但是其返回是一个函数，而不是调用函数的返回结果。


   call、apply、bind相同点：都是改变this的指向，传入的第一个参数都是绑定this的指向，在非严格模式中，如果第一个参数是nul或者undefined，会把全局对象（浏览器是window）作为this的值，要注意的是，在严格模式中，null 就是 null，undefined 就是 undefined；
   call和apply唯一的区别是：call传入的是参数列表，apply传入的是数组，也可以是类数组；
   bind和call、apply的区别： bind返回的是一个改变了this指向的函数，便于稍后调用，不像call和apply会立即调用；bind和call很像，传入的也是参数列表，但是可以多次传入，不需要像call---一次传入。

    值得注意：当 bind 返回的函数 使用new作为构造函数时，绑定的 this 值会失效，this指向实例对象，但传入的参数依然生效 （new调用的优先级 > bind调用）
————————————————


9、什么是bundle？什么是chunk？什么是module？

bundle：是webpack打包后的一个文件；
chunk：代码块，一个chunk 可能有很多的模块组成，用于合并和分割代码；
module：模块，在webpack中，一切都是模块，一个文件就是一个模块，她从入口开始查找webpack依赖的所有模块
————————————————


21、浅拷贝和深拷贝区别概念常见情况？（⭐⭐⭐⭐）

     一、浅拷贝浅拷贝创建一个新的对象，但是只复制原始对象的基本数据类型的字段或引用（地址），而不复制引用指向的对象。这意味着新对象和原始对象中的引用指向相同的对象。
如果原始对象中的字段是基本数据类型，那么这些字段会被复制到新对象中，而如果字段是引用类型，则新对象和原始对- 象的对应字段将引用同一个对象。因此，对新对象所做的修改可能会影响到原始对象，因为它们共享相同的引用。
     二、深拷贝深拷贝创建一个新的对象，并且递归地复制原始对象的所有字段和引用指向的对象，而不仅仅是复制引用本身。
      深拷贝会递归复制整个对象结构，包括对象内部的对象，确保新对象和原始对象之间的所有关系都是独立的。这意味着对新对象所做的修改不会影响到原始对象，因为它们拥有彼此独立的副本。

————————————————
1、基本类没有问题因为，基本类型赋值时，赋的是数据（所以，不存在深拷贝和浅拷贝的问题）。
 例如1：    var x = 100;    var y = x; //此时x和y都是100;   如果要改变y的值，x的值不会改变。
2、引用类型有问题因为，引用类型赋值时，赋的值地址（就是引用类型变量在内存中保存的内容） 例如2：var arr1 = new Array(12,23,34)var arr2 = arr1;  //这就是一个最简单的浅拷贝如果要改变arr2所引用的数据：arr2[0]=100时，那么arr1[0]的值也是100。原因就是 arr1和arr2引用了同一块内存区域（以上的第二点中有体现）。这是最简单的浅拷贝，因为，只是把arr1的地址拷贝的一份给了arr2，并没有把arr1的数据拷贝一份。所以，拷贝的深度不够。

一、常见的 “浅” 拷贝方法：
除了上面我们演示的对于赋值操作，下面将介绍一些开发中可能会用到，当然也可以会被面试官问到的实现深浅拷贝的方法。1. Object.assign()方法解释：方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象,它将返回目标对象可以实现一个浅拷贝的效果。参数一：目标对象参数二：源对象————————————————
var obj1 = {
            a: 1,
            b: 2,
            c: ['c', 't', 'r']
}
var obj2 = Object.assign({}, obj1);
obj2.c[1] = 5;
obj2.b = 3
console.log(obj1); // {a:1,b:2,c:["c", 5, "r"]}
console.log(obj2); // {a:1,b:3,c:["c", 5, "r"]}
console.log(obj1.c); // ["c", 5, "r"]
console.log(obj2.c); // ["c", 5, "r"]

二、实现 “深” 拷贝常见方法：

1. JSON.parse(JSON.stringify(obj))

JSON.stringify()是目前前端开发过程中最常用的深拷贝方式，原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象

JSON.stringfy() 将对象序列化成json对象
JSON.parse() 反序列化——将json对象反序列化成js对象 。


2. 使用第三方库实现对象的深拷贝，比如：lodash、jQuery
import lodash from 'lodash'
   var objects = [1,{ 'a': 1 }, { 'b': 2 }];
   var deep = lodash.cloneDeep(objects);
deep[0] = 2;
deep[1].a = 2;
console.log(objects); // [1,{ 'a': 1 }, { 'b': 2 }]
console.log(deep); //[2,{ 'a': 2 }, { 'b': 2 }]


https://blog.csdn.net/m0_69257679/article/details/129794885?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522dda5ecd1e5bec732083970e946076d13%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=dda5ecd1e5bec732083970e946076d13&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-129794885-null-null.142^v102^pc_search_result_base7&utm_term=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4187






6、如何用CSS3画一个三角形？（⭐）



<style>
.up{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-top: 100px solid red;/*红色*/    //尖朝下

}
.down{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-bottom: 100px solid blue;/*蓝色*/    //尖朝上

}
.left{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-left: 100px solid pink;/*黑色*/    //尖朝右
}
.right{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-right: 100px solid pink;/*黄色*/    //尖朝左
}
</style>
 
<body>
    <div class="up"></div>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
</body>

10、CSS3中 transform 属性~平面转换（⭐）

（1）位移：transform: translate(水平移动距离, 垂直移动距离)

（2）旋转


          transform: rotate(角度); 注意：角度单位是deg


          取值为正, 则顺时针旋转 Ø 取值为负, 则逆时针旋转


（3）缩放


         transform: scale(x轴缩放倍数, y轴缩放倍数);


         transform: scale(缩放倍数);


         scale值大于1表示放大, scale值小于1表示缩小


（4）transition的基本用法
transition：[属性名] [持续时间] [速度曲线] [延迟时间]
     我们可以很方便的用这个过渡来给某一个属性加上好看的动效。
     例如，高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：
                     transition:height 2s ease 0.5s
      或者一个属性不够，想要监听所有属性。
                    transition: all 2s ease .5s
————————————————


7、闭包的理解?（⭐⭐⭐⭐⭐）
 
概念：有权访问另一个函数内部变量的函数。
本质：是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。


    面试：什么是闭包？
   通俗的来说：闭包是在一个函数内部在定一个函数，然后内部函数访问外部函数的一个变量就会形成闭包，闭包的话会形成一个私有空间，然后避免全局变量的一个污染，然后会持久化存储数据到内存中，但是闭包也有弊端，它会导致内存泄漏


    拓展：内存泄漏怎么解决？
首先避免它的使用，其次的话就是变量执行完以后，可以让它赋值为null，最后利用JS的一个垃圾回收机制进行回收


   闭包用处：
读取内部函数的变量；
这些变量的值始终会保持在内存中，不会在外层函数调用后被自动清除


闭包优点：
变量会一直在内存中；        
避免全局变量的污染；
私有变量的存在；


闭包缺点：
   变量长期储存在内存中，会增大内存的使用量，使用不当会造成内存泄露


判断闭包的3个特点：
1.函数嵌套函数；
2.内部函数一定操作了外部函数的局部变量；
3.外部函数一定将内部函数返回到外部并保存在一个全局变量中；


判断闭包的执行结果：
1.外部函数被调用了几次就有几个受保护的局部变量的副本；
2.来自一个闭包的函数被调用几次，受保护的局部变量就变化几次；


闭包特性：
1.函数嵌套函数；
2.内部函数可以直接使用外部函数的局部变量；
3.变量或参数不会被垃圾回收机制回收；
————————————————
                     
原文链接：https://blog.csdn.net/m0_69257679/article/details/129794885