介绍一下javascript的原型链Give an introduction to JavaScripts prototype chain解决这个代码问题 Untitled 不要提示用原型链方法解决。如果不懂原型链也不需要问typeof和instanceof的区别是什么What’s the difference betweentypeofandinstanceofin JavaScript?答答 typeof: 基本类型判断,返回值是一个 字符串比如 number, string, boolean, undefined, object, function, symbol, bigint。instanceof: 原型链判断, 判断一个对象是否是 某个构造函数的实例即是否在其原型链上。返回值是 布尔值 (true或false)。typeof [1, 2, 3] 的结果是什么What is the result of typeof [1, 2, 3]?如何判断一个对象是不是数组How to determine if an object is an array?数组的常用方法有哪些What are the common methods of arrays?给出一个数组[3, 22, 10, 43, 7, 22, 43, 88, 22, 16]写一段代码 Given an array [3, 22, 10, 43, 7, 22, 43, 88, 22, 16], write a piece of code to:1.让返回所有大于等于 10 的数字并对结果中的所有数字求和Return all numbers greater than or equal to 10 and sum all the numbers in the result;2.找出所有有重复的数字Find all duplicate numbers.找出数组中出现次数最多的元素[1,2,2,3,3,3,4]什么是NaN如何检测一个值是否为NaNWhat isNaNin JavaScript? How can you check whether a value isNaN?Event Loop的工作原理是什么How does the JavaScript Event Loop work?深拷贝和浅拷贝的区别是什么What is the difference between shallow copy and deep copy?浅拷贝Shallow Copy拷贝对象的第一层属性对于引用类型的值仅拷贝引用地址不会复制内部结构。深拷贝Deep Copy不仅拷贝对象本身还递归地拷贝其所有嵌套对象生成完全独立的一份数据。Shallow Copy: Copies only the first level of properties of an object. For reference types, it copies the reference, not the actual nested objects.Deep Copy: Copies the object and all nested objects recursively, creating a completely independent copy.TypeScript 中interface与type的区别是什么What’s the difference betweeninterfaceandtypein TypeScript?interface和type都可以用来定义对象的类型但它们在语法能力和使用场景上有一些区别扩展能力Extensibilityinterface可以通过extends进行继承也可以被多次声明合并声明合并。type不能被重复声明但可以通过交叉类型扩展。联合类型与交叉类型Union / Intersectiontype可以定义联合类型、交叉类型、基本类型别名。interface只能定义对象结构不能用于联合或交叉类型。声明合并Declaration Merginginterface支持多次声明同一个名会自动合并属性。type不支持会报错。推荐使用场景如果是描述对象的结构优先使用interface。如果需要定义更复杂的类型表达式如联合类型、函数类型等使用type。Bothinterfaceandtypecan be used to define the shape of objects in TypeScript, but they have some differences in capability and use cases:Extensibility:interfacecan be extended usingextendsand supports declaration merging (can be defined multiple times and automatically merged).typecannot be re-declared, but can be extended using intersection types ().Union Intersection Types:typecan define union types, intersection types, and primitive type aliases.interfaceis limited to describing object shapes only.Declaration Merging:interfacesupports declaration merging (multiple declarations of the same name will merge).typedoes not support this and will throw an error if declared more than once.Usage Recommendation:Useinterfacewhen describing object structures.Usetypefor more complex type expressions, such as unions, intersections, or function types.TypeScript 中联合类型Union Types和交叉类型Intersection Types的区别What’s the difference between Union Types and Intersection Types in TypeScript?介绍下 TypeScript 中泛型Generics的定义与使用Explain how generics are defined and used in TypeScript.✅ React 深入问题 可以使用 https://codepen.io/pen?templateemmOvza 或者 React Playground - Online React Editor Compiler Free 在线写代码 playcode.io有行数限制React 的key属性有什么作用在数组循环之外可以使用key吗作用是什么What is the purpose of thekeyprop in React?React 的useMemo和useCallbackHook 有什么区别What’s the difference betweenuseMemoanduseCallbackin React?useEffect的作用是什么它在什么时间执行What is the purpose of useEffect? When does it execute?React 的Error Boundaries是什么What are Error Boundaries in React?React 的Portals是什么What are Portals in React?React 的Concurrent Mode是什么What is Concurrent Mode in React?React 提倡的 “One Single Source of Truth” 是什么意思What does React mean by “One Single Source of Truth”?React 的函数组件中如何区分源状态source state和派生状态derived stateIn a React function component, how do you distinguish between source state and derived state?写一个React组件显示浏览器窗口当前尺寸大小并且当窗口大小变化时显示的值能同步更新Write a React component that displays the current size of the browser window and updates the displayed value in real - time when the window size changes.写一个React组件实现下图的效果宽320px 高180pxWrite a React component to achieve the effect shown in the following figure.✅ CSS 与布局问题什么是 CSS 盒模型它包含哪些部分What is the CSS box model, and what parts does it include?解释一下 CSS 选择器的类型以及它们之间的区别What are the different types of CSS selectors, and how do they differ?CSS 生效的优先级规则是怎么样的What are the CSS specificity rules, and how are they calculated?box-sizing: border-box;和box-sizing: content-box;的区别是什么What’s the difference betweenbox-sizing: border-boxandcontent-box?如何计算元素的总宽度和高度How do you calculate the total width and height of an element?CSS 样式如何继承有哪些属性默认不会继承How does CSS inheritance work? Which properties are not inherited by default?根据下面的html写一段css让子元素相对父元素居中div idparentdiv idsubSub content/div/div解释一下这段css是什么意思border: 1.4px solid var(--Theme-Text-Text-Secondary, rgba(102, 112, 133, 1))React 如何避免函数重复创建How can you avoid redundant function creation in React?1.Use useCallback2.Define Functions Outside the Component (if they don’t depend on props/state)3.Use class fields or static functions (for class components)类组件和函数组件的区别What are the differences between class components and function components in React?请说说在复杂表单中如何处理表单项之间的联动比如当用户选择不同的任务类型时显示不同的表单项In complex forms, how do you handle interactions between form fields? For example, showing different fields based on the selected task type.当表单项很多时如何避免不必要的重渲染特别是使用 Form.useWatch 时When there are many form fields, how do you avoid unnecessary re-renders, especially when usingForm.useWatch?解释下 React Fiber 的工作原理Explain how React Fiber works.解释一下闭包closure及其常见用途What is a closure, and what are its common use cases?什么是重排reflow和重绘repaintWhat are reflow and repaint in the browser rendering process?如何优化前端页面的加载速度How do you optimize frontend page loading speed?介绍一下 React 虚拟 DOMWhat is the Virtual DOM in React?讲一下对 Flex 布局和 Grid 布局的理解Describe your understanding of Flexbox and CSS Grid layout.Webpack 的核心原理和常用配置What are the core principles of Webpack and its commonly used configurations?介绍一下你对前端安全如 XSS、CSRF的理解和防护措施Explain your understanding of frontend security (e.g., XSS, CSRF) and how to defend against them.是否使用过微前端框架在实际应用中遇到过哪些坑比如样式隔离、状态共享、路由管理等问题是如何解决的Have you used any micro frontend frameworks? What issues have you encountered in practice, such as style isolation, state sharing, or route management, and how did you solve them?项目体积比较大有很多重型依赖你们是如何做代码分割和懒加载的如何确保首屏加载性能In large projects with heavy dependencies, how do you implement code splitting and lazy loading? How do you ensure good first-screen performance?在多人协作的大型项目中如何确保代码风格一致性如何处理不同开发者对技术方案的分歧In large projects with multiple developers, how do you ensure code style consistency? How do you handle disagreements over technical decisions?高级版1.简单描述从输入网址到页面显示的过程Briefly describe the process from entering a URL to the page being displayed.2.nodejs里common.js和es6中模块引入的区别What are the key differences between module imports in Node.js using CommonJS and those in ES6 modules?3.使用promise实现红绿灯交替重复亮function red() {console.log(red};}function green() {console.log(red};}function yellow() {console.log(red};}4.React 的虚拟 DOM 和真实 DOM 有什么区别如何提升渲染性能What are the differences between React’s Virtual DOM and the real DOM? How can rendering performance be improved?5.说说你对微前端架构的理解主流方案有哪些优缺点Can you share your understanding of micro-frontend architecture? What are the mainstream solutions, and what are their pros and cons?问在微前端架构中不同子应用之间如何进行状态共享和通信有哪些常见实现方式English:In a micro-frontend architecture, how can different sub-applications share state and communicate with each other? What are the common implementation approaches?6问Promise、async/await 与事件循环Event Loop之间的关系是什么English:What is the relationship between Promise, async/await, and the Event Loop in JavaScript?问你如何看待 Webpack 与 Vite 的差异在什么场景下选择哪一个English:How do you compare Webpack and Vite, and in what scenarios would you choose one over the other?问前端如何防止 XSS 和 CSRF 攻击English:How can you prevent XSS and CSRF attacks on the frontend?问你如何看待服务端渲染SSR和客户端渲染CSR的优缺点在什么场景下更适合使用 SSREnglish:What are the advantages and disadvantages of Server-Side Rendering (SSR) compared to Client-Side Rendering (CSR)? In what scenarios is SSR more suitable?Three.js 问题打开页面 https://codepen.io/guofei0723/pen/VYapvYa?editors0010把立方体的初始颜色改成红色有哪些方法可以让立方体看上去大一些鼠标悬浮到立方体时让它上下跳动一下解释下页面的代码qian