React 前端口试根本标题

王柳  金牌会员 | 2024-8-16 21:57:01 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 541|帖子 541|积分 1623

原文链接:https://www.hezebin.com/publish/668caed8c045ae8026909d34
JavaScript

js 数据类型

JavaScript 中的数据类型可以分为两大类:基本数据类型(Primitive Types)和对象类型(Object Types)。下面是它们的详细介绍:
基本数据类型(Primitive Types)


  • 数字(Number):整数和浮点数统一使用 Number 类型表示,包括整数和浮点数。
  • 字符串(String):字符串表示文本数据,使用单引号 ’ 或双引号 " 括起来的字符序列。
  • 布尔值(Boolean):表示逻辑上的 true 或 false 值。
  • 空值(Null):表示一个空值对象,JavaScript 中的数据类型之一。
  • 未定义(Undefined):表示一个未定义的值或对象,通常在声明变量但未给变量赋值时使用。
  • 符号(Symbol)(ES6 新增):表示唯一的标识符。
对象类型(Object Types)


  • 对象(Object):是 JavaScript 中的基本数据类型之一,表示一个无序的聚集,由键值对构成。
  • 函数(Function):JavaScript 中的函数是一种特殊的对象,具有可调用的行为。
  • 数组(Array):表示按序分列的聚集,可以通过数字索引访问元素。
  • 日期(Date):表示日期和时间。
  • 正则表达式(RegExp):用于匹配字符串的模式。
特殊类型


  • BigInt:表示任意精度的整数(ES10 新增)。
  • 原始包装类型:通过 new 关键字创建的 Number、String 和 Boolean 类型,现实上是对象,但表现类似于基本数据类型。
类型检测
在 JavaScript 中,可以使用 typeof 运算符来检测数据类型:
typeof null 返回 ‘object’,这是 JavaScript 的一个历史遗留标题,现实上 null 是基本数据类型。
深拷贝、浅拷贝的区别?如何实现深拷贝和浅拷贝?

浅拷贝
浅拷贝是指将原始数据的第一层进行复制,如果数据布局中包罗引用类型(如对象或数组),则复制的是引用而不是现实的数据。因此,修改复制后的数据会影响到原始数据。浅拷贝常见的实现方式包括:


  • 使用布局运算符 … 或者 Object.assign() 方法来复制对象。
  • 使用 Array.prototype.slice() 方法来复制数组。
深拷贝
深拷贝是指完全复制原始数据,包括所有层级的对象和数组,修改复制后的数据不会影响到原始数据。深拷贝可以通过递归遍历数据布局,并复制每一个子对象或数组来实现。由于深拷贝涉及到递归复制,因此实现起来可能会比力复杂,也需要考虑循环引用的情况。常见的实现方式包括:


  • 使用递归函数来复制对象或数组的每一层。
  • 使用 JSON.parse(JSON.stringify(obj)) 的方式来实现深拷贝,但要注意该方法对于函数、正则表达式等特殊对象的处理惩罚不完全。
ES6的一些新特性?



  • let 和 const 声明: 引入了块级作用域的 let 和常量声明的 const。
  • 箭头函数: 简化了函数的书写,可以更方便地处理惩罚 this 的指向标题。
  • 模板字符串: 使用反引号 `` 包裹字符串,可以在字符串中嵌入变量和换行符。
  • 默认参数: 答应函数参数设定默认值,简化函数调用时的参数处理惩罚。
  • 解构赋值: 可以从数组或对象中提取值,赋给变量。
  • 扩展运算符和剩余参数: 使用 … 对数组进行展开或收集参数。
  • 对象字面量的增强: 答应在对象字面量中简写属性和方法名。
  • class 和继承: 引入了类的概念,可以更方便地进行面向对象的编程。
  • 模块化: 引入了 import 和 export 关键字,支持模块化的开辟方式。
  • Promise: 提供了原生的 Promise 对象,简化了异步编程。
    迭代器和天生器: 提供了更灵活的迭代器和天生器函数,简化了迭代的操作。
  • Symbol: 引入了一种新的原始数据类型 Symbol,表示独一无二的值。
  • Map 和 Set: 引入了 Map 和 Set 数据布局,提供了更好的键值对和聚集的操作方式。
  • Proxy 和 Reflect: 提供了更强大的元编程能力,可以拦截和定义对象的基本操作。
  • Promise.allSettled: 返回一个在所有给定的 promise 已经 fulfilled 或 rejected 后剖析的 promise,并带有一个对象数组,每个对象表示对应的 promise 效果。
