前端知识点
1、JS基本数据类型有哪些？引用数据类型有哪些？
在 JS 中，存在着 8 种原始值，分别是： boolean null undefined number string symbol 、Bigint(ES2020新增)
引用数据类型:
对象Object（包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function）
null和undefined 有什么区别？
（1）null是一个表示”无”的对象，转我数值是为0，undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，能量的默认值为undefined
（2）Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
（3）Undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。
典型用法是：
a、变量被声明了，但没有赋值时，就等于undefined
b、调用函数时，应该提供的参数没有提供，该参数等于undefined
c、对象没有赋值属性，该属性的值为undefined
d、函数没有返回值时，默认返回undefined
（4）null表示”没有对象”，即该处不应该有值。典型用法是： a、作为函数的参数，表示该函数的参数不是对象 b、作为对象原型链的终点
2、CSS中 link 和@import 的区别是？
link属于HTML标签，而@import是CSS提供的;页面被加载的时link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;link方式的样式的权重 高于@import的权重.
3、position的absolute与fixed共同点与不同点
相同：改变行内元素的呈现方式，display被置为block；让元素脱离普通流，不占据空间；默认会覆盖到非定位元素上
不同点：absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，元素与浏览器窗口之间的距离是不变的。
4、什么是闭包？
我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
5、谈谈你对原型链的理解
在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象。
当函数经过new调用时，这个函数就成为了构造函数，返回一个全新的实例对象，这个实例对象有一个__proto__属性，指向构造函数的原型对象。
JavaScript对象通过__proto__ 指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条, 即原型链。
实现一个instanceof
function myInstanceof(left,right) {
if(typeof left !== 'object' || left === null) return false
//获取原型
let proto = Object.getPrototypeOf(left)
while(true){
//如果原型为null，则已经到了原型链顶端，判断结束
if(proto === null) return false
//左边的原型等于右边的原型，则返回结果
if(proto === right.prototype) return true
//否则就继续向上获取原型
proto = Object.getPrototypeOf(proto)
}
}
6、关于setTimeout的一些冷知识
-
由于消息队列的机制，不一定能按照自己设置的时间执行
-
settimeout嵌套settimeout时，系统会设置最短时间间隔为4ms
-
未激活的页面，settimeout最小时间间隔为1000ms
-
延时执行时间最大值为2147483647(32bit)，溢出这个值会导致定时器立即执行
7、常见兼容性问题
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.
IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
上下margin重合问题 ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。 解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
8、节流
比如说事件触发可以让它在每一秒内只触发一次，可以提高性能。
function throttle(fn, wait) {
let prev = +new Date()
return function() {
let now = +new Date()
/*当下一次事件触发的时间和初始事件触发的时间的差值大于
等待时间时才触发新事件 */
if(now - prev > wait) {
fn.apply(this, arguments)
}
//重置初始触发时间
prev = +new Date()
}
}
9、防抖
防抖就是可以限制事件在一定时间内不能多次触发，比如说你疯狂按点击按钮，一顿操作猛如虎，不加防抖的话它也会跟着你疯起来，疯狂执行触发的方法。但是一旦加了防抖，无论你点击多少次，他都只会在你最后一次点击的时候才执行。 防抖常用于搜索框或滚动条等的监听事件处理，可以提高性能。
function debounce(fn, wait = 50) {
//初始化一个定时器
let timer
return function() {
//如果timer存在就将其清除
if(timer) {
clearTimeout(timer)
}
//重置timer
timer = setTimeout(() => {
//将入参绑定给调用对象
fn.apply(this, arguments)
}, wait)
}
}
深拷贝和浅拷贝
浅拷贝： 顾名思义，所谓浅拷贝就是对对象进行浅层次的复制，只复制一层对象的属性，并不包括对象里面的引用类型数据 ， 当遇到有子对象的情况时，子对象就会互相影响 ，修改拷贝出来的子对象也会影响原有的子对象
深拷贝： 深拷贝是对对象以及对象的所有子对象进行拷贝，也就是说新拷贝对象的子对象里的属性也不会影响到原来的对象
let obj = { a: 1, b: 2, c: { d: 3, e: 4 } }
实现浅拷贝
使用Object.assign()
let obj2 = Object.assign({}, obj)
obj2.a = 111
obj2.c.e = 555
console.log(obj)
console.log(obj2)
使用展开运算符
let obj2 = {...obj}
obj2.a = 111
obj2.c.e = 555
console.log(obj)
console.log(obj2)
实现深拷贝
最简单的深拷贝方式
let target = JSON.parse(JSON.stringify(source))
但是这种方法的话只支持object、array、string、number、true、false、null这几种数据或者值，其他的比如函数、undefined、Date、RegExp等数据类型都不支持。对于它不支持的数据都会直接忽略该属性。
完整版
function deepCopy(source, cache = new Map()) {
if (cache.has(source)) {
//如果缓存中已经有值则直接返回，解决循环调用的问题
return cache.get(source)
}
//当入参属于Object复杂数据类型就开始做子类检测-> Function Array RegExp Date 都属于Object类型
if (source instanceof Object) {
let target
if (source instanceof Array) {
//判断数组的情况
target = []
} else if (source instanceof Function) {
//判断函数的情况
target = function () {
return source.apply(this, arguments)
}
} else if (source instanceof RegExp) {
//判断正则表达式的情况
target = source
} else if (source instanceof Date) {
target = new Date(source)
} else {
//普通对象
target = {}
}
// 将属性和拷贝后的值进行缓存
cache.set(source, target)
//开始做遍历递归调用
for (let key in source) {
if (source.hasOwnProperty(key)) {
target[key] = deepCopy(source[key], cache)
}
}
return target
} else {
//如果不是复杂数据类型的话就直接返回
return source
}
}
