js前端面试适合一年经验

最新推荐文章于 2022-09-21 21:08:32 发布

小莉爱编程

最新推荐文章于 2022-09-21 21:08:32 发布

阅读量341

点赞数 5

分类专栏：面试文章标签： javascript 面试

本文链接：https://blog.csdn.net/qq_45018844/article/details/118359867

版权

面试专栏收录该内容

7 篇文章 1 订阅

订阅专栏

提示：如果你面试一年经验的话，就可以看看下面的面试题

文章目录

一、深拷贝与浅拷贝的理解？
二、 ES6的新特性以及箭头函数的理解
三、原型与原型链
四、 == 与=== 的区别
五、 this指向
六、闭包
七、let、const、var区别
八、cookie、sessionStorage、localStorage
九、js的设计模式
十、js跨域方法
十一、前端有哪些页面优化方法
十二、map和forEach区别
十三、数组的方法的使用
总结

提示：以下是本篇文章正文内容，下面案例可供参考

一、深拷贝与浅拷贝的理解？

浅拷贝:只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“(浅复制）浅拷贝"，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。
深拷贝:创建一个新对象，属性中引用的其他对象也会被拷贝，不再指向原有对象地址。

JSON.parse、JSON.stringify（）

二、 ES6的新特性以及箭头函数的理解

数组的解构赋值、对象的解构赋值
let定义块级作用域变量，必须先声明后使用let声明的变量，而且不能与之前let、var、const声明的变量重名
es6可以给形参函数设置默认值
在数组之前加上三个点（…）展开运算符

箭头函数相当于匿名函数，不能作为构造函数的，不能被new箭头函数没有arguments实参集合,取而代之用…剩余运算符解决箭头函数没有自己的this。他的this是继承当前上下文中的this箭头函数没有函数原型箭头函数不能当做Generator函数，不能使用yield关键字不能使用call、apply、bind改变箭头函数中this指向Set数据结构，数组去重

三、原型与原型链

总结
把所有的对象共用的属性全部放在堆内存的一个对象.(共用属性组成的对象)，然后让每一个对象的proto存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。而原型链就是对象通过proto向当前实例所属类的原型上查找属性或方法的机制，如果找到object的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//这是构造函数
			function Person(){}
			//这是new这个函数
			var person = new Person()
			//这个属性指向对象的原型，所以返回true
			console.log(person.__proto__)
			//Person.prototype是实例的原型
			console.log(person.__proto__ === Person.prototype)
			//true
			console.log(Person.prototype)
			//每个原型都有一个constructor属性，这个属性指向关联的构造函数
			console.log(Person)
			console.log(Person.prototype.constructor)
		</script>
	</body>
</html>

四、 == 与=== 的区别

= 赋值
== 返回一个布尔值;相等返回true，不相等返回false;允许不同数据类型之间的比较;如果是不同类型的数据进行，会默认进行数据类型之间的转换;如果是对象数据类型的比较，比较的是空间地址
===只要数据类型不—样,就返回false;（全等）

五、 this指向

全局作用域下的this指向window
如果给元素的事件行为绑定函数，那么函数中的this指向当前被绑定的那个元素
函数中的this要看函数执行前有没有.,有.的话，点前面是谁，this就指向谁，如果没有点，指向window
自执行函数中的this永远指向window
定时器中函数的this指向window
构造函数中的this指向当前的实例
call、apply、bind可以改变函数的this指向（箭头函数不行哦）
箭头函数中没有this，如果输出this，就会输出箭头函数定义时所在的作用域中的this

六、闭包

闭包就是在函数里面声明函数

优点:在函数内部访问函数外部的变量，函数外部不可以访问函数内部的变量，保护变量不受外界污染
缺点:消耗内存、不正当使用会造成内存溢出的问题使用闭包的注意:
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
解决方法是，在退出函数之前，将不使用的局部变量全部删除

七、let、const、var区别

var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
const声明的变量不允许修改

八、cookie、sessionStorage、localStorage

cookie用来保存登录信息，大小限制为4KB左右
localStorage是Html5新增的，用于本地数据存储，保存的数据没有过期时间，一般浏览器大小限制在5MB
sessionStorage接口方法和localStorage类似，但保存的数据的只会在当前会话中保存下来，页面关闭后会被清空。

九、js的设计模式

1、js工厂模式
2、js构造函数模式
3、js原型模式
4、构造函数+原型的js混合模式
5、构造函数+原型的动态原型模式
6、观察者模式
7、发布订阅模式

十、js跨域方法

jsonp跨域（只能解决get）；原理：动态创建一个script标签，利用script标签的src属性不受同源策略限制，因为所有的src属性和href属性都不受同源策略的限制，可以请求第三方服务器的资源内容

十一、前端有哪些页面优化方法

减少HTTP请求数
从设计实现层面简化页面合理设置HTTP缓存资源合并与压缩
合并css图片，减少请求数的又一个好办法。
将外部脚本置底〔将脚本内容在*页面信息内容加载后再加载)多图片网页使用图片懒加载。
在js中尽量减少闭包的使用尽量合并css和js文件
尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片减少对DOM的操作
在 js中避免"嵌套循环"和“死循环""
尽可能使用事件委托(事件代理)来处理事件绑定的操作

十二、map和forEach区别

相同点
都是循环遍历数组中的每一项forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item (当前每一项) 、index(索引值)、arr(原数组)，需要用哪个的时候就写哪个匿名函数中的this都是指向window只能遍历数组
不同点
map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。(原数组进行处理之后对应的一个新的数组。) map()方法不会改变原始数组 map()方法不会对空数组进行检测。forEach()方法用于调用数组的每个元素，将元素传给回调函数.(没有return，返回值是undefined)
注意: forEach对于空数组是不会调用回调函数的。