公司一

一家小公司，做的东西好像偏向AI，主要就是一顿问问题

1.react版本更新内容

将所有事件都进行批处理，之前原生事件没有批处理
引入了新的root API：createRoot 和 unmount
从render中删除了回调函数，组件中可以通过useEffect实现。
去掉了对IE浏览器的支持
flushSync退出批量更新
在react18中，返回空组件支持null和undefined
Suspense不再需要fallback捕获

详细请参考

2.组件首字母大写为什么？大写不大写会造成什么结果？

babel转换的时候，如果是小写会被转为字符串，如果是大写会转为变量。

详细请参考

3.项目打包了解吗？

4.webpack处理流程，自定义组件怎么进行转换的？

这个没有搜到相关的文章。说一下自己的理解，还请大佬纠正。 jsx语法通过

5.react组件为什么不能返回多个元素？

React组件最后会被编译为render函数，函数的返回值只能是1个，如果不用单独的根节点包裹，会返回多个值，这在js是不允许的。
react虚拟DOM是一个树形结构，根节点只能是一个。

怎样返回多个组件？

使用高阶函数
使用React.Fragment,可以让你将元素列表加到一个分组中
使用数组返回

6.react合成事件

7.合成事件和原生的事件有什么区别

8.react常用 hooks

9.react hooks有什么限制?可以在if for中使用吗

10.数据类型有哪些

11.基本数据类型和引用类型的区别

12.跨域请求

blog.csdn.net/m0_37873510…

13.深拷贝浅拷贝

基本数据类型就不说了，以下只说引用数据类型。

浅拷贝：拷贝的是引用地址
深拷贝：还会在堆中开辟一块新空间。实现
浅拷贝： slice() concat() assign() ...扩展运算符
JSON.parse(JSON.stringfy()) 手写递归循环(getPropertyOf)

14. setTimeout的时间参数是准确的吗

不是，这个时间(延时)只是把这个任务加到浏览器的队列的时长，但加入到队列中如果主线程被占用，就不一定会立即执行

公司二

1. 数据的类型一共有几种

2. 实现一个函数 test word 转成Test Word

str.split(' ').map((item)=>item.slice(0,1).toUpperCase()+item.slice(1)).toString().replace(',',' ')

3. 自己实现reduce函数

www.cnblogs.com/art-poet/p/…

4. 遍历递归树结构，每个node节点增加一个属性。

 const addAttribute = (data) => {
        for (let i = 0; i < data.length; i++) {
            data[i].name = 'xinzeng'
            if (data[i].child && data[i].child.length > 0) {
                addAttribute(data[i].child)
            }
        }
        return data
    }

5.手写防抖函数

防抖：概念：在一段时间内，触发多次只执行最后一次思路：使用setTimeOut 每次点击后都重置例子：输入框搜索、按钮点击登录

function debounce(fn,delay){
    let timer = null
    return function(...args){
        clearTimeOut(timer)
        timer = setTimeOut(()=>{
            fn.apply(this,args)
        },delay)
    }
}

节流：概念：减少调用的频次，就像水龙头把水关上思路：一个状态变量例子：滚动加载

function throttle(fn,delay){
    let flag = true
    return function(...args){
        if(flag){
            flag = false
            setTimeOut(()=>{
                fun.apply(this,args)
                flag = true
            },delay)
        }
    }
}

6.手写Array的map方法

7.找tree中value=1的项

8.npm包版本比较version1>version2 返回1，version1<version2 返回-1,其余返回0

 const sorts = (list) => {
        return list.sort((version1, version2) => {
            const arr1 = version1.split('.')
            const arr2 = version2.split('.')
            console.log('get-arr', {
                arr1,
                arr2
            })
            const length = Math.max(arr1.length, arr2.length)
            for (let i = 0; i < length; i++) {
                if (arr1[i] > arr2[i]) return 1
                if (arr1[i] < arr2[i]) return -1
            }
            return 0
        })
    }

for in 和object.keys区别

深浅拷贝

juejin.cn/post/684490…

浅拷贝：拷贝的就是内存地址

Object.assign()
展开运算符... 深拷贝：深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象
JSON.parse(JSON.stringify())
手写递归方法 hasOwnProperty

typescript 联合类型 Pick 泛型x

事件循环

首先说一下宏任务微任务都有哪些

微任务：Promise async await
宏任务：setTimeOut setInterval 由于js是单线程的，如果有一个任务卡死，那么后面的所有任务都被延迟执行，因此出现了：微任务、宏任务。 js代码首先执行同步任务，然后执行异步任务。异步任务又分宏任务微任务，先执行完队列中的所有微任务，然后去执行一个宏任务，执行完这一个宏任务，再回来扫描微任务队列，有就执行完。如此这般往复，就是事件循环。

怎么分析webpack打包前的文件大小

webpack-bundle-analyzer会生成一个各文件大小分布图

webpack-stats-viewer-plugin来对其进行进一步分析

详细内容请看这篇文章 blog.csdn.net/moonrailgun…

useEffect和 useLayoutEffect 区别

useEffect是异步的，useLayoutEffect是同步的
useEffect在浏览器完成渲染之后执行 useLayoutEffect在把内容渲染到界面之前执行(componentDidMount)

useLayoutEffect的应用：比如我们定义了一个变量为 "hello world"，我们在useEffect中将其改为 "world hello"。会出现闪烁。useLayoutEffect则会避免闪烁

useLayoutEffect在服务端渲染的时候使用会有一个 warning，因为它可能导致首屏实际内容和服务端渲染出来的内容不一致

受控组件和非受控组件

受控组件由开发者维护
非受控组件自身维护

参考

新世纪超前幼儿园入园考试

公司一