2024前端面试准备4-基础面试题

基础面试题总结

1. DOM是哪种数据结构，attr和property的区别
DOM是一个树结构；
property：修改对象属性，不会体现到html中
attr：修改html属性，会改变html结构
两者都有可能会引起DOM重新渲染。

2.var 和 let 、const的区别

var是ES5语法，let const是ES6语法， var有变量提升
var和let是变量可修改，const是常量，对于基本数据类型，const的值不会改变，如果是引用类型，可以修改对象的属性，不能重新赋值整个对象，原理就是const定义的引用类型持有的内存地址不可变，但是内存地址中的数据可以被改变。
let const有块级作用域，var没有

3.列举强制类型转换和隐式类型转换

强制：parseInt、parseFloat、toString等
隐式：if、逻辑运算、==、+ 拼接字符串等

4. 手写深度对比，模拟loadsh isEqual

function isObject(obj){return typeof obj === 'object' && obj !== null
}
function isEqual(obj1,obj2){if(!isObject(obj1) || !isObject(obj2)){return obj1 === obj2;}if(obj1 === obj2){return true;}const obj1Keys = Object.keys(obj1);const obj2Keys = Object.keys(obj2);if(obj1Keys.length !== obj2Keys.length){return false;}for(let key in obj1){const res = isEqual(obj1[key],obj2[key])if(!res){return false;}}return true;
}

5、[10,20,30].map(parsnInt)返回结果
结果：[10 NaN NaN]
parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数

[10,20,30].map((num,index)=>{retuen parsnInt(num, index)
})

6.函数声明和函数表达式的区别
函数声明会在代码执行前预加载，函数表达式不会

7.什么是防抖和节流？有什么区别？应用场景？
防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

function debounce(fn) {let timeout = null; return function () {clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments);}, 500);};}

节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数

function throttle(fn) {let timer = null; return function () {if (timer != null) return; timer = setTimeout(() => { fn.apply(this, arguments);timer = null;}, 500);};}