前端最新面试题

最新推荐文章于 2024-05-14 17:33:16 发布

霖霏晗

最新推荐文章于 2024-05-14 17:33:16 发布

阅读量219

点赞数

分类专栏： javascript HTML VUE 文章标签： js javascript

本文链接：https://blog.csdn.net/xxz_best/article/details/108358616

版权

javascript 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

VUE

8 篇文章 1 订阅

订阅专栏

let,const var 的区别

var：具备变量提升，即变量在声明之前可以使用，返回undefined ，如果用let声明会返回报错ReferenceError
let ,const 块级作用域不具备变量提升，只能在块作用域里访问，不能跨块访问，也不能跨函数访问
const 一旦声明常量不能改变，创建常量的时候必须赋值，否者会报错，常量创建后(地址)不可更改，就是说普通的数据类型不可以修改，复杂型数据再不修改其地址的情况下是可以被更改的
同一作用域下let和const不能声明同名变量，而var可以

普通函数和回调函数的区别

普通函数 “调用–>等待被调用函数执行完毕–>继续执行”。
回调函数：调用程序发出对回调函数的调用以后，不等函数执行完毕，立即返回并继续执行，这样调用程序和被调用函数同时执行，当被调用函数执行完毕后会反过来调用某个事先指定的函数，以通知调用程序，这个过程称为回调（Callback）函数调用结束

js数据基本类型

String，Number，Boolean，Null，undefined ,object ,symbol（es6中的特点是唯一性）
基本数据类型：string，undefined，null,boolean，number
引用数据类型：object
基本数据类型就是简单的操作值，引用数据类型，把引用地址赋值给变量，基本类型的比较是值的比较

如何判断数据类型

Object.prototype.toString.call(obj)精确判断对象的类型
Typeof: 根据数据类型
Intanceof 根据构造类型判断
在jquery中可以用jquery.is Function() 或者jquery.is Array()等判断

cookies，sessionStorage和localStorage的区别

共同点：都是保存在浏览器端
不同点

sessionStorage和localStorage本地保存，Cookie数据不能超过4k,只能保存很小的数据
localStorage PC浏览器（永久保存）
sessionStorage PC浏览器（关闭窗口就删除数据）
Cookies:服务器和客户端都可以访问有时间限制
用法：
1、localStorage.setItem(key,value) 保存数据
·2、localStorage.getItem(key) 获取数据
·3、localStorage.removeItem(key) 删除数据
·4、localStorage.clear();删除全部数据
同理 sessionStorage

continue和 break在for循环中的作用

Break：终止循环，跳出循环体，直接执行循环外的第一次语句，用于switch和循环结构
Continue：直接省略continue后的语句，执行下一次循环，只用于循环结构

es6新特性

1.let 和 const 都是局部变量，块级作用域，不具备变量提升。
2.模版字符串
在ES6中，可以将反引号（``）将内容括起来，在反引号中，可以使用${}来写入需要引用到的变量
var person = {name: “Peter”, age: 22, career: “student”};
$(".introduction").html(Hello, my name is ${person.name}, and my career is ${person.career}.);
3.箭头函数
不需要关键字function来定义函数
隐式返回值，省略return
箭头函数没有自己的this、arguments、super、new.target，它们分别指向外层函数的相应变量。
4、Symbol数据类型，定义一个独一无二的值。
5、for…of遍历，可遍历具有iterator 接口的数据结构。
6.Promise对象，更合理、规范地处理异步操作。

settimeout和setinterval区别

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
语法：setTimeout(code,millisec)
参数：
code：必需。要调用的函数后要执行的 JavaScript代码串。
millisec：必需。在执行代码前需等待的毫秒数。
提示setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
业务场景
setTimeout用于延迟执行某方法或功能
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

如何解决跨域问题和为什么会有跨域

为什么出现跨域
“跨域问题来源于JavaScript的同源策略,即只有协议+主机名+端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。
解决跨域的方式
1.vue-cli项目中通过node.js代理服务器来实现跨域请求,服务端到服务端不存在跨域
2.在服务器响应客户端的时候，带上 Access-Control-Allow-Origin:* 头信息 [推荐使用]
服务端设置 reponse header corss-origin= 当前站点域名
3.通过 jquery 的 jsonp 形式解决跨域问题
Vue中解决跨域：
Webpack-dev-server是个node.js Express服务器，启动 proxy代理设置反向代理
4.带cookie跨域请求：前后端都需要进行设置
【前端设置】根据xhr.withCredentials字段判断是否带有cookie

闭包的原理

