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

Posted 2023-03-02 心如天然薄荷清凉

JS

1、说一下innerHTML 与 innerText的作用与区别？

1. 作用：都可以获取或者设置元素的内容
2. 区别：innerhtml可以解析内容中的html标签
3. innerText不能解析内容中的html标签

2、JavaScript 由以下三部分组成：

1. ECMAScript（语法部分）：javascript 语言基础
2. DOM（文档对象模型）：规定了访问 HTML 和 XML 的方法
3. BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法

3、介绍 JS 有哪些内置对象？

1. 数据封装类对象：Object、Array、Boolean、Number、String
2. 其他对象：Function、Arguments、Math、Date、RegExp、Error
3. ES6 新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

4、JS 的基本数据类型和引用数据类型

1. 基本(原始)数据类型: number、string、boolean、undefined, null, symbol
2. 引用数据类型: Object、Function、Array

5、说几条写 JavaScript 书写的基本规范？

1. 代码一定要正确缩进，建议使用"二个或者四个空格"缩进
2. 语句结束使用分号;
3. 规范定义 JSON 对象，补全双引号
4. 用和[]声明对象和数组
5. 变量和函数在使用前进行声明
6. 以大写字母开头命名构造函数，全大写命名常量
7. 代码段使用花括号包裹
8. 还有要书写正确的标识标签

6、什么是标识符？

• 在JS中，可以自定义命名的东西都属性标识符；
• 比如变量名，函数名，参数名都是标识符

7、DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系

1. e.getAttribute：获取的是标签上属性
2. 可以通过e.setAttribute(propName, propValue)设置标签上属性
3. e.propName：获取的是元素对象上属性

8、offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scrollHeight 的区别?

1. offsetWidth/offsetHeight 返回值包含 content + padding + border + 包含滚动条，效果与 e.getBoundingClientRect()相同
2. clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
3. scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

9、检测浏览器版本版本有哪些方式？

1. 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')

10、说一下元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么

1. nodeType(节点类型)  nodeName(节点名称)  nodeValue(节点的值)
2. 元素节点：      1                元素标签名          null(没有值)
3. 属性节点：      2                属性名              属性值
4. 文本节点：      3                text                节点内容

11、==和===的区别

1. 双等号判断时，只需要值相等
2. 三等号判断时，需要值与类型都相等

12、函数声明与函数表达式的区别？

1. 数声明就是直接通过function进行声明函数，例如：function show()可以在声明函数之前调用0函

13、数组方法pop() push() unshift() shift()

1. pop()尾部删除
2. push()尾部添加
3. unshift()头部添加
4. shift()头部删除

14、ajax请求的时候get 和post方式的区别

（1）get请求

参数要跟在url后面
安全性不高
传输数据比较小，但速度快
一般用于获取，删除

（2）post请求

参数会放在请求体中，
安全性相对高些
传输数据大，但相对速度慢些
post一般用于修改或者添加

15、解释什么是Json:

1. json是一种轻量级的数据交换格式，一般用于数据传递
2. 里边只允许出现双引号
3. JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null), 数组，对象

16、dom事件委托什么原理，有什么优缺点
事件委托原理: 事件冒泡机制（把子元素的事件行为 委托给 父级元素执行优点）

优点:
1. 可以大量节省内存占用，减少事件注册
2. 可以实现当新增子对象时，无需再对其进行事件绑定

缺点:
如果把所有事件都用事件代理，可能会出现事件误判

17、Javascript的事件流模型都有什么?

1. “事件冒泡”：事件逐级向上传播
2. “事件捕捉”：事件逐级向下传播，一直到最具体的
3. “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

18、split() join() 的区别

1. split()：以指定的字符分割字符串返回一个数组,字符串方法
2. join(): 以指定的字符连接数组中元素返回一个字符串,数组方法

19、如何阻止事件冒泡

1. ev.stopPropagation();

20、如何阻止默认事件

• 答案：return false 或者 ev.prevent Default();

21、JavaScript中如何检测一个变量是一个 String 类型?

1. typeof 变量
2. 变量.constructor === String
3. Object.prototype.toString.call(变量)    // 推荐使用

22、javascript 的 typeof 返回哪些数据类型（至少六个）检测类型如下：

1. 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操作符具体做了什么？

