2022年，前端web最新面试题，持续更新中.....

唯唯诺诺码农

已于 2022-04-12 21:51:23 修改

阅读量614

点赞数 1

分类专栏：面试宝典文章标签： javascript 开发语言 ecmascript

于 2022-03-17 21:08:31 首次发布

本文链接：https://blog.csdn.net/Y974066017/article/details/123560298

版权

面试宝典专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一.JS类型

1.js中数据有哪些类型？

js中有5种基础类型:Undefined、Null、Boolean、Number和String。还有bigint 和symbol

还有一种复杂的引用类型Object,Object本质是一组无序的名值对组成的。还包括function array

2.怎么判断是基础类型还是引用类型

typeof 来判断

        console.log(typeof 1)
        console.log(typeof [1])
        console.log(typeof null)
        console.log(typeof 'a')
        console.log( typeof undefined)
        console.log(typeof true)

          number
    1.html:14 object
    1.html:15 object
    1.html:16 string
    1.html:17 undefined
    1.html:18 boolean

还有instanceof , ObjjectprotptypetoStringcall。

浅拷贝和深拷贝的区别及实现方法

浅拷贝：如给数据是基础类型拷贝是值，引用类型拷贝的是地址

 var a=[1,2,3,4]
      b=a
      console.log(a===b)
      a[0]=2
      console.log(a,b)
true
1.html:17 (4) [2, 2, 3, 4] (4) [2, 2, 3, 4]

深拷贝：会拷贝一个一模一样的对象，新的对象是在新的内存中，两个的值不会影响。

 var origin_data = {
            a: '小明',
            b: '小王',
            book: { a1: 'aaa', b1: 'ccc' }
        }
        var copy_data = JSON.parse(JSON.stringify(origin_data))
        origin_data.a = 3;
        origin_data.b = 4;
        origin_data.book.a1 = '呵呵哒';
        origin_data.book.b1 = '我你爸爸'
        console.log(origin_data)
        console.log(copy_data)

第二种方法：

 let obj1 = {
            name: 'xxx',
            sex: '男',
            like: ['红色', '蓝色'],
            book: {
                title: 'js程序',
                price: '88'
            }
        }
         function deepClone(obj) {
        //查看要拷贝的对象是数组还是对象，如果数组创建空数组，是对象创建空对象 
        let newObj = obj instanceof Array ? [] : {}
        for (let k in obj) {//K属性名  obj[k]值
            //判断当前每个元素是否是对象或者数组 //如果还是对象，继续递归拷贝//是值，直接添加到新创建的对象或者数组里
            if (typeof obj[k] === 'object') {
                //递归拷贝完 放入到新对象的属性
                newObj[k] = deepClone(obj[k])
            } else { //否则是值， 直接添加到新建的 newObj中
                newObj[k] = obj[k]
            }
        }
        //返回新对象
        return newObj
 }

        var obj2 = deepClone(obj1)
        obj2.like.push('紫色')
        obj2.book.price = 999
        console.log(obj1);
        console.log(obj2);

3.get/post 的区别

get在浏览器回退时时无害的，而post回再次请求

get产生url地址可以Bookmark（单词书签，应该是添加书签），而post不可以

get比post更不安全，因为参数直接暴露在URL上，

get在请求url传输参数是有长度限制的，而post没有

4. 闭包，什么是闭包，闭包的优点和缺点

简单说：闭包就是能读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会释法。

优点：函数的变量长期保存，

避免了全局变量污染

变量成为私有属性的存在

缺点：常驻内存，会增大内存使用，使用不当回造成内存泄漏。

5.如何解决异步回调地狱

ES6的promise ES7的 async/await

6.前端的事件流

什么是事件流：页面中接收事件的顺应包括几个阶段：事件捕获阶段处于目标阶段，事件冒泡阶段

7.说一下图片的懒加载和预加载

预加载：提前加载图片，当用户需要查看时直接从本地缓存中渲染

懒加载：懒加载的主要目的时作为服务器前端的优化，减少请求数或延迟请求数

两种技术的本质：两者的行为时相反的，一个时提前的加载，一个迟缓甚至不加载，懒加载对服务端前端有一定的环节压力，预加载则增加服务器前端压力

8.防抖和节流

防抖：当持续触发事件时，一i的那个时间段没有在触发事件，事件处理函数才会执行一次，如果设定事件到来之前，有触发事件，就会重新延时，

function d1(fn,wait){
 var timeout=null     // 定义一个定时器
 return function(){
    it(timeout!==null) clearTimeout(timeout)   //清楚这定时器
       timeout=setTimeout(fn,wait)
  }
}
//处理函数
function handle(){
console.log(Math.rndom())
}
//滚动事件
window.addEventLister('scroll',debounce(handle,1000))
效果：页面滚动停止一秒 后打印随机数字

