最全最新前端面试题附加解答

发布时间：2023-03-24 09:44:40 所属栏目：教程来源：

导读：JS
1、说一下innerHTML 与 innerText的作用与区别？

作用：都可以获取或者设置元素的内容
区别：innerHTML可以解析内容中的html标签
innerText不能解析内容中的html标签
2、JavaScript 由以下三部分组成：

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一样，但是他可以支持负数索引

（编辑：驾考网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!