2023/5/29 面试实战自用（js css复盘整理）

CSS部分

1.BFC是什么？

BLock Formatting Context 直译过来块级文本 上下文

应用场景1:

1. 高度坍塌
   给父级元素增加overflow：auto，父元素就会创建一个BFC区域，BFC元素会把子元素中的浮动元素的高度也计算到里面

2. 外边距折叠
   兄弟之前会折叠，解决方式就是给兄弟元素之家添加一个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部分

闭包的使用场景

1. 自执行函数引用了window下的变量，其实就形成了闭包
2. 循环赋值

// 在var 循环便利的时候 异步操作本来会打出来9个10的
//但是可以通过闭包 让他形成10个互补干扰的私有作用域
for (var i = 0; i < 10; i++) {
  (function(j){
       setTimeout(function(){
           console.log(j)
       },1000)
  })(i)
}
}

3. 使用回掉函数就是在使用闭包
4. 节流防抖

// 节流
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（直译–节流阀）

5. 柯里化实现

部分手写代码 && 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状态