2023最全最新前端面试题（附加解析）
JS
1、说一下innerHTML 与 innerText的作用与区别？
作用：都可以获取或者设置元素的内容
区别：innerHTML可以解析内容中的html标签
innerText不能解析内容中的html标签
2、JavaScript 由以下三部分组成：
ECMAScript（语法部分）：JavaScript 语言基础
DOM（文档对象模型）：规定了访问 HTML 和 XML 的方法
BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法
3、介绍 JS 有哪些内置对象？
数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Arguments、Math、Date、RegExp、Error
ES6 新增对象：Symbol、Map、Set、Promises、Proxy、Reflect
4、JS 的基本数据类型和引用数据类型
基本(原始)数据类型: number、string、boolean、undefined, null, symbol
引用数据类型: Object、Function、Array
5、说几条写 JavaScript 书写的基本规范？
代码一定要正确缩进，建议使用"二个或者四个空格"缩进
语句结束使用分号;
规范定义 JSON 对象，补全双引号
用{}和[]声明对象和数组
变量和函数在使用前进行声明
以大写字母开头命名构造函数，全大写命名常量
代码段使用花括号{}包裹
还有要书写正确的标识标签
6、什么是标识符？
在JS中，可以自定义命名的东西都属性标识符；
比如变量名，函数名，参数名都是标识符
7、DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系
e.getAttribute：获取的是标签上属性
可以通过e.setAttribute(propName, propValue)设置标签上属性
e.propName：获取的是元素对象上属性
8、offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scrollHeight 的区别?
offsetWidth/offsetHeight 返回值包含 content + padding + border + 包含滚动条，效果与 e.getBoundingClientRect()相同
clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸
9、检测浏览器版本版本有哪些方式？
根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
10、说一下元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么
nodeType(节点类型) nodeName(节点名称) nodeValue(节点的值)
元素节点： 1 元素标签名 null(没有值)
属性节点： 2 属性名 属性值
文本节点： 3 text 节点内容
11、==和===的区别
双等号判断时，只需要值相等
三等号判断时，需要值与类型都相等
12、函数声明与函数表达式的区别？
数声明就是直接通过function进行声明函数，例如：function show(){}可以在声明函数之前调用0函
13、数组方法pop() push() unshift() shift()
pop()尾部删除
push()尾部添加
unshift()头部添加
shift()头部删除
14、ajax请求的时候get 和post方式的区别
（1）get请求
参数要跟在url后面
安全性不高
传输数据比较小，但速度快
一般用于获取，删除
（2）post请求
参数会放在请求体中，
安全性相对高些
传输数据大，但相对速度慢些
post一般用于修改或者添加
15、解释什么是Json:
json是一种轻量级的数据交换格式，一般用于数据传递
里边只允许出现双引号
JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null), 数组，对象
16、dom事件委托什么原理，有什么优缺点
事件委托原理: 事件冒泡机制（把子元素的事件行为 委托给 父级元素执行优点）
优点:
1. 可以大量节省内存占用，减少事件注册
2. 可以实现当新增子对象时，无需再对其进行事件绑定
缺点:
如果把所有事件都用事件代理，可能会出现事件误判
17、Javascript的事件流模型都有什么?
“事件冒泡”：事件逐级向上传播
“事件捕捉”：事件逐级向下传播，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
18、split() join() 的区别
split()：以指定的字符分割字符串返回一个数组,字符串方法
join(): 以指定的字符连接数组中元素返回一个字符串,数组方法
19、如何阻止事件冒泡
ev.stopPropagation();
20、如何阻止默认事件
答案：return false 或者 ev.prevent Default();
21、JavaScript中如何检测一个变量是一个 String 类型?
typeof 变量
变量.constructor === String
Object.prototype.toString.call(变量) // 推荐使用
22、javascript 的 typeof 返回哪些数据类型（至少六个）检测类型如下：
string、 number、 boolean 、undefined 、object 、function 、symbol（ES6之后新增的类型）
23、如何判断变量为NaN
通过isNaN()判断
isNaN(NaN) // 返回true
isNaN(1000) // 返回false
isNaN('小明') // 返回true（判断前会转换成number类型）
isNaN('101') // 返回false
24、什么是JS变量提升 与 块级作用域
变量提升：就是会把变量定义提升到当前作用域的最上面
块级作用域：JS 中作用域有：全局作用域、函数作用域。没有块作用域的概念。ES6中新增了块级作用域。块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。在外边不能调用块作用域里边定义的变量
25、null / undefined 的区别
null值：属于null类型,代表“空值"，代表一个空对象指针；使用typeof运算得到 “object"，所以你可以认为它是一个特殊的对象值。
undefined值：属于undefined类型，当一个声明的变量未初始化赋值时，得到的就是undefined。使用typeof运算得到“undefined"，
26、foo = foo || bar，这行代码是什么意思？为什么要这样写？
如果foo转为false, 则返回bar；否则直接返回foo
逻辑或：如果第一个值为true，直接返回第一个值；否则直接返回第二个值
逻辑与：如果第一个值为false，直接返回第一个值；否则返回第二个值、
27、target 和 currentTarget 区别
都是事件对象上的属性
event.target：返回触发事件的元素
event.currentTarget：返回绑定事件的元素(相当于事件中this)
28、prototype 和 proto 的关系是什么
prototype: 所有函数都会有一个prototype属性, 它就是函数的原型对象
proto: 所有实例对象上都会有一个proto属性, 它等同于函数的原型对象
(补充说明)
原型链：因为所有实例对象都原型对象，原型对象也个对象，
所以它也自己原型对象(这样形成原型链)
答案：
所有的对象都拥有proto属性，它指向对象构造函数的 prototype 属性
所有的函数都同时拥有proto和 prototype 属性
函数的proto指向自己的函数实现 函数的 protytpe 是一个对象(原型)
所以函数的 prototype 也有proto属性 指向 Object.prototype
Object.prototype.proto指向 null
29、请说一下你常用的数组方法(至少七个)
答案：
1）Array.push()：此方法是在数组的后面添加新加元素，此方法改变了数组的长度：
2）Array.pop()：此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：
3） Array.shift()：此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：
4） Array.unshift()：此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：
5）Array.isArray()：判断一个对象是不是数组，返回的是布尔值
6） Array.concat()：此方法是一个可以将多个数组拼接成一个数组：
7）Array.toString() ： 把数组作为字符串返回
8） Array.join() ：以指定字符拼接成字符串，然后返回
9） Array.splice：(开始位置， 删除的个数，元素)
10）Array.map()：此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
11）Array.forEach()：此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和 map 方法区分
12）Array.filter()：此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回
13）Array.every()：此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回 true，否则为 false：
14）Array.some()：此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回 true，若所有元素都不满足判断条件，则返回 false：
15）Array.reduce()：此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：
与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作
30、请说一下你常用的字符串方法（至少七个）
trim(): 去首尾空格
split(sep，limit)：将字符串分割为字符数组，limit 为从头开始执行分割的最大数量
indexOf(str):返回 str 在父串中第一次出现的位置，若没有则返回-1
lastIndexOf(str):返回 str 在父串中最后一次出现的位置，若没有则返回-1
substr(start，length)：从字符索引 start 的位置开始，返回长度为 length 的子串
substring(from,to)：返回字符索引在 from 和 to（不含）之间的子串
slice(start,end)：返回字符索引在 start 和 end（不含）之间的子串
toLowerCase()：将字符串转换为小写
toUpperCase()：将字符串转换为大写
replace(str1,str2):str1 也可以为正则表达式，用 str2 替换 str1
concat(str1,str2,...):连接多个字符串，返回连接后的字符串的副本
match(regex):搜索字符串，并返回正则表达式的所有匹配
charAt(index):返回指定索引处的字符串
charCodeAt(index):返回指定索引处的字符的 Unicode 的值
fromCharCode():将 Unicode 值转换成实际的字符串
search(regex):基于正则表达式搜索字符串，并返回第一个匹配的位置
valueOf()：返回原始字符串值
31、原型和原型链
原型：portoType这个属性就是函数的原型
原型链：1.所有对象都有原型，而原型本身就是对象，所以原型也有自己的原型对象，就形成原型链
如果对象本身没有属性，则就会去原型链上去找
Object原型对象的原型值为null
32、new操作符具体做了什么？
在内存创建一个新对象
把构造函数中this指向新建的对象
会在新对象上添加一个__proto__属性,指向函数的原型对象prototype
判断函数返回值,如果值是引用类型就直接返回值；否则返回this(创建的新对象)
33、说下什么是IIFE函数
IIFE(立即调用函数表达式)是一个在定义时就会立即执行的函数。
34、浅拷贝与深拷贝有何区别？如何实现？
浅拷贝：拷贝的是原对象的内存地址
深拷贝：在内存中把原对象复制一份
浅拷贝的实现方式有：
（1）直接变量赋值
（2）Object.assign()；但目标对象只有一层的时候，是深拷贝；
（3）扩展运算符(...)；目标对象只有一层的时候，是深拷贝；
深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。
深拷贝的实现方式有：
（1）结合使用JSON.parse()和JSON.stringify()方法。
（2）手写遍历递归赋值；
35、字符串截取方法substr、 substring、 slice三者的区别
substr(n,m)：截取的是字符串中索引为n开始的，并且截取m位
substring(n,m)：从索引为n的位置开始截取，截取到索引为m的位置但是不包含索引为m这一项
slice(n,m)：和substring一样，但是他可以支持负数索引
36、函数柯里化
概念：把一个接收多个参数的函数变成接收单一参数 并且返回能够接收新参数的函数；比如：
add(1)(2)(3)(4) = 10;
function add(num){
var sum=num;
var fn=function(v){
sum+=v;
return fn
};
fn.toString=function(){
return sum
};
return fn
}
console.log(add(1)(2)(3)(4)) // 10
37、判断Array类型的几种方式0
1、[ ] instanceof Array
2、[ ].constructor === Array
3、Object.prototype.toString.call([]) === '[object Array]'
4、Array.isArray([])
38.this指向的各种情况都有什么？
全局作用域中的函数：非严格模式下其内部this指向window
对象内部的函数：其内部this指向对象本身：
构造函数：其内部this指向生成的实例：
由apply、call、bind改造的函数：其this指向第一个参数：
箭头函数：箭头函数没有自己的this，看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。(函数定义时的this，而不是调用时this)
39.什么是AJAX？如何实现？
ajax是一种能够实现网页局部刷新的技术，可以使网页异步刷新。
ajax的实现主要包括四个步骤：
（1）创建核心对象XMLhttpRequest；
（2）利用open方法打开与服务器的连接；
（3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）
（4）监听服务器响应，接收返回值。
40.什么是高阶函数？
高阶函数是对其他函数进行操作的函数;
高阶函数就是一个接收函数作为参数或将函数作为输出返回的函数。
例如，Array.prototype.map，Array.prototype.filter 和Array.prototype.reduce 是语言中内置的一些高阶函数。
41、描述浏览器的渲染过程？，DOM树和渲染树的区别？
浏览器的渲染过程：
解析 HTML 构建 DOM(DOM树)，并行请求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS树)
CSSOM 构建结束后 和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
DOM 树 和 渲染树 的区别：
DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性
42、Javascript 如何实现继承？
实例继承：将子构造函数的 prototype 指向父构造函数的一个实例
原型继承：将子构造函数的 prototype 指向父构造函数的 prototype
构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上
拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象
ES6 语法 extends：class ColorPoint extends Point {}
43、Javascript 作用域链?
如果当前作用域没有找到属性或方法，会向上层作用域查找，
直至全局函数，这种形式就是作用域链
44、eval是做什么的？
eval 的功能是把对应的字符串解析成 JS 代码并运行
应该避免使用 eval，不安全，非常耗性能（先解析成 js 语句，再执行）
由 JSON 字符串转换为 JSON 对象的时候可以用 eval('('+ str +')');
45、js延迟加载的方式有哪些？
动态创建 DOM 方式（用得最多）、defer 和 async标签属性
46、defer 和 async区别
defer 并行加载 js 文件，会按照页面上 script 标签的顺序执行
async 并行加载 js 文件，下载完成立即执行，不会按照页面上 script 标签的顺序执行
47、同步和异步的区别?
同步: 下面代码会等待上面 同步代码执行完毕
异步: 下面代码不会等待上面异步代码执行完毕
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，
新内容出现，用户看到新内容,进行下一步操作
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。
等请求完，页面不刷新，新内容也会出现，用户看到新内容
48、documen.write 和 innerHTML 的区别
document.write 只能重绘整个页面
innerHTML 可以重绘页面的某一部分
49、说说你对闭包的理解
闭包有三个特性：
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收,会永远留驻在内存中
使用闭包主要是为了设计私有的方法和变量。
优点：是可以避免全局变量的污染，
缺点：是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
50、 把
通过var(let、const)定义声明变量，如果var则就仅仅只给变量赋值
71、form中的input可以设置为readonly和disabled，请问2者有什么区别？
readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台
72、怎么降维数组 [[1,2],[3,4]] --> [1, 2, 3, 4]
使用递归循环，把所有元素放到一个新数组
Array.prototype.concat.apply([],[[1,2],[3,4]]);
73、请说出三种减低页面加载时间的方法
压缩css、js文件
合并js、css文件，减少http请求(精灵图)
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作
74、基本数据类型和引用数据类型有什么区别？
（1）变量直接赋值时：
基本数据类型赋值的是数据的副本，原数据的更改不会影响传入后的数据。
引用数据类型赋值的是数据的引用地址，原数据的更改会影响传入后的数据。
（2）两者在内存中的存储位置：
基本数据类型存储在栈中。
引用数据类型在栈中存储了指针，该指针指向的数据实体存储在堆中。
75、如何改变this指针的指向？
可以使用apply、call、bind方法改变this指向(并不会改变函数的作用域)。比较如下：
（1）三者第一个参数都是this要指向的对象，也就是想指定的上下文，上下文就是指调用函数的那个对象(没有就指向全局window)；
（2）apply第二个参数都是数组，call和bind接收多个参数并用逗号隔开；
（3）apply和call只对原函数做改动，bind会返回新的函数(要生效还得再调用一次)。
76、document load事件 和 document ready事件 的区别
页面加载完成有两种事件
1）load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2）$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
77、JS中有哪些不同类型的弹出框可用
在JS中有三种类型的弹出框可用，分别是：
Alert
Confirm
Prompt
78、线程与进程的区别
一个程序至少有一个进程, 一个进程至少有一个线程。
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，
由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
79、什么是回调
回调函数是作为参数或选项传递给某个方法的普通JS函数。
它是一个函数，在另一个函数完成调用后执行，因此称为回调。
80、如何使用 JS 删除 cookie
如果要删除cookie以便后续尝试读取cookie，则只需将过期日期设置为过去的时间。
咱们应该定义cookie路径以确保删除正确的cookie。
如果未指定路径，某些浏览器将不允许咱们删除cookie
81、2+5+'3'的结果是什么
答案：'73'
由于2和5是整数，它们将以数字形式相加。因为3是一个字符串，它将与 7 拼接，结果是73。
82、如何在JS中清空数组
1、arrayList = []
2、arrayList.length = 0;
3、arrayList.splice(0, arrayList.length);
4、 while(arrayList.length){
arrayList.pop();
}
83、innerHTML 和 innerText 的共同点与区别
共同点：获取或者设置元素的内容
区别：
innerHTML可以解析内容中html标签
innerText不可以解析内容中html标签
84、请选择结果为真的表达式：（C）
A.null instanceof Object
B.null === undefined
C.null == undefined+
D.NaN == NaN
86、原生JS中如何从一个页面 跳转 到另一个页面
跳转到其它页面（会产生历史记录）
location.href = '路径'
跳转且替换页面（不会产生历史记录）
location.replace('路径')
87、在JS中编码与解码URL
.encodeURI() 可以对字符串编码
.decodeURI() 可以对字符串解码
88、callee 与 call 与 caller的区别:
callee是arguments上面的属性，表示当前正在执行的函数
call改变函数调用时里边this的指向
caller是函数上的一个属性,它指向当前函数外一层函数，没有外一层函数，则为null
89、什么是jsonp
jsonp是一种解决跨域请求问题的技术
不足点：它只能是get请求
90、[1, 2, 3].map(Math.pow)的结果是什么?
请说出代码的运行结果，为什么？
结果时 129
map()会根据提供提供的函数对指定序列(列表)做映射。
pow()方法返回 x的y次方的值。
map(function(当前元素的值value,下标index));
91、toString() 与 valueOf()的区别
toString() 方法返回一个表示该对象的字符串。
valueOf() 方法返回指定对象的原始值, 如果对象没有原始值，则valueOf将返回对象本身
92、怎么自定义一个dom事件，并且编程式触发它？
通过new Event('事件名')创建一个事件对象
给指定元素绑定事件
document.dispatchEvent(事件对象)来触发事件
示例
const ev = new Event('abc');
document.addEventListener('abc', function (e) {
console.log('abc事件触发了。。。。。。')
})
document.dispatchEvent(ev)
93、continue 与 break的区别
continue：跳过本次循环，直接进入下一次循环
break：直接终止循环
94、简述一下你对 HTML 语义化标签的理解？
① 用正确的标签做正确的事情。
② html语义化让页面的 内容结构化，结构更清晰，
便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，
并且是容易阅读的;
③ 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO;
④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
95、图片img标签title与alt属性的区别
title属性：光标移入要显示图片文字
alt属性：当图片加载失败时要显示的文字
96、HTML5 的 form 如何关闭自动完成功能？
答案：将不想要自动完成的form或input设置为autocomplete=off
97、简述一下 src 与 href 的区别。
答案：src 用于引用资源，替换当前元素；
href 用于在当前文档和引用资源之间确立联系。
解析：
● href
href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和页面关联，
是在当前元素和引用资源之间建立联系，在加载它的时候，
不会停止对当前文档的处理，
浏览器会继续往下走
若在文档中添加 href ，浏览器会识别该文档为 CSS 文件，
就会并行下载资源并且不会停止对当前文档的处理。
这也是为什么建议使link方式加载 CSS，而不是使用 @import 方式。
● src
src 表示引用资源，替换当前元素，用在 img，script，iframe 上，
src 是页面内容不可缺少的一部分。
当浏览器解析到 src ，会暂停其他资源的下载和处理
（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，
图片和框架等也如此，类似于将所指向资源应用到当前内容。
这也是为什么建议把 js 脚本放在底部而不是头部的原因。
98、对 WEB 标准以及 W3C 的理解与认识
标签闭合、标签小写、不乱嵌套
使用外链css 和 js脚本、结构行为表现的分离、文件下载与页面速度更快
W3C标准使网站容易维护、有利于搜索引擎查找
99、Label的作用是什么？是怎么用的？
答案：label 标签来定义表单控制间的关系,**当用户选择该标签时，
浏览器会自动将焦点转到和标签相关的表单控件上**。
两种用法：一种是 id 绑定，一种是嵌套;
示例：
100、每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么？
声明位于文档中的最前面的位置，处于 标签之前。
告知浏览器文档使用哪种 HTML 或 XHTML 规范。
告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）
解析：
doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype 来区分这两种模式，doctype 在 html
中的作用就是触发浏览器的标准模式，如果 html 中省略了 doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。
自己总结一下：
doctype是一种标准通用标记语言的文档类型声明;
doctype在 html中的作用就是触发浏览器的标准模式,否则为怪异模式;
不同浏览器在怪异模式下会有一些不同的表现，不建议使用怪异模式;
doctype一定需要写html上面才会生效;
-------------------------------------------------------------------------------------------------------------------------
101、为什么最好把 CSS 的标签放在之间？
为什么最好把 JS 的