美文网首页
准备:深拷贝、防抖、节流

准备:深拷贝、防抖、节流

作者: 没有昵_称 | 来源:发表于2020-12-08 17:09 被阅读0次

深拷贝

  • JSON 转换
JSON.parse(JSON.stringify([1,2,3,4]))

如果对象中有函数、undefind,无法拷贝出

  • 普通递归函数实现
function copy(data){
    if(!isObject(data)) return data
    let target = Array.isArray(data)?[]:{};
    for(let i in data){
        if(isObject(data[i])){
            target[i]  = copy(data[i])
        }else{
            target[i] = data[i]
        }
    }
    return target
}
function isObject(obj){
    return typeof obj === 'object' && obj!==null
}

防抖

防抖的原理就是:触发一个事件,在n秒后才执行,如果在n秒的时间内再次出发事件,以新事件的时间为准,总之,就是触发事件后,n秒内没有触发事件才执行

function debounce(fn,awit){
    var time = null
    return function(){
        let _this = this
        let arg = arguments
        clearTimeout(time)
        time = setTimeout(function(){
            fn.apply(_this,arg)
        },awit)
    }
}

节流

节流原理:
如果持续触发事件,每隔一段时间,只执行一次事件

function throttle(fn, awit) {
    let time = null
    return function(){
        let _this = this
        let arg = arguments
        let now = +new Date()
        if(now-time>awit){
            fn.apply(_this,arg)
            time = now
        }
    }
}

相关文章

  • 准备:深拷贝、防抖、节流

    深拷贝 JSON 转换 如果对象中有函数、undefind,无法拷贝出 普通递归函数实现 防抖 防抖的原理就是:触...

  • 面试总结之基础篇(1)

    深拷贝与浅拷贝 原型与原型链 防抖节流 this 指向 new关键字 深度剖析js闭包

  • 前端手写

    节流 防抖 用xhr手写axios 函数柯里化 手写promise 手写reduce new 深拷贝 string...

  • 笔试题

    实现一个new的伪代码 深拷贝和浅拷贝 防抖节流 call apply bind 原型继承 组合继承 寄生组合继承

  • 手写实现系列

    实现 new 方法 Object.create 的实现原理 实现数据绑定 深拷贝 防抖函数 节流函数 冒泡排序 快速排序

  • 前端高频面试题-编程题

    防抖和节流 深拷贝 数组扁平化 数组去重 单例模式 手写promise 模拟new 实现call apply bi...

  • JS-实现的各类函数工具库

    一.函数的防抖: 二. 节流 三. 对象的深拷贝 对象的实际截图: 数组的实际截图: 四. JS 获取当前时间格式...

  • js 防抖 节流

    节流 防抖1 防抖2

  • 前端手写代码

    下面介绍一些常用的源码实现实现一个深拷贝实现 new 操作符实现instanceof防抖节流函数柯里化实现 cal...

  • 2019-04-24关于节流和防抖

    节流: 应用场景: 防抖: 应用场景: 1.节流 2.防抖

网友评论

      本文标题:准备:深拷贝、防抖、节流

      本文链接:https://www.haomeiwen.com/subject/npxqgktx.html