一、原生JS编写tab栏切换
-
获取导航栏里面所有的元素a
-
遍历元素a
-
给点击的a添加事件
-
通过排他思想给点击的a添加类名,其他的移除类名
-
下面对应的列表也是通过排他思想添加类名,其他的移除类名
二、利用递归函数实现 setTimeout 模拟 setInterval效果
![](https://i-blog.csdnimg.cn/blog_migrate/17aabba9805c21b0858dbcd37063c7ca.png)
三、节流
-
本质:连续触发事件,但是在n秒钟只执行一次
方法一:
const box = document.querySelector('.box')
let i = 0
let flag = true
box.addEventListener('mousemove', function() {
if (flag) {
flag = false
i++
box.innerHTML = i
setTimeout(function() {
flag = true
}, 500)
}
})
方法二:
const box = document.querySelector('.box')
let i = 0
function mouseMove() {
box.innerHTML = i++
}
box.addEventListener('mousemove', _.trottle(mouseMove, 500))
四、防抖
-
本质:触发事件后n秒内只执行一次,如果在n秒内再次触发事件,则会重新计算函数执行时间
方法一:
const box = document.querySelector('.box')
let i = 0
let timeId
box.addEventListener('mousemove', function() {
clearTimeout(timeId)
timeId = setTimeout(function() {
i++
box.innerHTML = i
}, 500)
})
方法二:
const box = document.querySelector('.box')
let i = 0
function mouseMove() {
box.innerHTML = i++
}
box.addEventListener('mousemove', _.debounce(mouseMove, 500))
五、JS同步异步,执行机制,事件循环(event loop)
同步任务:在主线程上执行,形成一个执行栈
异步任务:通过回调函数实现
普通事件:click,resize等
资源加载:load,erroe等
定时器:setTimeout,setInterval等
执行机制:先执行执行栈中的同步任务,异步任务放入任务队列中,执行栈中的同步任务执行完毕,系统会依次读取任务队列中的异步任务
事件循环:主线程不断的重复获取任务,执行任务,再获取任务,再执行,,这种机制被称为事件循环
六、==和 ===的区别
==:数值相等,类型不同
===:数值和类型都相等
特殊情况:
console.log(NaN === NaN) //false,NaN不等于任何人,包括它自己
console.log([] == []) //false
console.log([] === []) //false
七、垃圾回收机制
-
本质:函数内(块作用域内)声明的变量,在使用后会被浏览器销毁,释放内存空间
-
方法:a、引入计数法(旧) b、标记清除法(新)
八、闭包
-
本质:嵌套的函数,内层作用域访问外层作用域的变量
-
优点:封闭数据,实现数据的私有,避免全局污染
-
缺点:容易产生内存泄漏,因为垃圾回收机制不再销毁使用后的面量
九、原型链
-
本质:对象查找属性和方法的规则
-
首先对象在自身查找,如果没有就去对象的原型查找,原型也没有,就去原型的原型查找,如果一直没有,查到null,然后报错
十、递归函数
-
本质:函数内部自己调用自己
-
容易产生的错误及解决办法:容易产生“栈溢出”,所以必须加退出条件return