2021前端高频面试题

JavaScript
1.讲讲js数据类型？基本和引用的区别？symbol和bigint讲一讲应用场景？
基本数据类型：number string boolean undefined null
引用数据类型： function Array Date
区别：
（1）基本数据类型存的是值，引用存的内存地址
（2）基本数据拷贝值，引用数据拷贝地址，不拷贝值
symbol唯一标识符 每个Symbol实例都是唯一的，应用场景：
（1）使用Symbol来作为对象属性名(key)
（2）使用Symbol来替代常量
（3）使用Symbol定义类的私有属性/方法
BigInt数据类型提供了一种方法来表示大于2^53-1的整数。BigInt可以表示任意大的整数。
当数值超过Number数据类型支持的安全范围值时，将会被四舍五入，从而导致精度缺失的问题
在整数的末尾追加n

console.log(9007199254740999n)//9007199254740999

调用BigInt()构造函数

var bigInt = BigInt("9007199254740999");      //传递给BigInt()的参数将自动转换为BigInt:
console.log(bigInt) //9007199254740999n  

2.判断数组的方法？instanceof原理?判断空对象？ typof null？typeof NaN？
let arr = [1]
方法一 arr instanceof Array

console.log(arr instanceof Array) //true

方法二 proto

console.log(arr.__proto__ === Array.prototype) //true

方法三 constructor

console.log(arr.constructor === Array)	//true

方法四 Array.isArray

console.log(Array.isArray(arr))	  //true

原理：

Array.myIsArray = function(obj){
	return Object.prototype.toString.call(obj) === ' [object Array]'
}
console.log(Array.myIsArray([])) //true

instanceof原理：A instanceof B
判断B的prototype属性指向的原型对象（B.prototype）是否在对象A的原型链上

console.log(typeof undefined) //undefined
console.log(typeof null)  //object
console.log(typeof NaN) //number

3.var/let/const 区别？const a = {}; a.x = 1 能不能修改？

var 其作用域为该语句所在的函数内，且存在变量提升现象；
let 其作用域为该语句所在的代码块内，不能重复定义 不存在变量提升；
const 一旦声明变量，就必须立即初始化 ；声明常量时，是只读且不可修改的
定义的引用数据类型可以修改

4.防抖、节流的含义，使用场景？手写一下？

1. 防抖：防止抖动，重在清零。触发高频事件后n秒后只执行一次，如果重复触发，则重新计算。场景：input输入框 ，window触发resize的时候

 function debounce(fn,delay){
	 let timer = null;
	 var delay = delay || 2000;
 	return function(e){
 		let that = this;
		clearTimeout(timer);
		timer = setTimeout(function(){
			fn.apply(that,arguments)
		},delay)
	}
}

2.节流：n秒内只执行一次，稀释函数的执行频率

function throttle(fn,delay){
	let flag= true;		//开关标记
	var delay = delay || 2000;
	return function(){
		if(!flag) return
		flag = false;
		let that = this;
		setTimeout(()=>{
			fn.apply(that,arguments);
			flag = true;
		},delay)
	}
}

5.call、apply、bind区别？bind实现？

作用：改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向

(1)call、applay改变了函数的this上下文后便执行该函数，bind 不会调用;bind返回的是一个函数（修改过this指向的函数）
(2)call 第二个参数开始传参数列表，apply第二个参数传数组

Function.prototype._bind = function(){
	var that = this;
	var context = [].shift.call(arguments);	//上下文
	var args = [].slice.call(arguments);	//参数
	return function(){
		that.apply(context,args.concat([].slice.call(arguments)))
	}
}

6.闭包概念，最主要的还是问闭包的场景？

闭包：能够读取另一个函数变量的函数
场景：(1)setTimeout传参 (2)回调 (3)封装变量
优点：
（1）避免全局变量的污染
（2）能够读取函数内部的变量
缺点：
闭包会常驻内存，会增大内存的使用量，使用不当会造成内存泄漏；解决办法，在退出函数之前，将不使用的的局部变量全部删除。