面试小结，成功拿到offer最近面试经历(其实去年就开始准备了，只不过是偶尔看看面试题) 02.14开始面试，到03.1

最近面试经历(其实去年就开始准备了，只不过是偶尔看看面试题)

02.14开始面试，到03.10 成功拿到目前来说相对较好的offer，投简历一在周一上午偷，其他时间复习

03.14-02.18 刚开始一周投了二线城市的公司四五家，准备先熟悉一下面试，毕竟快三年没面试了，结果没人理我。我觉得可能是简历不过关，就利用周末修改了一下简历。

02.21-02.25 开始往本市投简历，投了五家，约了三家电话面试，面完后感觉自己答的不太好，没加都是面试过了，最后价钱没谈拢就没去，可能是自己的原因，也可能是市场的原因，可能是找个能干活的就行，不需要把代码写多好哇。写到这里，感觉需要总结一下这几年的工作经历，稍后总结不上，现在就不说了。

02.28-03.04 往北京投了四家，一家没理我，一家说不合适，还有两家成功约到面试，都是两面。一家本周面完，过了说是下周给答复，另一家在下周二面。

03.07-03.11 敲定一家offer，另一家的面试页来临。自我感觉面试问题答了40%，有些都是不会的，但是拿到了offer，我不太清楚市场。还要继续准备着。提了离职申请。 03.14 又投了几家，结果没人理我，offer到手不慌，下周再投

有些题可能忘记了，但是后面我应该会继续再面两周左右，到时候接着总结

面试最多的就是数组相关的操作

欢迎大佬留言补充

排序十大排序算法

const arr4=[1,11,22,2,2,3,45,11,2,3]

// 方法一 sort 转为字符后比较的
const sort1 = arr4.sort((pre,next)=>pre-next)

去重当时只答了 Set includes Map


const arr3 = [1, 2, 3, 2, 2, 3, 1, 2, 3, 51, 2]

// 方法一Set 结果是类数组
const deWeighting1 = [...new Set(arr3)]

// 方法二 from Set
const deWeighting2 = Array.from(new Set(arr3))

// 方法三 includes
let deWeighting3 = []
for (const value of arr3) {
    if (!deWeighting3.includes(value)) {
    deWeighting3.push(value)
    }
}

// 方法四 Map
let currentMap = new Map();
for (const value of arr3) {
    currentMap.set(value, 1)
}
const deWeighting4 = [...currentMap.keys()]

// 方法五 indexOf filter
const deWeighting5 = arr3.filter((val, index) => arr3.indexOf(val) === index)

求和

// 方法一 for
let sum1=0;
for (const val of arr2) {
    sum1+=val
}

// 方法二 reduce
const sum2=arr2.reduce((pre,cur)=>pre+cur,0)

// 方法三 forEach
let sum3=0;
arr2.forEach(val=>{
    sum3+=val
})

// 方法四 eval join
const sum4 = eval(arr2.join("+"))

扁平化(把多维数组转为一维数组) 欢迎补充面试时只回答了递归

// 前三种有副作用，会将数字转为字符串，并且处理undefined，null，function等
const arr=[[8,[9,[10]]],1,undefined,null,[2,[3,[4,[5,[6,[7,"a",["8"]]]]]]]]
// 方法一 join split (不推荐数字将最为字符串) 
const res1=arr.join().split(",") // ['8', '9', '10', '1', '', '', '2', '3', '4', '5', '6', '7', 'a', '8']

// join多个空字符串结果就不同
const res11=arr.join("").split(",") // ['8', '9', '1012', '3', '4', '5', '6', '7', 'a', '8']

// 方法二 toString split  (不推荐数字将最为字符串)
const res2=arr.toString().split(",") // ['8', '9', '10', '1', '', '', '2', '3', '4', '5', '6', '7', 'a', '8']

// 方法三 replaceAll 有副作用
const res7=JSON.parse(`[${JSON.stringify(arr).replaceAll("[","").replaceAll("]","")}]`) // [8, 9, 10, 1, null, null, 2, 3, 4, 5, 6, 7, 'a', '8']

// 方法四 递归
function recursion(arr) {
    let current=[];
    for (const val of arr) {
        if(Array.isArray(val)){
            current=current.concat(recursion(val))
        }else{
            current.push(val)
        }
    }
    return current;
}
const res3=recursion(arr) // [8, 9, 10, 1, undefined, null, 2, 3, 4, 5, 6, 7, 'a', '8']