1. 在内存创建一个新对象
2. 把构造函数中this指向新建的对象
3. 会在新对象上添加一个__proto__属性,指向函数的原型对象prototype
4. 判断函数返回值,如果值是引用类型就直接返回值；否则返回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指向的各种情况都有什么？

1. 全局作用域中的函数：非严格模式下其内部this指向window
2. 对象内部的函数：其内部this指向对象本身：
3. 构造函数：其内部this指向生成的实例：
4. 由apply、call、bind改造的函数：其this指向第一个参数：
5. 箭头函数：箭头函数没有自己的this，看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。(函数定义时的this，而不是调用时this)

39.什么是AJAX？如何实现？

• ajax是一种能够实现网页局部刷新的技术，可以使网页异步刷新。
• ajax的实现主要包括四个步骤：

        （1）创建核心对象XMLhttpRequest；

        （2）利用open方法打开与服务器的连接；

        （3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）

        （4）监听服务器响应，接收返回值。

40.什么是高阶函数？

• 高阶函数是对其他函数进行操作的函数;
• 高阶函数就是一个接收函数作为参数或将函数作为输出返回的函数。

1. 例如，Array.prototype.map，Array.prototype.filter 和Array.prototype.reduce 是语言中内置的一些高阶函数。

41、描述浏览器的渲染过程？，DOM树和渲染树的区别？

• 浏览器的渲染过程：

1. 解析 HTML 构建 DOM(DOM树)，并行请求 css/image/js
2. CSS 文件下载完成，开始构建 CSSOM(CSS树)
3. CSSOM 构建结束后 和 DOM 一起生成 Render Tree(渲染树)
4. 布局(Layout)：计算出每个节点在屏幕中的位置
5. 显示(Painting)：通过显卡把页面画到屏幕上

• DOM 树 和 渲染树 的区别：

1. DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
2. 渲染树不包括 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、 把 <script> 放在 </body> 之前和之后有什么区别？

• 浏览器会如何解析它们？
• 按照HTML标准，在结束后出现<script>或任何元素的开始标签都是解析错
• 虽然不符合 HTML 标准，但浏览器会自动容错，使实际效果与写在</body>之前没有区别
• 浏览器的容错机制会忽略<script>之前的，视作<script>仍在 body 体内。

51、 为什么 JS 是单线程,  而不是多线程 [常考]

• 单线程是指 JavaScript 在执行的时候，有且只有一个主线程来处理所有的任务。
• 目的是为了实现与浏览器交互。
• 我们设想一下，如果 JavaScript 是多线程的，现在我们在浏览器中同时操作一个
  DOM，一个线程要求浏览器在这个 DOM 中添加节点，
  而另一个线程却要求浏览器删掉这个 DOM 节点，
  那这个时候浏览器就会很郁闷，他不知道应该以哪个线程为准。
  所以为了避免此类现象的发生，降低复杂度，JavaScript
  选择只用一个主线程来执行代码，以此来保证程序执行的一致性。

52、请说出以下结果输出什么？为什么？
 

for(var i = 0; i < 5; i++) 
    setTimeout(function()
        console.log(i)
    , 0)

答案：5个5
解释：异步代码需要等同步代码先执行，所以当异步定时器执行时，
同步的for循环已经循环完毕

53、请说出以下flag的结果？为什么？

function show()

function getName()  return '牛夫人' 

var flag = show() || getName()

答案：flag值为'牛夫人'
解释：1.函数都会有一个默认的返回值undefined
2.逻辑或如果第一个值成立就直接返回第一个值，否则直接返回第二个值

54、请解释一下什么是重排与重绘？

• 重排：当改变dom结构的时候，就会从dom树开始从新渲染页面，这过程叫重排比如添加或者删除可见的DOM元素、元素尺寸改变、元素内容改变、浏览器窗口尺寸改变等等
• 重绘：当改变样式（不改变几何结构）的时候，它会从render树开始重新开始渲染页面，这过程叫重绘，比如改变颜色，透明等

55、怎么减少重排与重绘？

• 尽量避免操作DOM元素
• 避免多次修改dom结构或者css,集中处理，只引发一次重绘或者重排

56、请解释一下什么是防抖与节流

• 防抖（debounce）

1. 总结：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

• 节流（throttle）

1. 总结：就是每次触发事件的隔间至少要大于等于n秒，不会重置计时

57、说一下call、apply、bind三者的作用 与 区别