js箭头函数?



  • 语法简便:箭头函数的语法比传统的函数表达式更为简便,特别是在只有一个参数和单一表达式的情况下,可以省略括号和 return 关键字。
  • 词法作用域:箭头函数不会创建自己的 this、arguments、super 或 new.target,它们会继承外围作用域的这些值。
  • 没有自己的 this:箭头函数内部的 this 是词法上绑定的,指向定义时所在的作用域的 this 值,而不是实行时的 this。
  • 不能用作构造函数:箭头函数没有 [[Construct]] 方法,不能用作构造函数,不能通过 new 关键字调用。
js中常用的数组相关方法?



  • push(): 在数组末尾添加一个或多个元素,返回新数组的长度。
  • pop(): 从数组末尾移除最后一个元素,返回该元素。
  • shift(): 从数组开头移除第一个元素,返回该元素。
  • unshift(): 在数组开头添加一个或多个元素,返回新数组的长度。
  • concat(): 连接两个或多个数组,返回一个新的数组。
  • slice(): 返回一个从开始到结束选择的数组的一部门,原数组不变。
  • splice(): 通过删除现有元素和/或添加新元素来修改数组,返回被删除的元素。
  • forEach(): 对数组的每个元素实行一次提供的函数。
  • map(): 创建一个新数组,其效果是该数组中的每个元素调用一个提供的函数后的返回值。
  • filter(): 创建一个新数组,其包罗通过所提供函数实现的测试的所有元素。
  • reduce(): 对数组中的每个元素实行一个提供的函数(从左到右),将其效果汇总为单个返回值。
  • find(): 返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined。
  • findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引,否则返回 -1。
  • indexOf(): 返回数组中第一次出现的指定元素的索引,如果不存在则返回 -1。
  • includes(): 判断一个数组是否包罗一个指定的值,如果是则返回 true,否则返回 false。
  • join(): 将数组的所有元素连接成一个字符串,返回这个字符串。
  • reverse(): 将数组中元素的位置颠倒,返回该数组(改变原数组)。
  • sort(): 对数组的元素进行排序,返回该数组(改变原数组)。
  • some(): 测试数组中的某些元素是否通过了由提供的函数实现的测试。
  • every(): 测试数组中的所有元素是否都通过了由提供的函数实现的测试。
js 中Map和obj的区别?

键类型
Object: 键必须是字符串或 Symbol,其他类型会被隐式转换为字符串。
Map: 键可以是任何类型,包括对象、函数、原始数据类型。
键的次序
Object: 键的次序不严酷包管是插入次序,但数字键会按数值排序。
Map: 键的次序完全按照插入次序。
属性和方法
Object: 继承自 Object.prototype,有许多默认的属性和方法,可能会与自定义的键冲突。
Map: 没有默认的属性和方法,只包罗明确的键值对,不会与任何内置属性冲突。
性能
Object: 在频繁增删键值对时性能可能不如 Map 高效。
Map: 设计用于存储和管理键值对,通常在频繁增删键值对时比 Object 更高效。
大小
Object: 没有直接的方法获取对象中键值对的数量,必须手动计算。
Map: 提供了 size 属性,直接返回键值对的数量。
序列化和剖析
Object: 更容易被 JSON 序列化和剖析。
Map: 需要转换为数组或对象才气被 JSON 序列化和剖析。
cookie localstorage和sessionstorage的区别,在域名上的区别?



  • Cookie:存储在客户端欣赏器,有大小限制,用于会话标识和跟踪用户状态。
  • Session:存储在服务器端,无大小限制,用于保持用户会话状态。
  • LocalStorage:长期存储在客户端欣赏器,用于持久化数据。
  • SessionStorage:临时存储在客户端欣赏器,仅在当前会话有效。
域名上的区别总结


  • Cookie:可以设置为特定域名及其子域名下共享访问。
  • LocalStorage:每个域名下的所有页面共享相同的存储空间,不能跨域名访问。
  • SessionStorage:仅在当前会话中有效,也不能跨域名访问。
若要并行发送 2 个网络请求,只要此中一个失败就失败该渲染失败页面,如何实现?

Promise.all 是用于并行实行多个异步操作,并等待它们全部完成后再实行后续操作的工具。它汲取一个包罗多个 Promise 的数组作为参数,当所有的 Promise 都成功(resolve)时,它才会触发成功(resolve)状态,返回一个包罗每个 Promise 效果的数组;如果任意一个 Promise 失败(reject),则会立刻触发失败(reject)状态,返回第一个失败的 Promise 的效果。


  • Promise.all 方法汲取一个 Promise 数组作为参数,并在所有 Promise 都成功完成(即全部变为 resolved 状态)或有一个 Promise 失败(变为 rejected 状态)时返回一个新的 Promise。
  • Promise.race 方法同样汲取一个 Promise 数组作为参数,但是它只关注第一个完成的 Promise(无论成功还是失败),并返回一个新的 Promise。
  • Promise.allSettled 方法汲取一个 Promise 数组作为参数,与 Promise.all 不同的是,它会等待所有 Promise 完成(不论成功或失败),并返回一个包罗所有 Promise 状态(fulfilled 或 rejected)的对象数组。
