前端面试题—面试题整理(8)

一 面试题汇总(Boss直聘分享-百安居一面)

1. react用过哪些hooks？
2. 数组合并有哪些方法
3. 请求参数如何防篡改
4. localStorage如何跨域获取
5. 如何写一个split方法并覆盖数组的原方法？
6. forEach循环和for循环哪个性能高？forEach循环可以中断吗？
7. 前端性能优化？
8. 做的最好和最有成就感的项目是哪个
9. 后面基本就是问你的性格优缺点，爱好，前同事对你的评价，未来规划之类的，平时怎么学习之类的

二 面试题解答(仅供参考)

2.1 react用过哪些hooks？

React 提供了许多不同的 Hooks，用于在函数组件中添加状态、副作用和其他 React 特性。
以下是一些常用的 React Hooks：

1-useState：用于在函数组件中添加状态管理功能。
它返回一个状态值和一个更新状态的函数，可以通过解构赋值来使用。

2-useEffect：用于在函数组件中执行副作用操作，比如数据获取、订阅事件、手动管理 DOM 等。
它接收一个函数作为参数，在组件渲染后执行该函数。

3-useContext：用于在函数组件中访问 React 的上下文（context）。
它接收一个 context 对象作为参数，并返回该 context 的当前值。

4-useReducer：类似于 Redux 中的 reducer，用于处理复杂的状态逻辑。
它接收一个 reducer 函数和初始状态作为参数，并返回当前状态和一个dispatch函数，用于触发状态更新。

5-useRef：用于在函数组件中创建一个可变的 ref 对象，可以用来存储任意可变值，
类似于类组件中的 this.refs。

6-useCallback：用于缓存回调函数，类似于 useMemo，但是返回的是一个记忆化的回调函数。

7-useMemo：用于缓存计算结果，可以在函数组件中优化性能，避免重复计算。

8-useLayoutEffect：与useEffect类似，但是在浏览器完成布局和绘制之后立即执行，而不是在DOM更新之后。

9-useImperativeHandle：用于在函数组件中向父组件暴露子组件的实例值，
类似于在类组件中使用 forwardRef。

10-useDebugValue：用于在开发工具中显示自定义 Hook 的 label。

以上是一些常用的 React Hooks，每个 Hook 都有其特定的用途和优势，
可以根据需要选择合适的 Hook 来使用。

2.2 数组合并有哪些方法

在 JavaScript 中，有几种方法可以合并数组，下面是一些常用的方法：

1-concat() 方法：

concat() 方法用于合并两个或多个数组，并返回一个新数组，不会修改原始数组。
示例：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]

2-扩展运算符（Spread Operator）：

扩展运算符 ... 可以将一个数组展开为独立的元素，并在合并数组时使用。
示例：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

3-push() 方法：

push() 方法可以将一个数组的元素添加到另一个数组末尾，会修改原始数组。
示例：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2); // arr1 变为 [1, 2, 3, 4, 5, 6]

4-splice() 方法：

splice() 方法可向数组中添加或删除元素，并返回被删除的元素，也可以用来合并数组。
示例：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.splice(arr1.length, 0, ...arr2); // arr1 变为 [1, 2, 3, 4, 5, 6]

5-使用 Array.from() 方法：

Array.from() 方法可以将类数组对象或可迭代对象转换为一个真正的数组，并可以在转换时合并数组。
示例：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = Array.from(arr1).concat(arr2); // [1, 2, 3, 4, 5, 6]
这些都是常见的合并数组的方法，可以根据具体情况选择最适合的方法。

2.3 请求参数如何防篡改

防止请求参数被篡改是确保数据传输安全性的重要一环。以下是一些常见的方法来防止请求参数被篡改：

1-使用 HTTPS 协议：

使用 HTTPS 协议进行数据传输可以确保数据在传输过程中的安全性，
因为 HTTPS 通过 SSL/TLS 加密通道来保护数据的完整性和机密性。

2-使用加密算法：

对请求参数进行加密可以防止参数在传输过程中被窃取或篡改。
常见的加密算法包括对称加密算法（如 AES）和非对称加密算法（如 RSA）等。

