js,不能说的秘密(1)

140 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情

类数组

类数组是有着数组的长相,但却没有数组的方法,本身是一个对象,{0:'name',1:'age',length:2}可以以下标的方式访问,也有这length属性,但是不能直接使用数组的方法,例如push(),slice().常用到的类数组有函数的arguments,以及在获取dom列表时返回的nodelist.

类数组转数组:

  1.通过数组的方法来实现,call 会改变this的指向,并且执行函数,这里就是改变了类数组的this的指向,然后调用了输入函数,从而将一个类数组转变为真正的数组。这里可能还是有人会不太懂为啥这样就可以了,其实改变this的指向,就是改变了它的身份一样,有点继承的意思。
  let arrayLike = {0:'name',1:'age',length:2}
  Array.prototype.slice.call(arrayLike)
  这里也可以使用其他的数组方法,但是注意数组方法的使用,以及数组方法会不会对数组有影响。比如在对nodelist进行处理时,并不像对其内容修改,可以用slice()方法,并且这里使用的call()方法来改变this,同样也可以用其它方法,比如apply()也可以实现。
  
  2.ES6
  Array.from(arrayLike)

防抖和节流

防抖的效果:如果短时间内大量触发同一事件,只会执行一次函数。这里常用在抢购的按钮上,一直点但是其实就一次生效。这可能就是为啥你抢不到的原因。当然也有可能只有我写抢购时是这样的。

  function debounce(fn,delay){

    let timer = null 

    return function() {

        if(timer){

            clearTimeout(timer)

        }

        timer = setTimeout(fn,delay) 

    }

}

节流的效果:在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。这就像游戏的技能一样,没过一段时间才能放一次一样。

function throttle(fn,delay){

    let valid = true

    return function() {

       if(!valid){

           //休息时间 暂不接客

           return false 

       }

       // 工作时间,执行函数并且在间隔期内把状态位设为无效

        valid = false

        setTimeout(() => {

            fn()

            valid = true;

        }, delay)

    }

}