谈谈对js事件循环的理解?

JavaScript 事件循环(Event Loop)是 JavaScript 运行机遇制的一部门,用于处理惩罚异步操作。理解事件循环是理解 JavaScript 异步编程和非阻塞 I/O 操作的关键。以下是对事件循环的详细解释:
事件循环的基本概念
JavaScript 是单线程的,这意味着它一次只能实行一个任务。然而,JavaScript 通过事件循环机制能够处理惩罚异步操作,从而在实行长时间任务时仍然保持响应。
栈(Call Stack)
调用栈是一个栈布局,用于存储待实行的函数调用。当一个函数被调用时,它会被压入栈中。当函数实行完毕后,它会从栈中弹出。
堆(Heap)
堆是一个用来存储对象和函数等引用类型的内存空间。
队列(Queue)
队列用于存储待处理惩罚的消息或回调函数。这些消息通常来自于异步操作,例如事件处理惩罚、定时器、HTTP 请求等。
事件循环的工作机制

  • 实行同步代码:所有同步任务会在调用栈上按次序实行。
  • 处理惩罚异步代码:异步任务的回调函数会被放入任务队列中。
  • 事件循环:事件循环不断检查调用栈是否为空,如果为空,则检查任务队列中是否有待处理惩罚的回调函数。如果任务队列中有回调函数,则将其压入调用栈中并实行。
js 任务队列

在 JavaScript 中,任务队列(Task Queue)是一个用于管理待实行任务的队列,它是实现异步实行的紧张机制之一。理解任务队列对于理解 JavaScript 异步编程模子至关紧张。以下是关于任务队列的几个关键概念和工作原理:
任务队列的概念
任务队列是用来存放异步任务的队列,这些任务会在特定条件下实行。在 JavaScript 中,任务队列主要包括以下几种:


  • 宏任务队列(Macro Task Queue):由欣赏器提供的事件队列,比如 setTimeout、setInterval、setImmediate(Node.js 情况)、I/O、UI 渲染等操作。
  • 微任务队列(Micro Task Queue):用来存放需要立刻实行的任务,比宏任务实行优先级高。典范的微任务包括 Promise 的 then 方法和 MutationObserver 的回调函数。
    实行过程
    JavaScript 引擎会持续实行任务队列中的任务,按照以下步骤实行:
  • 实行同步任务:按照次序实行当前调用栈中的所有同步任务。
  • 实行微任务:当前调用栈中的所有同步任务实行完毕后,会立刻实行微任务队列中的所有任务。微任务实行完毕后不会立刻实行下一个宏任务,而是继续检查是否有新的微任务需要实行,直到微任务队列为空。
  • 实行宏任务:微任务队列为空后,从宏任务队列中取出一个任务实行。实行完宏任务后,再次实行微任务,如此循环。
    示例
  1. console.log('Start');
  2. setTimeout(() = {
  3.   console.log('Timeout');
  4. }, 0);
  5. Promise.resolve().then(() = {
  6.   console.log('Promise');
  7. });
  8. console.log('End');
复制代码
输出次序是:
  1. Start
  2. End
  3. Promise
  4. Timeout
复制代码
什么情况下会导致内存泄漏没法垃圾回收

内存泄漏是指步伐中已经不再需要使用的内存,却由于某种原因没有被释放。JavaScript中的内存泄漏通常是由于以下情况导致的:
未整理的计时器或回调函数:
如果设置了定时器或者回调函数,但是在不再需要它们的时候没有被整理,它们会继续占用内存。
  1. function startTimer() {
  2.   setInterval(function() {
  3.     // do something
  4.   }, 1000);
  5. }
  6. startTimer(); // 没有停止定时器的代码,会导致定时器一直存在,内存不会被释放
复制代码
闭包:
闭包可以使得函数保持对其外部作用域的引用,导致外部作用域中的变量无法被垃圾回收。
  1. function createClosure() {
  2.   let bigObject = new Array(1000000); // 大对象
  3.   return function() {
  4.     // 使用 bigObject,但函数执行完后 bigObject 仍然被引用,无法被回收
  5.   };
  6. }
  7. let closureFn = createClosure();
  8. closureFn();
