CSS部分
1.BFC是什么?
BLock Formatting Context 直译过来块级文本 上下文
应用场景1:
-
高度坍塌
给父级元素增加overflow:auto,父元素就会创建一个BFC区域,BFC元素会把子元素中的浮动元素的高度也计算到里面 -
外边距折叠
兄弟之前会折叠,解决方式就是给兄弟元素之家添加一个BFC元素,
父子之前会合并,给父元素添加BFC即可
整理一下所有创建BFC的方式:
-html
html 就是一个创建了BFC的元素
-float(不为none即可):left , right
-position:absolute 、right
-display: inline-block、flex、inline-flex、grid、inline-grid、flow-root
-overflow值不为visible的块元素
这里一般用display和overflow属性,因为副作用比较小,display中的flow-root 唯一作用就是创建一个BFC
css权重
(!important)> 内联 >ID > class 伪类 > 标签 > 子选择器
伪类选择器
- :link 超链接点击之前 a:link{color : pink}
- :visited 链接被访问之后 a:visited{ color : red }
- :hover ‘悬停’ 鼠标放到标签上的时候
- :active ‘激活’ 鼠标点击标签 但是不松手
- :focus 某个标签获得焦点时候的样式(input 获得焦点)
- :first-child 元素集的第一个元素
- :last-child 元素的的最后一个元素
- :nth-child(2n) 元素的偶数元素
- :li:not(li:first-child){color : pink} 除了第一个元素 都pink
JS部分
闭包的使用场景
- 自执行函数引用了window下的变量,其实就形成了闭包
- 循环赋值
// 在var 循环便利的时候 异步操作本来会打出来9个10的
//但是可以通过闭包 让他形成10个互补干扰的私有作用域
for (var i = 0; i < 10; i++) {
(function(j){
setTimeout(function(){
console.log(j)
},1000)
})(i)
}
}
- 使用回掉函数就是在使用闭包
- 节流防抖
// 节流
function throttle(fn, timeout) {
let timer = null
return function (...arg) {
if(timer) return
timer = setTimeout(() => {
fn.apply(this, arg)
timer = null
}, timeout)
}
}
// 防抖
function debounce(fn, timeout){
let timer = null
return function(...arg){
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arg)
}, timeout)
}
}
这里突然看懂了这个源码,然后就能明白防抖和节流的区别了,其实都是为了防止过于非常平凡的请求后台的api
debounce
举一个防抖场景就是input 模糊查询后台list时候debounce ,每按一次,触发一次事件,猛按就是重新计时重新计时重新计时,重新计时,松开后过个半秒300ms的才触发,这就是防抖,
throttle
比如scroll事件 ,每隔1s处罚一次事件,也就说说触发一次之后,过一秒才能触发,然后一直拖一直拖,稳定一秒触发一次,就像是一个控制阀一样,所以叫throttle(直译–节流阀)
- 柯里化实现
手写代码部分
数组对象的去重排序
面试官: 先来个最简单的 。
大佬: 这是基础
数组对象的排序去重
let arr = [
{ id: 1, name: '周瑜', sortId: 2 },
{ id: 3, name: '王昭君', sortId: 1 },
{ id: 2, name: '亚瑟', sortId: 3 },
{ id: 1, name: '小乔', sortId: 1 },
{ id: 2, name: '大桥', sortId: 2 },
{ id: 3, name: '韩信', sortId: 3 }
];
// 数组对象排序去重
function uniqueAndSort(arr,uniqueId,sortId){
// first unique
let obj = {}
let result = arr.reduce((accumulator, currentValue)=>{
console.log(accumulator)
obj[currentValue[uniqueId]] ? "" : obj[currentValue[uniqueId]] = accumulator.push(currentValue)
return accumulator
},[])
// then sort
result.sort((a, b)=>{
return a.sortId - b.sortId
})
return result
}
console.log(uniqueAndSort(arr,'id'))
部分手写代码 && Promise && reduxtoolkit用法整理
//去重
let arr = [10,1,2,2,3]
function unique (arr) {
let newArr = []
for(let i =0; i < arr.length; i++ ) {
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique(arr))
//排序
function mySort(arr) {
for(let i =0; i< arr.length- 1; i ++){
for(let j =0; j < arr.length- 1; j ++){
if(arr[j] > arr[j+1]){
var temp = arr[j]
arr[j] = arr[j+1]
arr[j+1] = temp
}
}
}
return arr
}
console.log(mySort(arr))
//防抖
function debounce (fun,time) {
let timer = null;
return function(...arg){
clearTimeout(timer)
timer = setTimeout(()=>{
fun.apply(this,arg)
},time)
}
}
//节流
function throttle (fn, time) {
let timer = null
return function (...arg){
if(timer) return
timer =setTimeout(() => {
fn.apply(this,arg)
},time)
}
}
//promise
// promise all -- 传入一个promise 数组集 全部成功才会分别返回实例的成功毁掉
// promise rece 是赛跑机制 看最先跑完的是成功还是失败 只要第一个成功就会掉第一个
// promise.any 多个实例包装成一个 只要有一个成功就会成功 全部失败才会是白
// 自己项目里用的redux slice 用法
// 首先从reduxtoolkit 里面引入createSlice方法
// 然后传入name initState对象,定义reducer
//通过slice实例的action方法暴露出去reducer 然后再页面里用useDispatch调用reduce方法
//用useSelector 调用state.slicename 获取state状态