3-数字签名：

使用数字签名技术可以确保数据的完整性和真实性。
发送方使用私钥对数据进行签名，接收方使用公钥对签名进行验证，从而确保数据在传输过程中没有被篡改。

4-防止重放攻击：

防止重放攻击是指防止黑客利用已经截获的合法请求数据再次发送到服务器，以达到攻击的目的。
可以使用时间戳、随机数或一次性 token 等方法来防止重放攻击。

5-参数校验：

在服务器端对接收到的请求参数进行严格的校验，包括参数的格式、长度、类型等，
以防止恶意篡改或非法注入攻击。

6-敏感信息加密：

对于敏感信息（如用户密码、身份证号等），应该在客户端进行加密处理，
并在传输过程中尽可能减少敏感信息的传输，以降低泄露风险。

7-使用防护工具：

使用防火墙、Web 应用防火墙（WAF）等安全工具对请求进行监控和过滤，及时发现和阻止恶意请求。

综上所述，为了防止请求参数被篡改，需要综合考虑数据传输安全、加密算法、数字签名、
防重放攻击、参数校验等多方面的因素，并在实际开发中采取相应的安全措施来保护数据的安全性。

2.4 localStorage如何跨域获取

在浏览器中，localStorage 是以域名为单位进行存储的，
因此无法直接跨域获取其他域名下的 localStorage 数据。
每个域名下的 localStorage 是相互隔离的，
浏览器会限制脚本访问其他域名下的 localStorage，以确保用户数据的安全性。

但是，可以通过以下方法间接实现跨域获取其他域名下的 localStorage 数据：

1-使用代理页面：

可以通过在同域名下的代理页面中获取目标域名下的 localStorage 数据，然后将数据返回给原页面。

2-使用跨域通信技术：

使用浏览器支持的跨域通信技术（如跨文档消息、WebSocket、CORS 等），
在不同域名的页面之间进行通信，并间接获取 localStorage 数据。

3-使用服务器中转：

可以通过在服务器端进行数据中转，将目标域名下的 localStorage 数据获取到服务器端，
然后再通过接口暴露给客户端。

4-使用跨域共享方案：

某些浏览器提供了跨域共享方案（如 Safari 的 Storage Access API），
允许用户在不同域名下共享 localStorage 数据，但需要用户明确授权。

需要注意的是，跨域获取 localStorage 数据可能存在安全风险，
应当谨慎使用，并遵循浏览器的安全策略和最佳实践。

2.5 如何写一个split方法并覆盖数组的原方法？

你可以通过扩展数组的原型对象来实现自定义的 split 方法，并覆盖数组的原生 split 方法。
下面是一个简单的示例代码：

// 定义自定义的 split 方法
Array.prototype.split = function(separator) {
  const result = [];
  let currentChunk = [];
  
  for (let i = 0; i < this.length; i++) {
    if (this[i] === separator) {
      result.push(currentChunk.join(''));
      currentChunk = [];
    } else {
      currentChunk.push(this[i]);
    }
  }
  
  result.push(currentChunk.join(''));
  return result;
};

// 测试自定义的 split 方法
const str = 'Hello,World';
const arr = str.split(',');
console.log(arr); // ["Hello", "World"]

在上面的代码中，我们通过扩展数组的原型对象 Array.prototype 来定义了一个新的 split 方法。
这个方法接收一个分隔符作为参数，然后遍历数组元素，
根据分隔符将数组拆分成多个子串，并返回一个包含这些子串的新数组。

需要注意的是，修改内置对象的原型对象可能会导致一些意外的副作用，并且可能会与其他代码产生冲突。
因此，在实际项目中，最好避免修改内置对象的原型，除非确实有必要且了解其可能带来的影响。

2.6 forEach循环和for循环哪个性能高？forEach循环可以中断吗？

在性能方面，for循环通常比forEach循环更快，因为for循环是JavaScript中最基本的循环结构，执行效率较高。
而 forEach 循环则是一种高阶函数，需要额外的函数调用开销，因此相对而言效率较低。

