前端面试题

前端黑猫

已于 2022-12-29 10:27:59 修改

阅读量294

点赞数 1

文章标签： javascript vue.js es6 前端 html5

于 2020-12-25 19:42:49 首次发布

本文链接：https://blog.csdn.net/qq_41441547/article/details/111699152

版权

前端必考面试题

深浅拷贝
闭包
内存泄漏
Cookie和Session的区别
localStorage
cookie，localStorage， sessionStorage三者区别
Virtual Dom 的优势在哪里？
common.js 和 es6 中模块引入的区别？
AMD规范与CommonJS规范的兼容性
call和apply 区别

本章节会持续不断的完善前端经常面试的内容，也是前端工程师必须理解的内容，有那里说的不对或者不清晰的私信我一起完善共同学习！

深浅拷贝

简单点说，复制一个变量进行修改原来的值改变了就是浅拷贝，反之就是深拷贝。

首先要清楚什么是 基本类型值、引用类型值 。
	基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。
	基本类型上不存在深浅拷贝的问题，复制后值都是相互不影响的。所以只有引用类型的值存在深浅拷贝。
	例如一个数组（数组是一种对象）下面复制为浅拷贝：

<script>
	//一、浅拷贝 示例 
	var a=[1,2,3,4];
	var b=a;
	b[0]=5; 
	console.log(a);// 输出  5 2 3 4 
	//二、浅拷贝 
	Object.assign();
	//三、浅拷贝 
	Array.prototype.slice()
	//四、浅拷贝 
	Array.prototype.concat()
	//五、浅拷贝
	扩展运算符（...）
</script>

<script>
	//深拷贝 示例
	//一、JSON.parse和JSON.stringify()
	var a=[1,2,3,4];
	var b=JSON.parse(JSON.stringify(a));
	b[0]=5; 
	console.log(a);// 输出  1 2 3 4 
	console.log(a);// 输出  5 2 3 4 
	//二、递归赋值
</script>

深浅拷贝原理：

保存引用类型（对象）变量会放到内存当中，内存分为栈内存、堆内存
栈内存保存名字和引用地址指向堆内存里的值
堆内存保存值（也就是上方的数组 [1，2，3，4]）

总结：浅拷贝只是复制变量栈内存的引用地址，深拷贝复制变量堆内存的值。

闭包

1. 什么是闭包

父函数里面声明变量和子函数，子函数改变父函数中的变量。最后return 子函数。代码如下：

<script type="text/javascript">
 	var add=(function bBag(){
		var a=0;
		return function (){
			return a += 1;
		}
 	})();
	console.log(add());// 1
	console.log(add());// 2
	console.log(add());// 3
	console.log(add());// 4
	console.log(a);    //  a is not defined
<script>

2. 闭包的作用
- 减少全局环境的污染生成独立的运行环境
  模块化就是利用这个特点针对不同的模块有自己独立的运行环境，不会和全局冲突，模块和模块之间通过抛出的接口依赖使用。
- 可以通过返回其他函数的方式突破作用域链
  可以利用这个功能做一些值的缓存工作，例如常见的设计模式（单例模式），以及现在比较火的vue中的计算属性。
3. 闭包使用场景
1. 维护函数内的变量安全，避免全局变量的污染
2. 维持一个变量不回收
3. 封装模块
4. 闭包弊端
- 每次调用闭包的时候，父函数中变量a 对于子函数是全局变量，函数调用完成如果有全局变量，函数不进入垃圾回收机制保存在内存中，父函数变量a每次调用也会保存在内存中，所以闭包使用次数多就会导致内存泄漏。（闭包不用之后将不使用的局部变量删除，使其被回收）

内存泄漏

内存泄漏指一块被分配的内存既不能使用，又不能回收。直到浏览器进程结束。
出现原因：

循环引用：含有DOM对象的循环引用导致大部分当前主流浏览器内存泄漏。循环引用简单来说，假如函数a引用了函数b，函数b又引用了a，a又引用了b就构成循环引用。
js闭包：闭包，函数返回内部函数还可以继续访问外部的方法中定义私有变量。
DOM泄漏：当DOM被移除的时候子节点引用没有被移除则无法回收。

Cookie和Session的区别

1、存放位置不同：
Cookie保存在客户端，Session保存在服务端。

2 、存取方式的不同：
Cookie中保存的是字符串，Session保存的是对象

3、安全性（隐私策略）的不同：
Cookie存储在浏览器中，对客户端是可见的，客户端的一些程序可能会窥探、复制以至修正Cookie中的内容。而Session存储在服务器上，对客户端是透明的，不存在敏感信息泄露的风险。假如选用Cookie，比较好的方法是，敏感的信息如账号密码等尽量不要写到Cookie中。最好是像Google、Baidu那样将Cookie信息加密，提交到服务器后再进行解密，保证Cookie中的信息只要本人能读得懂。而假如选择Session就省事多了，反正是放在服务器上，Session里任何隐私都能够有效的保护。