• 作用：三者的作用都是可以改变函数的this指向(function对象自带的方法)
• 区别：1.call、apply会直接调用原函数，bind不会直接调用函数，而会拷贝一份返回一个新函数
• call、bind传参时一个个传入，而apply是把所有参数放到一个数组中传入

58、JS严格模式的使用与作用
答案：在代码前面使用"use strict"就可以开启严格模式;

作用：

• 消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为;
• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的 Javascript 做好铺垫。

59、举例JS严格模式的特点

• 变量必须要通过修饰符进行声明
• 函数的参数不能有同名属性，否则报错
• 禁止 this 指向全局对象
• 增加了保留字（比如 protected 、 static 和 interface ）
• 不能删除变量 delete prop

60、执行下面代码打印什么？为什么？
 

var a = ;
var b = key: 'b';
var c = key: 'c';
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);  
console.log(a[c]);  
console.log(a[d]);  

console.log(a[b]);  // 打印：345
console.log(a[c]);  // 打印：345
console.log(a[d]);  // 打印：333
为什么：对象转化字符串会变成一个'[object Object]'

61、JS中的Array.prototype.splice()和Array.prototype.slice()方法作用与区别

• 两都的作用都是截取数组中元素，返回一个新数组

1. splice(): 第一个参数为下标，第二个参数为截取个数，并且会影响原数组
2. slice()：第一个参数为起始下标，第二个参数为结束下标，不会影响原数组

63、下方js执行后的打印值为？

function demo() 
    this.length = 10;
    var fn = function() 
        console.log(this.length);     // 输出多少？
    
    arr = [fn, 'hello layui'];
    fn.length = 100;
    arr0;


window.demo()

 console.log(this.length)------打印结果为2

64、事件绑定的三种方式

1. 在标签上直接设置事件  onclik="a()"
2. dom.onclick = function()
3. addEventListener('click',function(),true)

65、事件绑定和普通事件有什么区别？

• 普通事件会覆盖掉，只执行后者方法

1. dom.onclick = function()

• 事件绑定不会覆盖掉，会依次执行

1. addEventListener('click',function(),true)

66、渐进增强与优雅降级

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

67、浏览器对象有哪些

• navigator：含有正在使用的Navigator的名称、版本属性，
• window：最高等级的对象，拥有整个窗口的属性;
• document：包含基于文档内容的属性
• location：含有基于当前的URL的属性。
• history：包含客户机先前已经请求过的URL。

68、列举3种强制类型转换(显示类型转换)   和   2种隐式类型转换

• 强制类型转换

1. Number('1235')
2. parseInt('1235')
3. parseFloat('1235')

• 隐式类型转换

1. '10' - 0
2. '10' * 0

69、for in 和 for of
答案：
 (1)、for in

• 1.一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性
• 2.不建议使用 for in 遍历数组，因为输出的顺序是不固定的。
• 3.如果迭代的对象的变量值是 null 或者 undefined,
  for in 不执行循环体，建议在使用 for in 循环之前，
  先检查该对象的值是不是 null 或者 undefined

(2)、for of

• for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）
  上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

70、回答以下代码，alert的值分别是多少？

<script>
    var a = 100;

    function test()
      alert(a); //输出为100
      a = 10;   
      alert(a); //输出为10 
    
    test();

    alert(a);   //输出为10
</script>

通过var(let、const)定义声明变量，如果var则就仅仅只给变量赋值

71、form中的input可以设置为readonly和disabled，请问2者有什么区别？

• readonly不可编辑，但可以选择和复制；值可以传递到后台
• disabled不能编辑，不能复制，不能选择；值不可以传递到后台

72、怎么降维数组 [[1,2],[3,4]] --> [1, 2, 3, 4]

1. 使用递归循环，把所有元素放到一个新数组
2. 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中有三种类型的弹出框可用，分别是：

1. Alert
2. Confirm
3. 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 的共同点与区别

• 共同点：获取或者设置元素的内容
• 区别：

1. innerHTML可以解析内容中html标签
2. 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()的区别

1. toString() 方法返回一个表示该对象的字符串。
2. 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 的理解与认识

1. 标签闭合、标签小写、不乱嵌套
2. 使用外链css 和 js脚本、结构行为表现的分离、文件下载与页面速度更快
3. W3C标准使网站容易维护、有利于搜索引擎查找

99、Label的作用是什么？是怎么用的？

