持续创作,加速成长!这是我参与「掘金日新计划 · 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)
}
}