节流：当持续触发事件时，保证一定时间调用一次事件处理函数，假设一个用户一直触发这个函数，且触发小于定值，函数节流回每个这个时间调用一次

实现函数节流的有两种方式一种时间戳一种定时器

var t=function(func,delay){
  var prev=Date.now()
   return function(){
    var context=this
     var agrs=arguments
     var now=Date.now()
     if(now-prve>=delay){
      func.apply(context,args)
      pre=Date.now()
    }
  }
}
function  handle(){
console.log(Math.random())
}
window.addEventListener('scroll',t(handle,1000))

9.apply ,call,bind的区别

通过aplly和call改变函数的this指向，二者的第一个参数都是一样表示改变指向的那个对象，

apply：函数的this替换成参数1，其余参数放在数组中，直接触发函数，

call：函数的this替换成参数1，其余参数依次摆放，直接触发，

bind：替换函数的中this指向并传入其他参数，返回新的函数，不会直接触发函数

10. Vue双向绑定原理

采用数据劫持，结合发布者和订阅者的方式，通过Object.defineProperty（）来劫持个属性的setter ，getter 在数据变动时发布消息给订阅者，触发相应的监听回调，

JS面试题

一，一个完整的URL 解析过程
1 用户输入 URL 地址。
2 对 URL 地址进行 DNS 域名解获得IP地址。
3 建立 TCP 连接（三次握手）。
4 浏览器向 web 服务器发送一个 HTTP 请求报文。
5 服务器返回 HTTP 响应报文给客户端。
6 关闭 TCP 连接（四次挥手）。
7 浏览器解析文档资源并渲染页面。
解析过程：浏览器解析的资源（html，svg,Xhtml等），解析完成后都会生成一个完整的DOM Tree ，css资源则会解析成CSS Rule Tree，生成之后进行浏览器渲染，保证脚本执行前已完成DOM渲染会放在body标签结束之后。
————————————————
二，重绘与回流
重绘，只是渲染树进行重新渲染
回流，html树，css树，渲染树，都重新进行渲染
有回流必有重绘
————————————————
三，Event Loop即事件循环
是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，比如异步任务不进入主线程，而是进入任务队列，当主线程中的任务执行完毕，就从任务队列中取出任务放进主线程中来进行执行。由于主线程不断重复的获得任务、执行任务、再获取再执行，所以这种机制被叫做事件循环（Event Loop）
Event Loop执行顺序为：
先执行宏任务script，并执行里面的同步任务；执行栈为空后查询是否存在微任务，存在就立即执行，然后开始下一轮的事件循环。
————————————————
四，HTTP和HTTPS
HTTP ：超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议
HTTPS ：是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信
————————————————
五，解释一下什么是闭包
什么是闭包：函数使用了不属于自己的局部变量(函数套函数，里面函数使用了外面函数定义的变量)
闭包的作用：避免全局污染
可以读取函数内部的变量
将变量始终保持在内存中
可以封装对象的私有属性和私有方法
闭包的缺点：使用过多会造成内存泄漏（占用的内存释放不掉）
————————————————
六，js中的本地存储有哪些，区别是什么
(1).sessionStorage
仅在当前会话下生效，当你关闭页面或浏览器后你存储的sessionStorage数据会被清除。
可存储的数据大小一般在5mb。
不参与和服务器的通信

(2).localStorage
永久有效，关闭浏览器也不会消失的，除非自己主动清除localStorage信息。
可存储的数据大小一般在5mb。
不参与和服务器的通信

(3).cookie
cookie是在设置的过期时间之前一直有效，哪怕关闭浏览器。
有个数限制（各浏览器不同），一般不能超过20个。
与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
————————————————
七，原型与继承、原型链
只有函数才有原型，原型是用来存放共有属性的，原型是一个属性，它的值是个对象，每一个对象都有一个__proto__（隐式原型）的属性，这个属性指向创建该对象的构造函数的prototype（如果不能确定他是谁的实例，都是Object的实例）
原型链：对象实例的隐式原型指向创建改对象的构造函数的原型对象，这样一层一层的指向关系形成的链叫原型链
————————————————
八，js中的this指向
es5this指向函数运行时所在的对象（谁调用我我指谁，会随着调用者不同而变）
es6箭头函数中this指向函数定义时所在的对象(我在哪出生我指谁，永远不会改变)
————————————————
九，promise是什么
Promise 是异步编程的一种解决方案，简单说就是一个容器，从语法上说，Promise 是一个对象，它可以获取异步操作的消息
特点：将多个异步任务同步执行，避免了层层嵌套的回调函数。流程更加清晰，代码更加优雅。Promise对象提供统一的接口，使得控制异步操作更加容易。
缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。
————————————————
十，宏任务与微任务
异步任务的事件并不是按照顺序来执行的，任务队列中的任务是有优先级的
常见的微任务有Promise、process.nextTick、MutationObserver
常见的宏任务：script、setTimeout、setInterval、setImmediate
————————————————
十一，js数据类型
基本数据类型
Number、String、Boolean、Null、Undefined、Symbol、bigInt
引用数据类型
object、Array、Date、Function