4、有效期上的不同：
只需要设置Cookie的过期时间属性为一个很大很大的数字，Cookie就可以在浏览器保存很长时间。
由于Session依赖于名为JSESSIONID的Cookie，而Cookie JSESSIONID的过期时间默许为–1，只需关闭了浏览器（一次会话结束），该Session就会失效。

5、对服务器造成的压力不同：
Cookie保管在客户端，不占用服务器资源。假如并发阅读的用户十分多，Cookie是很好的选择。
Session是保管在服务器端的，每个用户都会产生一个Session。假如并发访问的用户十分多，会产生十分多的Session，耗费大量的内存。

6、跨域支持上的不同：
Cookie支持跨域名访问，例如将domain属性设置为“.baidu.com”，则以“.baidu.com”为后缀的一切域名均能够访问该Cookie。跨域名Cookie如今被普遍用在网络中。而Session则不会支持跨域名访问。Session仅在他所在的域名内有效。

以上整理于：https://blog.csdn.net/guoweimelon/article/details/50886092

localStorage

webstorage是HTML5新出的标签，是本地存储的解决方案之一，有sessionStorage与localStorage两种。

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

webstorage拥有封装好的方法，如setItem， getItem， removeItem，clear等。不像cookie那样需要程序猿手动封装。cookie的作用是与服务器进行交互，作为http规范的一部分存在为webstorage。而webstorage仅仅是为了在本地存储数据而生，它们都保存在客户端浏览器。

cookie，localStorage， sessionStorage三者区别

cookie始终在同源的http请求中携带，即使不需要，cookie在浏览器和服务器中来回传递。而localStorage和sessionStora仅仅在本地存储，不会好服务器通信，也不会自动把数据发送给服务器。
存储大小不同，cookie为4kb左右；localStorage， sessionStorage可以达到5M
数据有效期不同，sessionStorage仅在同源窗口中有效，关闭窗口就消失了，cookie可以设置过期时间，localStorage长期有效
localStorage， sessionStorage有现成的API， cookie需要程序员手动封装

以上整理于：https://blog.csdn.net/lizhengxv/article/details/81541977

Virtual Dom 的优势在哪里？

「Virtual Dom 的优势」其实这道题目面试官更想听到的答案不是上来就说「直接操作/频繁操作 DOM 的性能差」，如果 DOM 操作的性能如此不堪，那么 jQuery 也不至于活到今天。所以面试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。

首先我们需要知道：

DOM 引擎、JS 引擎相互独立，但又工作在同一线程（主线程）
JS 代码调用 DOM API 必须挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最后激活 JS 引擎并继续执行若有频繁的 DOM API 调用，且浏览器厂商不做“批量处理”优化，
引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调用，重新计算布局、重新绘制图像会引起更大的性能消耗。

其次是 VDOM 和真实 DOM 的区别和优化：

虚拟 DOM 不会立马进行排版与重绘操作
虚拟 DOM 进行频繁修改，然后一次性比较并修改真实 DOM 中需要改的部分，最后在真实 DOM 中进行排版与重绘，减少过多DOM节点排版与重绘损耗
虚拟 DOM 有效降低大面积真实 DOM 的重绘与排版，因为最终与真实 DOM 比较差异，可以只渲染局部

common.js 和 es6 中模块引入的区别？

CommonJS 是一种模块规范，最初被应用于 Nodejs，成为 Nodejs 的模块规范。运行在浏览器端的 JavaScript 由于也缺少类似的规范，在 ES6 出来之前，前端也实现了一套相同的模块规范 (例如: AMD)，用来对前端模块进行管理。自 ES6 起，引入了一套新的 ES6 Module 规范，在语言标准的层面上实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对 ES6 Module 兼容还不太好，我们平时在 Webpack 中使用的 export 和 import，会经过 Babel 转换为 CommonJS 规范。在使用上的差别主要有：

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6模块是编译时输出接口。
CommonJs 是单个值导出，ES6 Module可以导出多个
CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层
CommonJs 的 this 是当前模块， ES6 Module的 this 是 undefined

参考： https://github.com/mqyqingfeng/frontend-interview-question-and-answer/issues/30

AMD规范与CommonJS规范的兼容性

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范

call和apply 区别

相同点
1、call 和 apply 都是function 原型上的方法可以直接调用
不同点
1、 fn.call(obj,1,2,3); fn.apply(obj,[1,2,3]); 在使用上有区别 call 是一个个传参 apply 是数组整体传参

前端黑猫

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

前端必考面试题深浅拷贝本章节会持续不断的完善前端经常面试的内容，也是前端工程师必须理解的内容，有那里说的不对或者不清晰的私信我一起完善共同学习！深浅拷贝简单点说，复制一个变量进行修改原来的值改变了就是浅拷贝，反之就是深拷贝。首先要清楚什么是基本类型值、引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。基本类型上不存在深浅拷贝的问题，复制后值都是相互不影响的。所以只有引用类型的值存在深浅拷贝。例如一个数组（数组是一种对象）下面复制为浅拷贝：
复制链接

扫一扫