答案：label 标签来定义表单控制间的关系,**当用户选择该标签时，
浏览器会自动将焦点转到和标签相关的表单控件上**。

两种用法：一种是 id 绑定，一种是嵌套;

示例：  
<label for="pwd">用户名：</label>

<input id="pwd" type="checkbox">

100、每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

• 告知浏览器文档使用哪种 HTML 或 XHTML 规范。
• 告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）

解析：
doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype 来区分这两种模式，doctype 在 html
中的作用就是触发浏览器的标准模式，如果 html 中省略了 doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。

• 自己总结一下：

1. doctype是一种标准通用标记语言的文档类型声明;
2. doctype在 html中的作用就是触发浏览器的标准模式,否则为怪异模式;
3. 不同浏览器在怪异模式下会有一些不同的表现，不建议使用怪异模式;
4. doctype一定需要写html上面才会生效;

-----------------------------------------------------------6月27--------------------------------------------------------------

101、为什么最好把 CSS 的<link>标签放在<head></head>之间？
为什么最好把 JS 的<script>标签恰好放在</body>之前，有例外情况吗？

• CSS 的<link>标签放在<head></head>:

1. 内容规范
2. 让页面逐步呈现,提高用户体验感
3. 防止呈现给用户空白的页面或没有样式的内容

• JS 的<script>标签恰好放在</body>之前 :

1. 规范;
2. 把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户;

解析：
1).把<link>放在<head>中:
把<link>标签放在<head></head>之间是规范要求的内容。
此外，这种做法可以让页面逐步呈现，提高了用户体验。
将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）
不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，
重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

2).把<script>标签恰好放在</body>之前:
脚本在下载和执行期间会阻止 HTML 解析。
把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。
例外情况是当你的脚本里包含document.write()时。但是现在，
document.write()不推荐使用。同时，将<script>标签放在底部，
意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。
也许，对此比较好的做法是，<script>使用defer属性，放在<head>中。

102、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

• title：表示文档窗口标题
• h1：内容标题
• b：粗体
• strong：粗体（strong会表示强调）(语义化)
• i：斜体
• em：斜体（em会表示强调，强调比strong弱）(语义化)

103、CSS 隐藏元素的几种方法（至少说出三种）

• Opacity: 0 ----设置透明度来隐藏元素
• visibility:hidden; --- 隐藏对应的元素并且挤占该元素原来的空间。
• display:none; ----隐藏对应的元素但不挤占该元素原来的空间。
• position:absolute; top:-9999px; ---让该元素脱离文档流移出视觉区域.

104、页面导入样式时，使用 link 和 @import 有什么区别？
答案：

相同点 : link 和 @import 都是用于引入外部css样式文件

区别:

• link:

1. html标签
2. 与页面一起加载
3. 权重比@import大
4. 由于是html标签,不存在浏览器兼容性问题

• @import:

1. css语法
2. 需要等页面加载完成后才会加载引用的 CSS
3. @import 只有在 ie5 以上才可以被识别
4. 权重比link小

105、rgba()和 opacity 的透明效果有什么不同？
答案：

• 相同点 : rgba()和 opacity 都能实现透明效果，
• 不同点 : 但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

106、display:none 与 visibility:hidden 的区别是什么？

答案：
display :  隐藏对应的元素但不挤占该元素原来的空间。
visibility:  隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;
而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），
而它所占据的空间位置仍然存在。

107、哪些 css 属性可以继承？
答案：

• 可继承：text-align、font、color、line-height、letter-spacing、word-spacing、text-indent
• 不可继承 ：border padding margin width height ;

108、精灵图和 base64 如何选择？

精灵图:

• 优点:

1. 将多个图像加载请求合并为一个请求;

• 弊端:

1. 难以维护和更新;
2. 增加内存消耗;

base64:

• 优点:

1. 将多个图像加载请求合并为一个CSS文件请求;
2. 轻松更新生成文件;

• 弊端:

1. base64编码比原始二进制表示大约大25%;
2. IE6或IE7不支持;

109、请说一下你用过的浏览器存储，并说出它们的区别?

• sessionStorage
• localStorage
• cookie

相同点 : 三者都是在浏览器本地存放数据;

• 区别 :

1. sessionStorage：数据只存在于会话期间
2. localStorage：数据永久存储
3. cookie：数据默认会话结束时过期，但可以设置过期时间，在请求服务端，浏览器会默认把cookie数据发送给服务器，cookie能存放的数据相对较小

