Web前端最新2022前端面试笔试题及答案(1)，今日头条三面后多久hr会联系

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

通常需要拷贝的对象内部只有一层的这种对象。

常用的方法

Object.assign方法来实现

扩展运算符 …obj

深拷贝

通常是嵌套二层或以上的复杂对象

常用方法

JSON.parse(JSON.stringfy(object)); 该方法忽略掉undefined、忽略Symbol、忽略function。只适合简单深拷贝

手写递归方法去实现。

通过第三方库提供的深拷贝实现。

函数的节流和防抖

---

防抖函数：将多次触发变成最后一次触发；

function debounce(fn,wait){

let timer = null;

return function (){

let arg = arguments;

if(timer){

clearTimeout(timer);

timer = null;

}

timer = setTimeout(()=>{

fn.apply(this,arg)

},wait)

}

}

function clg(){

console.log(‘clg’)

}

window.addEventListener(‘resize’,debounce(clg,1000))

节流函数：将多次执行变成每隔一个时间节点去执行的函数

---

function throttle(fn,time){

let lastTime = null;

return function(){

let nowTime = Date.now();

if(nowTime - lastTime > time || !lastTime){

fn();

last = nowTime

}

}

}

function sayHi(){

console.log(‘hi’)

}

setInterval(throttle(sayHi,1000),500)

call、apply区别

---

相同点：都是重定向this指针的方法。

不同点：call和apply的第二个参数不相同，call是若干个参数的列表。apply是一个数组

手写一个call方法

// 在这之前需要重新认识一下call方法的执行操作

let mock = { value : 1 };

function mockNum(){

console.log(‘value’,this.value)

}

mockNum.call(mock) // 改变了函数中this的指向，当前this指向了mock对象

转换一下实现方法就是

let mock = {

value:1;

mockNum:function(){

console.log(‘value’,this.value)

}

}

mock.mockNum();

所以经过上面这个操作的演化而来的结果就是如下步骤：

1. 将函数设为一个对象的属性

2. 并将这个函数的属性调用

3. 删除该函数

Function.prototype.Mycall = function(context){

let obj = context || window;

obj.fn = this; // 这一步可以看做是this其实就指的当前函数。

let args = […arguments].slice(1); // 返回删除第一个元素的数组；

let result = obj.fn(…args); // 调用函数

delete obj.fn;

return result;

}

// 操作一下

let mock = { value : 1 };

function mockNum(){

console.log(‘value’,this.value);

}

mockNum.Mycall(mock) // value 1

然后根据上面的方法再手写一个apply方法

---

Function.prototype.Myapply = function (context){

let obj = context || window;

obj.fn = this;

let result = arguments[1] ? obj.fn(arguments[1]) : obj.fn([]);

delete obj.fn;

return result;

}

let mock3 = {

arr: [1, 2, 3, 4, 5],

};

function arrx2(arr) {

return this.arr.concat(arr).map((x) => x * 2);

}

console.log(“arrx2”, arrx2.myApply(mock3));

bind

---

bind方法是直接返回一个新的函数，需要手动去调用才能执行。

创建一个新函数，当这个新函数被调用时，bind()方法的第一个参数将作为运行他的this，之后的一系列参数将会在传递的实参传入作为他的参数；

特点：1. 返回一个函数。 2. 可以传入参数；

手写一个bind方法

例如：

let foo = { value : 1 };

function bar() {

console.log(‘bindFoo’,this.value);

// return this.value // 考虑到函数可能有返回值

}

let bindFoo = bar.bind(foo);

bindFoo() // 1 // 如果有返回值的情况下 bindFoo() === 1;

Function.prototype.Mybind = function(obj){

if(typeof this !== ‘function’) throw new Error(‘not a function’);

let self = this;

let args = […arguments].clice(1);

return function F(){

if(this instanceof F){

return new self(…args,…arguments);

}

return self.apply(obj,args.concat([…arguments]));

}

}

关于函数的调用

---

作为一个正常的函数调用

函数作为方法调用

使用构造函数调用函数

作为函数方法调用函数

捕获和冒泡

---

捕获：就是从根元素开始向目标元素递进的一个关系；从上而下

冒泡：是从目标元素开始向根元素冒泡的过程；想象一下水里的泡泡从下而上。

⚠️stopPropagation 通常理解它是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。

instanceof原理

---

instanceOf用来判断右边的prototype是否在左边的原型链上，告诉我们左边是否是右边的实例。

function instanceof(left, right) {

// 获得类型的原型

let prototype = right.prototype

// 获得对象的原型

left = left.proto

// 判断对象的类型是否等于类型的原型

while (true) {

if (left === null){

return false

}

if (prototype === left){

return true

}

left = left.proto

}

}

typeof

---

typeof 检测对象，除开函数是function类型之外。像常见的数组，对象或者是正则,日期等等都是object；

需要注意一下：

typeof Symbol() // ‘symbol’

typeof null // object

typeof undefined // undefined

typeof null检测输出object因为js最初版本，使用的是32位系统，类型的标签存储在每个单元的低位中000是object类型。null全是0，所以当我们使用typeof进行检测的时候js错误的判断位object

简述cookie、localstorage、seesionstorage

---

cookie 4kb左右 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 默认是关闭浏览器后失效, 但是也可以设置过期时间

localstorage 5M 仅在浏览器中保存，不参与和服务器的通信 除非手动被清除，否则永久保存

SessionStorage 5M 仅在浏览器中保存，不参与和服务器的通信 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间

js跨域如何解决

---

目前暂时已知的跨域方法是：

jsonp跨域，原理：script标签没有跨域限制的漏洞实现的一种跨域方法，只支持get请求。安全问题会受到威胁。

cors跨域，通过后端服务器实现，Access-Control-Allow-Origin。

postMessage window的一个属性方法。

websocket

nginx反向代理

iframe跨域

webpack proxy跨域

---

首先需要明白webpack proxy跨域只能用作与开发阶段，临时解决本地请求服务器产生的跨域问题。

并不适合线上环境。配置在webpack的devServer属性中。

webpack中的devsever配置后，打包阶段在本地临时生成了一个node服务器，浏览器请求服务器相当于请求本地服务。

深度优先和广度优先

---

广度优先：尝试访问尽可能靠近它的目标节点，然后逐层向下遍历，直至最远的节点层级。

深度优先：从起始节点开始，一直向下找到最后一个节点，然后返回，又继续下一条路径。知道找遍所有的节点。

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】