// 方法五 递归加 reduce
function recursionReducers(arr) {
    return arr.reduce((pre,cur)=>{
        return pre.concat(Array.isArray(cur)?recursionReducers(cur):cur)
    },[])
}
const res5=recursionReducers(arr) // [8, 9, 10, 1, undefined, null, 2, 3, 4, 5, 6, 7, 'a', '8']

// 方法六 结构和some
function someDec(arr){
    while (arr.some(item=>Array.isArray(item))) {
        arr=[].concat(...arr)
    }
    return arr
}
const res6=someDec(arr) // [8, 9, 10, 1, undefined, null, 2, 3, 4, 5, 6, 7, 'a', '8']

// 方法七 自带方法 flat(解耦层数默认1) 
const res4=arr.flat(Infinity) // [8, 9, 10, 1, undefined, null, 2, 3, 4, 5, 6, 7, 'a', '8']

ws 和 http的区别

ws 全双工通信，可以相互连通，互相发送信息 http 单行发送

react数据更新后如何渲染的

回答没了解过

css 伪类权重

常用 after before !import > 行内 > id class 元素

闭包

通过函数返回值(也可以是对象，只要保存的是索引值就行)，访问函数内变量

闭包也是一个对象，每次调用外层函数时，临时创建的函数作用域对象

function fn(){
    let a=10;
    return function(){
        return a
    }
}
function fn(data) {
    let a = data;
    return {a}
}

防抖节流

防抖阻止事件短时间内多次触发节流一定时间间隔内触发一次

js事件处理

flex

元素水平居中方法左右不管

flex 定位

单例模式

跨域方法

jsonp 其他的没试用过

列表进入详情后返回还是那个位置，不刷新数据

说是利用浏览器的栈存储页面

重绘重排

重绘修改颜色之类的重排 dom 重新加载渲染

原型链

访问属性的方形，从自己当父级

react hook

import from 打包后的import

出错调试方式

log

http 状态码

200 成功 400 客户端请求的语法错误，服务器无法理解（参数错误） 401 请求要求用户的身份认证 403 服务器理解请求客户端的请求，但是拒绝执行此请求 404 服务器无法根据客户端的请求找到资源（ 405 客户端请求中的方法被禁止 500 服务器内部错误，无法完成请求

cookie

保存在客户端，下一次同一网站发起请求会自动带上

js事件HTML事件

HTML事件可以使浏览器行为也可以用户行为 HTML事件实例

HTML页面加再完成
input被改变
按钮被点击

事件流

执行顺序捕获目标冒泡

事件冒泡和捕获

放生在一个元素上

先捕获后冒泡 (默认事件在冒泡阶段注册) (想要改变事件冒泡的注册顺序，可以使用addEventListener，第三个参数设为( 事件名, 触发的方法, (是否在捕获注册)true)) 捕获浏览器检查元素最外成HTML在捕获阶段是否注册了事件处理程序，如果是则运行他，然后找下个元素在，直到找到实际元素后冒泡浏览器检查元素在冒泡阶段是否注册了一个事件处理程序，如果是则运行他，然后移动到他的父元素上，做同样的事情，直到找到为止

默认会按冒泡进行事件触发，(从子开始以此向上触发，上级只要绑定事件，就会触发) 这种方法很不好，就有的stopPropagation 事件, 加上stopPropagation后本事件会触发，上级的不会触发

事件执行会按照注册顺序进行触发

事件注册 addEventListener (事件名称，事件的处理程序，[配置]，[是否在捕获阶段注册, 默认false] )

有点可以设置多个事件监听，对任何Dom元素都有效，可以控制事件注册方式(冒泡或捕获) 此事件运行中被移除会立即停止，但可以重新绑定

事件移除 removeEventListener (事件名称，事件的处理程序, [配置], [是否在捕获阶段注册要和添加监听的类型值相同, 默认false])

配置 {capture:true | false 会影响事件匹配} 或是否在捕获阶段注册要和添加监听的类型值相同会影响匹配

向指定时间派发 dispatchEvent

preventDefault取消事件

事件委托

给父元素添加事件监听，e.target就是当前点击子元素的信息，可以进行一些操作子元素太多，平凡删除不好给子元素添加事件，就需要事件委托

委托中删除某个子节点，及子节点删除本身 ul.removeChild(e.target)

移动端适配

rem 和 vw

redux 原理

没了解过

webpack的使用

不太理解

面试小结，成功拿到offer