110、请说一个pushState与replaceState两个方法的作用与区别

作用 : 都是改变路由(路径)的，路径改变时不会请求服务器（除非你f5刷新）

• 区别：

1. pushState：不会替换掉之前的历史路径
2. replaceState：会替换掉之前的历史路径

------------------------------------------------------------6.28---------------------------------------------------------------

111、请解析一下数组map、filter, reduce三个方法的作用

• map()方法：把回调函数中返回的值，作为一个新数组返回
• filter()方法：返回符合回调函数中条件的元素，形成一个新数组
• reduce()方法：对数组中元素进行从左到右的累计，并返回最终结果

112、怎么样删除一个对象的属性

• delete 对象.属性名

113、请说一下深拷贝与浅拷贝的区别

• 浅拷贝：只把对象的内存地址，赋值给新变量
• 深拷贝：而是整个对象在堆空间中，复制一份，返回一个新地址给变量

114、如何对一个数组进行去重？

方式一：
var arr01 = [2,3,4,2,2,2,3];
var arr02 = [];
for(var i = 0; i < arr01.length; i++)
  if( arr02.indexOf(arr01[i]) === -1 )
    arr02.push(  arr01[i]  )
  



方式二(set去重)：
var arr01 = [2,5,2,2,5,7];
var set = new Set(arr01)

115、如果对一个数组进行排序，不能少于2种?

方法一：
var arr = [4,7,2,10,5,9]
for(var i = 0; i < arr.length - 1; i++)
  for(var j = 0; j < arr.length - 1 - i; j++)
    if(arr[j] > arr[j+1])
      var tem = arr[j]
      arr[j] = arr[j+1]
      arr[j+1] = tem
    
  



方式二：
arr.sort(function(n1, n2)
  return n1 - n2
)

116、在JS中如何把一个伪数组 转换成一个 真正的数组？

方式一:
Array.from(伪数组)

方式二:
var arr = [];
for(var i = 0; i < 伪数组.length; i++)
  arr.push(伪数组元素)

117、请说一下CSS样式的优先级问题

1. ID选择器 id> 类选择器 class> 标签选择器
2. 行类样式 > 内部样式 与 外部样式； 后声明的样式 > 先声明的样式

118、如果实现一个超链接下载功能

• 添加download属性

119、一次完整的HTTP事务是怎样的一个过程？

1. 域名解析
2. 发起TCP的3次握手
3. 建立TCP链接后发起http请求
4. 服务器端响应http请求，浏览器得到html代码
5. 浏览器解析html代码，并请求html代码中的资源
6. 浏览器对页面进行渲染呈现给用户

120、怎么把一个对象存储到浏览器本地中

答案 : 利用sessionStorage或者localStorage把对象存到浏览器中;

( 但是在存储之前需要把对象变成JSON格式的字符串，获取数据时再解析

利用JSON.stringify()与JSON.parse()两个方法)

121、json和jsonp的区别?

• json是一种数据格式，一般用于数据交互;
• jsonp是一种解决跨域请求技术，只能是get请求;

122、jsonp的实现原理

• 利用script请求并且执行服务端响应的代码；
• 执行代码调用页面中的函数，且把代码中数据传入

123、jsonp是否为ajax请求，为什么？

• 不是正真ajax请求
• jsonp是通过script标签发的请求，并没有XMLHttpRequest对象

124、字符串翻转

'abcde' -> 'edcba'
console.log(str1.split('').reverse().join('')) 

//切割数组  reverse()(反转数组中元素的位置)  切位字符串  

125、for循环 与 forEach循环的区别?

1. for循环中可以使用break、continue不用使用return 因为它有循环体，且不是函数;
2. forEach循环不能使用break、continue，可以return，因为它执行的是函数;

126、通过 new 的方式创建对象和通过字面量创建有什么区别？

1. 字面量创建对象，不会调用 Object 构造函数, 简洁且性能更好;
2. new Object(

   以上是关于2022最全最新前端面试题（附加解答）的主要内容，如果未能解决你的问题，请参考以下文章

   前端工程师 - 面试题 (最新,最全)

   JavaScript 2022 最新面试题 前端面试题

   史上最全前端vue面试题！推荐收藏

   2022年最新前端面试题

   2022最新前端vue面试题

   2022最新前端vue面试题