Back
To Top
Javascript
2023/08/14
1.箭头函数和 function 的区别.
- 箭头函数根本就没有绑定自己的
this
,在箭头函数中调用this
时,仅仅是简单的沿着作 用域链向上寻找,找到最近的一个this
拿来使用
2.什么是防抖和节流?有什么区别?如何实现?
- 函数防抖(
debounce
):在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。(函数防抖就是法师发技能的时候要读条,技能读条没完再按技能就会重新读条。)
function debounce(fun, delay) {
return function (args) {
let that = this;
let _args = args;
clearTimeout(fun.id);
fun.id = setTimeout(function () {
fun.call(that, _args);
}, delay);
};
}
- 函数节流(
throttle
):规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。(函数节流就是fps
游戏的射速,就算一直按着鼠标射击,也只会在规定射速内射出子弹。)
function throttle(fun, delay) {
let last, deferTimer;
return function (args) {
let that = this;
let _args = arguments;
let now = +new Date();
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fun.apply(that, _args);
}, delay);
} else {
last = now;
fun.apply(that, _args);
}
};
}
- 使用场景:
debounce
search
搜索联想,用户在不断输入值时,用防抖来节约请求资源。window
触发resize
的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次throttle
- 鼠标不断点击触发,
mousedown
(单位时间内只触发一次) - 监听滚动事件,比如是否滑到底部自动加载更多,用
throttle
来判断
3.'1', '2', '3'.map(parseInt) what & why ?
- 第一眼看到这个题目的时候,脑海跳出的答案是
[1, 2, 3]
,但是真正的答案是[1, NaN, NaN]
。 首先让我们回顾一下,map
函数的第一个参数callback
。这个callback
一共可以 接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该 元素的索引。arr.map(callback: (value: T, index: number, array: T[]) => U, thisArg?: any)
而parseInt
则是用来解析字符串的,使字符串成为指定基数的整数。接收两个 参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。parseInt(string, radix)
了解这两个函数后,我们可以模拟一下运行情况parseInt('1', 0) //radix
为0
时,且string
参数不以0x
和0
开头时, 按照10
为基数处理。这个时候返回1parseInt('2', 1)
//基数为 1(1 进制)表示的数中,最大值小于2
,所以无法解析,返回NaNparseInt('3', 2) //基数 为 2(2 进制)
表示的数中,最大值小于 3,所以无法解析,返回NaN
4.Object.is() 与原来的比较操作符 “===”、“==” 的区别?
- 两等号判等,会在比较时进行类型转换;
- 三等号判等(判断严格),比较时不进行隐式类型转换,(类型不同则会返回
false
); Object.is
在三等号判等的基础上特别处理了NaN
、-0
和+0
,保证-0
和+0
不再相同,但Object.is(NaN, NaN)
会返回true
;Object.is
应被认为有其特殊的用途,而不能用它认为它比其它的相等对比更宽松或严格。
5.JS 的 new 操作符做了哪些事情
new
操作符新建了一个空对象,这个对象原型指向构造函数的prototype
,执行构造函数 后返回这个对象。
6. 说一下什么是 virtual dom
- 用
JavaScript
对象结构表示DOM
树的结构;然后用这个树构建一个真正的DOM
树, 插到文档当中 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树 进行比较,记录两棵树差异 把所记录的差异应用到所构建的真正的DOM
树上,视图就 更新了。Virtual DOM
本质上就是在JS
和DOM
之间做了一个缓存。