十二，js变量和函数声明的提升
在js中变量和函数的声明会提升到最顶部执行
函数的提升高于变量的提升
函数内部如果
————————————————
十三，== 和 ===的区别
==是非严格意义上的相等值相等就相等
===是严格意义上的相等，会比较两边的数据类型和值大小值和引用地址都相等才相等
————————————————
十四，ES6新特性
新增模板字符串
箭头函数
for-of（用来遍历数据—例如数组中的值。）
ES6 将 Promise 对象纳入规范，提供了原生的 Promise 对象。
增加了 let 和 const 命令，用来声明变量。
还有就是引入 module 模块的概念
严格模式
————————————————
十五，var const let有什么区别
var es5提出 const let es6提出
const 常量声名后必须赋值 let var变量声名后可不赋值
var存在变量提升，const和let在同一作用域下不可提升
var可以声名后重复赋值，const let不可以，负责会报错
var不存在块级作用域，let const存在块级作用域
————————————————
十六，深拷贝浅拷贝
主要区别就是其在内存中的存储类型不同。
浅拷贝：
拷贝就是复制，就相当于把一个对象中的所有的内容，复制一份给另一个对象，直接复制，或者说，就是把一个对象的地址给了另一个对象，他们指向相同，两个对象之间有共同的属性或者方法，都可以使用
深拷贝：
把一个对象中所有的属性或者方法，一个一个的找到，并且在另一个对象中开辟相应的空间，一个一个的存储到另一个对象中
————————————————
十七，js变量和函数声明的提升
在js中变量和函数的声明会提升到最顶部执行
函数的提升高于变量的提升
函数内部如果用 var 声明了相同名称的外部变量，函数将不再向上寻找。
匿名函数不会提升。
————————————————
十八，箭头函数与普通函数的区别
函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象
不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误
不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替
不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数
————————————————
十九，严格模式的限制
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用 with 语句
禁止 this 指向全局对象
————————————————
二十，数组(array)方法 API
map : 遍历数组，返回回调返回值组成的新数组
forEach : 无法 break ，可以用 try/catch 中 throw new Error 来停止
filter : 过滤
some : 有一项返回 true ，则整体为 true
every : 有一项返回 false ，则整体为 false
join : 通过指定连接符生成字符串
push / pop : 末尾推入和弹出，改变原数组，返回推入/弹出项
unshift / shift : 头部推入和弹出，改变原数组，返回操作项
sort(fn) / reverse : 排序与反转，改变原数组
concat : 连接数组，不影响原数组，浅拷贝
slice(start, end) : 返回截断后的新数组，不改变原数组
splice(start,number,value…): 返回删除元素组成的数组，value 为插入项，改变原数组
indexOf / lastIndexOf(value, fromIndex) : 查找数组项，返回对应的下标
reduce / reduceRight(fn(prev, cur) ，defaultPrev) : 两两执行，prev 为上次化简函数的return 值，cur 为当前值(从第二项开始)
————————————————
二一，说说面向对象编程思想?
基本思想是使用对象，类，继承，封装等基本概念来进行程序设计
优点易维护易扩展开发工作的重用性、继承性高，降低重复工作量。
缩短了开发周期
————————————————
二十二，项目性能优化
减少 HTTP 请求数
减少 DNS 查询
使用 CDN
避免重定向
图片懒加载
减少 DOM 元素数量
减少 DOM 操作

HTML和CSS部分题

1.怎么让一个不定宽高的div，垂直水平居中？，有几种方法？

①父盒子设置：display：table-cell； text-align：center；vertical-align：middle；

Div设置： display：inline-block；vertical-align：middle；

②父盒子设置：display：relative

Div设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；

2.postion几个属性的作用？

position的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。

1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。

2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了relative值，那么，它偏移的top，right，bottom，left的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意relative移动后的元素在原来的位置仍占据空间。

3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position属性，并且position的属性值为absolute 或者relative，那么就会依据父容器进行偏移。如果其父容器没有设置position属性，那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占位置。

4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以body为依据的。注意设置fixed属性的元素在标准流中不占位置。

3.说下em 和rem

①em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。）

②rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

4.什么时BFC？

BFC(Block formatting context)直译为"块级格式化上下文"。

会触发BFC机制：

A. 根元素

B. float属性不为none

C. position为absolute或fixed

D. display为inline-block， table-cell， table-caption， flex， inline-flex

F. overflow不为visible