前端js高级部分检测变量方法+防抖节流+浏览器事件循环模型

最新推荐文章于 2024-07-14 15:54:59 发布

春緋

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量687

点赞数 23

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_80391964/article/details/139554882

版权

一、检测变量类型方法

一、instanceof

1.注意事项

表达式： A instanceof B

B函数的显式原型对象在A对象原型链上，返回true，否则返回false

num, str和bool没有检测出它的类型

2、使用instanceof还可以检测出提前被定义好的对象

console.log(
    num insatnceof Number //false
    arr instanceof Array // true
    data instanceof Data // true
    reg intanceof RegExp // true
}

二、 typeof（）

*当变量是number, string, boolean, function, undefined, json类型时，可以使用typeof进行判断，而其他变量是判断不出类型的，包括null。

typeof是区分不出array和json类型的。因为使用typeof这个变量时，array和json类型输出的都是object。

三、constructor

constructor本来是原型对象上的属性，指向构造函数。

可以看到它指向了Number的构造函数，因此，我们可以使用num.constructor==Number来判断num是不是Number类型的，其他的变量也类似。

undefined和null没有constructor属性，没有进行测试
let num = 123;
console.log(num.constructor)//Number

四、 Object.prototype.toString.call

1、所以变量的类型都检测出来了

console.log(
Object.prototype.toString.call(num)//'[Object Number]'
Object.prototype.toString.call(str)//'[Object String]'
Object.prototype.toString.call(arr)//'[Object Array]'
Object.prototype.toString.call(und)//'[Object undefined]'
}

二、防抖节流

一、防抖

1、定义

在一段时间内触发很多次，只执行最后一次。（从新开始）

2、应用场景

搜索框输入，文本编辑器实时保存

3、模板

let timerId = null
document.querylector('.ip').onkeyup = function(){
    if(timerId !== null){
        clearTimeout(timerId)
    }
    timerId = setTimeout(()=>{
    console.log('防抖')




}，1000)
}

二、节流

1、定义

连续触发一件事，但是在设定时间只执行一次函数（不要打断我）

2、应用场景

高频事件：快速点击，鼠标滑动，scroll事件，resize事件

下拉加载

视频播放记录时间

3、模板

let time = null
function(){
    if(time !== null){
        return
    time = setTimeout(()=>{

        console.log("节流")
        time = null

    },1000)

}