关于 forEach 循环能否中断的问题，它本身不支持中断。
一旦开始遍历数组，forEach 会对数组中的每个元素都执行一次回调函数，无法在中途停止。
然而，可以通过在回调函数中引入外部状态来模拟中断效果，如抛出异常或使用 return 语句提前结束循环。
但这种做法不够直观且不符合 forEach 方法的本意。

而 for 循环则可以在任意时刻使用 break 语句提前跳出循环，因此更适合需要中断循环的情况
。因此，如果需要在循环过程中进行中断操作，建议使用 for 循环，
而对于不需要中断的简单遍历操作，forEach 循环是一个更简洁的选择。

2.7 前端性能优化？

前端性能优化是提高网站或 Web 应用性能的重要手段，可以改善用户体验、降低服务器负载，
并提升搜索引擎排名。以下是一些常见的前端性能优化方法：

1-减少 HTTP 请求：
合并、压缩和缓存文件（如 CSS、JavaScript、图片等），减少页面加载所需的 HTTP 请求次数。

2-使用 CDN 加速：
使用内容分发网络（CDN）分发静态资源，将资源缓存到离用户更近的服务器上，加快资源加载速度。

3-优化图片：
使用适当的图片格式（如 JPEG、PNG、WebP）和压缩率，尽量减小图片大小。
使用 CSS Sprites 或者 SVG 替代小图标，减少 HTTP 请求。

4-延迟加载：
将页面中不是立即需要的资源延迟加载，比如图片懒加载、按需加载JavaScript等，提高页面的初始加载速度。

5-减少重绘和回流：
尽量使用 CSS 动画代替 JavaScript 动画，减少重绘和回流。
避免频繁修改 DOM 结构和样式，可以使用文档片段或隐藏元素等方法优化。

6-代码优化：
使用异步加载 JavaScript，将不影响页面展示的 JavaScript 代码放到页面底部，
或者使用 defer 和 async 属性加载。
避免使用过多的全局变量和全局函数，优化 JavaScript 代码结构和性能。

7-缓存：
使用合适的缓存策略，包括浏览器缓存、HTTP 缓存控制、ETag、Last-Modified等，减少资源的重复请求。

8-移动端优化：
使用 CSS3 动画代替 JavaScript 动画，使用硬件加速提高动画性能。
避免使用过多的内存和 CPU 占用的操作，优化页面的性能和功耗。

9-网络优化：
使用 HTTP/2 或者 HTTP/3 协议，减少网络连接的建立和数据传输的延迟。
使用 WebSocket 或者长连接等技术，减少网络请求的频率，提高网络效率。

10-监控和优化：
使用性能监控工具(如 Google PageSpeed Insights、Lighthouse、WebPageTest 等)分析页面性能，并优化性能指标。

以上是一些常见的前端性能优化方法，可以根据实际项目需求和情况选择合适的优化策略。
综合考虑页面内容、用户设备、网络环境等因素，全方位提升网站或 Web 应用的性能。

2.8 做的最好和最有成就感的项目是哪个

如果你想提及你自己做的比较好的项目，以下是一些可能有助于描述的方面：

1-项目描述：简要介绍你的项目是做什么的，它解决了什么问题，以及它的主要功能和特点是什么。
2-技术栈：说明你在项目中使用了哪些技术和工具，比如编程语言、框架、数据库等。
3-创新点：描述你的项目中的创新之处，可能包括新颖的功能、优化的算法、用户体验改进等方面。
4-团队合作：如果是团队项目，可以提及你与团队成员之间的协作方式和分工情况。
5-挑战和解决方案：谈谈在项目开发过程中遇到的挑战，以及你是如何克服这些挑战的。
6-成果和影响：如果有的话，可以分享一些项目的成果和影响，比如用户数量、用户反馈、商业价值等方面。

在描述自己的项目时，尽量客观、清晰地表达你的想法，让别人能够了解你的项目以及你在项目中的贡献和成就

2.9 后面基本就是问你的性格优缺点，爱好，前同事对你的评价，未来规划之类的，平时怎么学习之类的

三 图片

四 参考

• ChatGPT3.5