复制代码
全局变量:
全局变量一旦定义,会一直存在于内存中直到页面关闭或者被显式释放。
  1. let globalVar = new Array(1000000); // 大对象,全局变量
复制代码
未释放的DOM节点引用:
如果JavaScript代码中保留了对DOM节点的引用,纵然DOM节点从页面中移除,也无法被垃圾回收。
  1. let element = document.getElementById('someElement');
  2. element.addEventListener('click', function() {
  3.   // element 还持有对 DOM 节点的引用
  4. });
复制代码
循环引用:
对象之间形成相互引用,纵然它们彼此不再使用,也无法被垃圾回收。
  1. let obj1 = {};
  2. let obj2 = {};
  3. obj1.ref = obj2;
  4. obj2.ref = obj1;
复制代码
内存泄漏的常见情况:


  • 长时间运行的Web应用步伐,例如单页应用(SPA),可能会由于长时间保持大量数据或对象在内存中而导致内存泄漏。
  • 未处理惩罚的异常和错误,可能导致步伐逻辑无法正常结束,使得某些资源未能精确释放。
    制止内存泄漏的方法:
  • 及时整理定时器和回调函数,确保不再需要时及时制止。
  • 制止太过使用闭包,在不需要时手动释放闭包引用的外部变量,使用完后主动设置为 null。
  • 减少全局变量的使用,尽量使用局部变量或模块化管理。
  • 警惕处理惩罚DOM节点引用,确保不再需要时及时排除引用。
  • 制止循环引用,设计数据布局时注意制止对象之间相互引用。
理解和制止内存泄漏是优化JavaScript应用步伐性能和稳定性的紧张步骤之一。
CSS

width:auto 和 width:100%的区别?



  • width: auto
    默认宽度:width: auto 是元素的默认宽度设置。对于块级元素(如 div),它意味着元素将尽可能地宽,占据其父容器的全部可用宽度,减去 padding、border 和 margin。
    顺应内容:对于内联元素(如 span)或者非块级元素(如 img),width: auto 通常意味着元素的宽度将根据其内容的宽度自动调解。
    应用场景:适用于希望元素根据其内容或父容器的变化自动调解宽度的情况。特别是在不确定内容宽度或不希望强制占满父容器时使用。
  • width: 100%
    占满父容器:width: 100% 表示元素的宽度将占据其父容器的 100%,减去 padding、border 和 margin。无论父容器有多宽,子元素都将顺应这个宽度。
    固定宽度:相对于父容器的固定宽度设置,而不是根据内容自动调解。
    应用场景:适用于希望元素始终占满父容器的情况,例如创建响应式布局时。
css position属性的值有哪些?各个值是什么寄义?

CSS 的 position 属性用于指定元素的定位方式。不同的值会影响元素在文档中的定位和布局方式。以下是 position 属性的主要值及其寄义:

  • static (默认值)
    描述:这是元素的默认定位方式,元素按照正常的文档流进行布局。
    特性:元素位置由页面布局决定,不受top、right、bottom、left 属性影响。
    使用场景:通常用于标准文档流中的元素。
  • relative
    描述:元素相对于其正常位置进行定位。
    特性:元素仍然占据在文档流中的空间,但可以通过top、right、bottom、left 属性进行相对移动。
    使用场景:当需要在保留元素原位置的情况下对其进行微调时。
  • absolute
    描述:元素相对于最近的已定位(relative、absolute、fixed、sticky)的先人元素进行定位。如果没有已定位的先人元素,则相对于初始包罗块(通常是视口)。
    特性:元素离开文档流,不占据原位置的空间,可以通过top、right、bottom、left 属性精确定位。
    使用场景:用于精确定位元素,不影响其他元素布局。
  • fixed
    描述:元素相对于视口(viewport)进行定位。
    特性:元素离开文档流,不占据原位置的空间,始终固定在视口的指定位置,纵然滚动页面也不会移动。
    使用场景:用于创建固定在屏幕上的元素,如导航栏、返回顶部按钮等。
  • sticky
    描述:元素根据用户的滚动位置进行定位,在relative和fixed定位之间切换。
    特性:元素在凌驾特定阈值之前是相对定位的,之后变为固定定位。阈值通常由top、right、bottom、left 属性定义。
    使用场景:用于创建在滚动时粘性效果的元素,如粘性头部或侧边栏。
有使用过 Flex 布局吗?聊聊 Flex 布局?

主要关注剩余空间自顺应,元素比例关系,对齐方式
React

React 常用的 Hook?