在 JS 中，闭包存在的意义就是让我们可以间接访问函数内部的变量。
优点：可以让函数不被回收
缺点：不及时释放的变量，会造成内存泄漏

JS防抖和节流（动作绑定事件）

防抖：（表单提交，多次点击请求一次）

动作发生一定时间后触发事件，在这段时间内如果动作又发生，则重新等待一段时间再触发该事件。
节流：（用户滚动页面）
动作发生一定时间后触发事件，在这段时间内，如果动作又发生，则无视该操作，直到事件执行完毕后，才能重新触发

js事件委托

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
js事件委托利用了事件冒泡.只指定一个事件处理程序，就可以管理某一类型的所有事件
事件捕获-目标-事件冒泡
作用:节约内存，提高整体性能
在vue用修饰符@click.stop=”函数名” 阻止冒泡

js数组有哪些方法（es5 和es6）

1. Array.isArray(value) 判断一个值是否为数组
2. concat 合并数组
3. push() 从后面添加元素，返回值为添加完后的数组的长度
4. pop() 从后面删除元素，只能是一个
5. shift() 从前面删除元素，只能删除一个
6. unshift() 从前面添加元素
7. splice(i,n) 删除从i(索引值)开始之后的n元素 
8. split() 将字符串转化为数组
9. reverse() 将数组反转
10. sort() 将数组进行排序,
11.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，
12.includes() 判断数中是否包含给定的值
13.some()  依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
14.join() 拼接数组

JS内存泄漏与垃圾回收机制

内存泄漏：用到的内存，一些不需要的变量引用没有及时释放，就叫做内存泄漏。
垃圾回收机制：解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。
通常采用的垃圾回收机制有两种方法：标记清除，引用计数。
引用计数：语言引擎有一张"引用表"，保存了内存里面所有资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了

深拷贝和浅拷贝

深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用
例如如果b复制了a,a改变的时候b也跟着改变了,说明就是浅拷贝，引用地址没变（原地址改变，浅复制的也会相应改变）
深拷贝：引用地址变了
下面简单的例子看出深拷贝和浅拷贝的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<script>
			let a = [{
					age: '11',
					name: 'xiaohong'
				},
				{
					age: '14',
					name: 'xiaoming'
				}
			]
			// 浅拷贝
			console.log(a,'第一次赋值a');
			let b = a;
			console.log(b,'第一赋值b')
			b[1].age = '10';
			console.log(a,b,'ab的值变化了吗？'); //浅拷贝：引用地址没变 */
			// 深拷贝：引用地址变了
			// 深拷贝原理:用JSON.stringify()将对象转换成json字符串,在用JSON.parse()把字符串解析成对象
			let c= JSON.stringify(a)
			console.log(c,'把a的值给c')
			console.log(JSON.parse(c),'把字符串c转换为对象了吗？')
			c = JSON.parse(c);
			c[0].age = '109',
			console.log(a,c,'ac变化了吗')

			var obj = {
				age: '190',
				name: '鞠婧祎',
				msg: {
					name: '小孔'
				}
			}
			var newobj = Object.assign({}, obj);
			console.log(newobj, 'newobj拷贝obj的值')
			newobj.msg.name = '林思意'
			console.log(obj, 'obj的值', newobj, 'newobj的值') //{age: "190", name: "林思意"} "obj的值" {age: "190", name: "林思意"} "newobj的值"
			// // obj有多层时时浅拷贝  
			var sobj = {
				name: '赵广东'
			}
			var newsobj = Object.assign({},sobj);//当对象只有一层的时候 如果Object.assign(sobj)只有一个参数就是浅拷贝,反之两个参数就是深拷贝Object.assign({},sobj)
			console.log(newsobj, 'newspobj拷贝sobj的值');
			newsobj.name = '陆婷';
			console.log(sobj, 'sobj的值', newsobj, 'newsobj的值');			
		</script>
	</body>
</html>

霖霏晗

关注

0
点赞
踩
0

收藏

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

JSlet,const var 的区别var：具备变量提升，即变量在声明之前可以使用，返回undefined ，如果用let声明会返回报错ReferenceErrorlet ,const 块级作用域不具备变量提升，只能在块作用域里访问，不能跨块访问，也不能跨函数访问const 一旦声明常量不能改变，创建常量的时候必须赋值，否者会报错，常量创建后(地址)不可更改，就是说普通的数据类型不可以修改，复杂型数据再不修改其地址的情况下是可以被更改的同一作用域下let和const不能声明同名变量，而var
复制链接

扫一扫