useRef、useState、useMemo、memo、useCallback、useEffect
useState 函数式状态更新和非函数式的区别?setCount(count+1);setCount(count-1) 效果是什么?

答案:-1,React 状态更新是异步的,改变值后不会立刻重新渲染,而是放入一个队列中,在同一个渲染周期内,相同 state 做 setState 操作时为了制止重复渲染会做肯定优化处理惩罚,非函数式调用时是最后一个操作覆盖前面的,函数式时为了传递最新的值,会依次调用队列中的 set 操作。
useEffect 依赖项是一个数组,改变数组中的元素是否会触发重新副作用?

答案:引用类型数据依赖的是其引用,而不是值,值改变不会触发副作用
React的组件间如何数据通信?



  • 父组件可以通过 props 向子组件传递数据。子组件通过 props 汲取这些数据。
  • 子组件向父组件传递数据通常通过回调函数实现。父组件将一个回调函数作为 prop 传递给子组件,子组件在需要的时候调用这个回调函数,并将数据作为参数传递给父组件。
  • 全局状态管理
  • Context 提供了一种在组件树中共享数据的方法,不必显式地通过组件树的每一层传递 props。
  • Refs 提供了一种访问 DOM 节点或在 class 组件中访问实例方法的方式。
React合成事件



  • 跨欣赏器兼容性:合成事件在不同欣赏器中表现一致,隐藏了底层欣赏器实现的差异性。
  • 事件委派(Event Delegation):React 使用单一事件监听器(event delegation)管理所有事件。这意味着在组件树中的顶层可以捕获所有的事件,而不是在每个节点上都添加事件监听器。
  • 自动绑定:合成事件会自动绑定事件处理惩罚函数的上下文(即 this 的指向),无需手动使用 .bind() 或箭头函数绑定。
  • 事件池:React 会对事件进行池化(pooling),以提高性能。在事件处理惩罚函数实行结束后,合成事件对象会被重用,制止了在事件处理惩罚期间频繁创建和销毁事件对象。
TypeScript

聊聊你对 ts 的使用?

关注常见的类型 type 和 接口 interface 、常用的根本内置泛型Record、Partial、Omit
框架

用过 umi 吗?通常情况下接口都有一个/api 的公共前缀,但是如果在本地开辟情况运行的服务接口都没有带/api前缀,在 umi 下该如何办理

config 下配置 proxy,重写路径,需要认证信息的携带所需 header
办理方案

防抖节流的概念?如何实现防抖和节流

防抖(Debounce)和节流(Throttle)是两种常用的优化技术,用于限制某些事件(如滚动、窗口调解大小、按键输入等)的频繁触发,从而提高性能。
防抖(Debounce)
防抖是一种在事件触发后一段时间内不再触发事件的技术。如果在这段时间内再次触发事件,则重新开始计时。通常用于减少高频率触发的事件处理惩罚,比如用户输入时的自动生存或搜索提示。
实现防抖,以下是一个防抖函数的实现:
  1. function debounce(func, wait) {
  2.   let timeout;
  3.   return function() {
  4.     const context = this;
  5.     const args = arguments;
  6.     clearTimeout(timeout);
  7.     timeout = setTimeout(() => {
  8.       func.apply(context, args);
  9.     }, wait);
  10.   };
  11. }
复制代码
使用示例:
  1. const handleResize = debounce(() => {
  2.   console.log('Window resized');
  3. }, 500);
  4. window.addEventListener('resize', handleResize);
复制代码
在这个例子中,handleResize 函数会在窗口调解大小事件触发 500 毫秒后实行。如果在这段时间内再次触发事件,计时器会重新开始。
节流(Throttle)
节流是一种限制事件触发频率的技术。在特定时间段内,事件处理惩罚函数只会实行一次。常用于限制滚动、鼠标移动等高频率事件的处理惩罚。
实现节流,以下是一个节流函数的实现:
  1. function throttle(func, limit) {
  2.   let inThrottle;
  3.   return function() {
  4.     const context = this;
  5.     const args = arguments;
  6.     if (!inThrottle) {
  7.       func.apply(context, args);
  8.       inThrottle = true;
  9.       setTimeout(() => inThrottle = false, limit);
  10.     }
  11.   };
  12. }
复制代码
使用示例:
  1. const handleScroll = throttle(() => {
  2.   console.log('Scrolled');
  3. }, 1000);
  4. window.addEventListener('scroll', handleScroll);
复制代码
在这个例子中,handleScroll 函数会每隔 1000 毫秒最多实行一次,纵然在这段时间内多次触发滚动事件。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

王柳

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表