2025面试大全（15）

levy
138 阅读45分钟

1. 说说你对 Dom 树的理解

DOM（Document Object Model，文档对象模型）是一种用于表示和操作HTML和XML文档的编程接口。它将文档表示为一个由节点组成的树形结构，其中每个节点代表文档中的一个部分，如元素、属性或文本。 以下是对DOM树的一些关键理解：

  1. 树形结构：DOM将文档表示为一个树形结构，其中HTML文档的根节点通常是<html>元素。每个元素、属性、文本等都表示为一个节点，这些节点以层次结构组织。
  2. 节点类型：DOM树中的节点分为不同类型，包括元素节点（如<div>、<p>等）、属性节点（如class、id等）、文本节点（如元素内的文本内容）、注释节点等。
  3. 导航和操作：通过DOM，开发者可以遍历文档的结构，访问和操作任何节点。例如，可以更改元素的属性、添加或删除节点、修改文本内容等。
  4. 事件处理：DOM允许将事件处理器与文档中的元素关联起来，以便在发生特定事件（如点击、按键等）时执行代码。
  5. 动态更新：DOM是动态的，意味着它可以实时反映文档的当前状态。当文档的内容发生变化时，DOM树也会相应更新。
  6. 跨平台：DOM是一种跨平台的API，可以在不同的浏览器和编程环境中使用。
  7. 标准化的API：DOM是由W3C（World Wide Web Consortium）标准化的，确保了不同浏览器和工具的一致性。
  8. 性能考虑：虽然DOM提供了强大的文档操作能力，但频繁的DOM操作可能会导致性能问题，尤其是在大型文档或复杂的Web应用中。因此，开发者需要谨慎使用DOM操作，以优化性能。
  9. 与HTML的关系：HTML是网页的标记语言，而DOM是HTML文档的编程接口。当浏览器加载HTML文档时，它会创建一个对应的DOM树，以便JavaScript等客户端脚本语言可以与之交互。
  10. JavaScript与DOM：JavaScript经常用于操作DOM，以实现动态的网页效果。通过JavaScript，可以查询、修改、添加或删除DOM节点，从而改变网页的内容和结构。 理解DOM树是Web开发的基础，它使得开发者能够以编程方式与网页内容交互，实现丰富的用户界面和动态效果。

2. 使用 React hooks 怎么实现类里面的所有生命周期？

在 React 中，使用函数组件和 hooks 可以模拟类组件中的生命周期方法。以下是如何使用 hooks 来实现类组件生命周期的对应功能：

  1. constructor:
    • 在函数组件中，你不需要一个构造函数。你可以直接在函数组件的顶部初始化 state 和其他变量。
  2. componentDidMount:
    • 使用 useEffect hook，并传递一个空数组作为第二个参数，这样回调函数就只会在组件挂载后执行一次。
    useEffect(() => {
  // componentDidMount logic
}, []);
  3. componentDidUpdate:
    • 同样使用 useEffect hook，但根据需要更新依赖数组。如果依赖数组为空，则不会在更新时触发。
    useEffect(() => {
  // componentDidUpdate logic
}, [dependencies]); // 添加依赖项
  4. componentWillUnmount:
    • 在 useEffect 的回调函数中返回一个清理函数，这个函数会在组件卸载前执行。
    useEffect(() => {
  // componentDidMount or componentDidUpdate logic
  return () => {
    // componentWillUnmount logic
  };
}, [dependencies]);
  5. shouldComponentUpdate:
    • 使用 React.memo 高阶组件来包裹函数组件，并通过第二个参数传递一个比较函数来决定是否更新组件。
    const MyComponent = React.memo(function MyComponent(props) {
  // component logic
}, areEqual); // areEqual 是一个比较函数
  6. componentDidCatch:
    • 使用 ErrorBoundary 组件来捕获子组件中的错误。这不能直接在函数组件中实现，但你可以创建一个类组件作为错误边界。
    class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // 你也可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

在函数组件中，你不需要显式地处理所有这些生命周期方法。很多情况下，使用 state 和 effects 就足以处理组件的副作用和状态变化。记住，函数组件和 hooks 的设计初衷是为了简化组件逻辑和提供更直观的数据流。

3. 如何把一个对象变成可迭代对象？

在JavaScript中，要使一个对象变为可迭代对象，你需要实现一个特殊的符号函数[Symbol.iterator]。这个函数应该返回一个迭代器，迭代器是一个对象，它实现了next()方法，该方法返回一个包含两个属性的对象：value和done。 以下是一个简单的例子，展示了如何将一个对象变成可迭代对象：

// 定义一个对象
const myObject = {
  a: 1,
  b: 2,
  c: 3,
  
  // 实现Symbol.iterator符号函数
  [Symbol.iterator]: function() {
    const keys = Object.keys(this);
    let index = 0;
    
    // 返回一个迭代器对象
    return {
      next: () => {
        if (index < keys.length) {
          const key = keys[index];
          index++;
          return { value: [key, this[key]], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};
// 使用for...of循环遍历对象
for (const [key, value] of myObject) {
  console.log(`${key}: ${value}`);
}

在这个例子中，myObject通过实现[Symbol.iterator]方法变成了一个可迭代对象。这个方法返回一个迭代器，迭代器通过next()方法逐个返回对象的键值对。 当你使用for...of循环遍历myObject时，循环会自动调用迭代器的next()方法，直到done属性为true。 这样，你就可以像遍历数组或其他内置可迭代对象一样遍历自定义对象了。这种方法在需要按顺序处理对象属性时非常有用。

4. React.memo() 和 useMemo() 的用法是什么，有哪些区别？

React.memo() 和 useMemo() 都是 React 中用于性能优化的工具，但它们的使用场景和方式有所不同。

React.memo()

React.memo() 是一个高阶组件（HOC），用于对组件进行包装，以防止在props没有改变的情况下重新渲染组件。它类似于类组件中的React.PureComponent。 用法：

const MyComponent = React.memo(function MyComponent(props) {
  /* 组件内容 */
});

特点：

  • React.memo() 对组件的props进行浅比较，如果props没有变化，则不会重新渲染组件。
  • 它适用于纯组件（即组件的渲染结果仅依赖于props）。

useMemo()

useMemo() 是一个hook，用于缓存复杂计算的结果，以避免在每次渲染时重复进行相同的计算。 用法：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

特点：

  • useMemo() 接受两个参数，第一个是一个函数，该函数返回需要缓存的值；第二个是一个依赖数组，只有当依赖数组中的元素发生变化时，才会重新计算缓存的值。
  • 它适用于缓存计算结果，而不是防止组件重新渲染。

区别：

  1. 用途不同：
    • React.memo() 用于防止组件不必要的重新渲染。
    • useMemo() 用于缓存计算结果。
  2. 使用方式不同：
    • React.memo() 是一个高阶组件，用于包裹整个组件。
    • useMemo() 是一个hook，用于在组件内部缓存特定的值。
  3. 比较内容不同：
    • React.memo() 对组件的props进行浅比较。
    • useMemo() 根据依赖数组决定是否重新计算值。
  4. 适用场景不同：
    • React.memo() 适用于纯组件，即组件的渲染结果仅依赖于props。
    • useMemo() 适用于任何需要缓存计算结果以避免重复计算的场景。 在实际使用中，你可以根据需要选择使用React.memo()或useMemo()来优化你的React应用性能。需要注意的是，过度使用这些优化工具可能会导致代码变得复杂且难以维护，因此应该在有明确性能问题时才考虑使用。

5. 编程实现温度转换，已知温度转换的关系式是：华氏度＝32＋摄氏度×1.8，现在要求输入摄氏度，输出对应的华氏度，小数保留两位

好的，我将使用 TypeScript 来实现一个简单的温度转换函数，该函数将摄氏度转换为华氏度，并保留两位小数。以下是实现代码：

function celsiusToFahrenheit(celsius: number): string {
  const fahrenheit = 32 + celsius * 1.8;
  return fahrenheit.toFixed(2);
}
// 示例使用
const celsius = 25; // 假设输入的摄氏度是25
const fahrenheit = celsiusToFahrenheit(celsius);
console.log(`${celsius}摄氏度等于${fahrenheit}华氏度`);

在这段代码中，celsiusToFahrenheit 函数接受一个数字参数（摄氏度），计算对应的华氏度，并使用 toFixed(2) 方法将结果保留两位小数。函数返回的是一个字符串，以便直接显示小数点后两位的华氏度。 你可以将这段代码复制到 TypeScript 环境中运行，查看结果。

6. 找出数组中重复的数字

在 TypeScript 中，找出数组中重复的数字可以通过多种方式实现。以下是其中一种方法，使用一个对象（或 Map）来跟踪每个数字出现的次数，然后返回那些出现次数大于1的数字：

function findDuplicates(nums: number[]): number[] {
  const numCount: { [key: number]: number } = {};
  const duplicates: number[] = [];
  // 计算每个数字出现的次数
  nums.forEach(num => {
    if (numCount[num]) {
      numCount[num] += 1;
    } else {
      numCount[num] = 1;
    }
  });
  // 找出出现次数大于1的数字
  for (const num in numCount) {
    if (numCount[num] > 1) {
      duplicates.push(parseInt(num));
    }
  }
  return duplicates;
}
// 示例使用
const nums = [1, 2, 3, 2, 1, 4, 5];
const duplicates = findDuplicates(nums);
console.log('重复的数字有：', duplicates);

在这个实现中，我们首先遍历数组，使用一个对象 numCount 来记录每个数字出现的次数。然后，我们遍历这个对象，将出现次数大于1的数字添加到 duplicates 数组中。最后，返回这个数组，它包含了所有重复的数字。 请注意，这个实现会返回数组中所有重复的数字，而不仅仅是第一个发现的重复数字。如果数组中的数字非常大或者你想要一个更高效的解决方案，可以考虑使用其他数据结构，如 Set，或者先对数组进行排序。

7. 什么是 CI/CD？

CI/CD 是持续集成（Continuous Integration）和持续交付（Continuous Delivery）的缩写，是一种通过在应用开发阶段引入自动化来频繁向客户交付应用的方法。CI/CD 的目标是通过自动化的流程来提高开发效率、代码质量和交付速度。 持续集成（CI）：

  • 指的是开发者在本地提交代码后，这些变更会自动合并到共享的主分支上。
  • 自动化测试会立即运行，以确保这些变更不会破坏现有的功能。
  • CI 的关键在于频繁地集成代码，这样可以让问题在早期就被发现并解决。 持续交付（CD）：
  • 是 CI 的延伸，指的是在代码通过所有自动化测试后，自动部署到预生产环境或生产环境中。
  • 这使得开发团队可以快速、安全地将新功能交付给用户。
  • CD 的目标是让部署变得简单、无风险，从而可以频繁地进行。 CI/CD 的好处：
  • 提高开发速度：自动化流程减少了手动操作，让开发者可以更专注于编写代码。
  • 提高代码质量：自动化测试确保了代码的稳定性和可靠性。
  • 快速反馈：开发者可以快速得到关于其代码变更的反馈。
  • 降低风险：小批量、频繁的部署减少了部署失败的风险。
  • 更好的协作：CI/CD 鼓励团队之间的协作和沟通。 CI/CD 工具：
  • Jenkins
  • GitLab CI/CD
  • GitHub Actions
  • Travis CI
  • CircleCI
  • Azure DevOps
  • AWS CodePipeline 等 这些工具提供了构建、测试和部署自动化流程的功能，帮助团队实现 CI/CD 实践。

8. 版本号排序

在 TypeScript 中实现版本号排序，首先需要定义版本号的格式和比较规则。通常，版本号由三个数字组成，格式为 major.minor.patch，例如 1.0.2、2.3.1 等。比较版本号时，首先比较 major 号，如果相同则比较 minor 号，最后比较 patch 号。 以下是一个简单的 TypeScript 实现版本号排序的示例：

type Version = string;
function compareVersions(version1: Version, version2: Version): number {
  const v1Parts = version1.split('.').map(Number);
  const v2Parts = version2.split('.').map(Number);
  const length = Math.max(v1Parts.length, v2Parts.length);
  for (let i = 0; i < length; i++) {
    const v1Part = v1Parts[i] || 0;
    const v2Part = v2Parts[i] || 0;
    if (v1Part !== v2Part) {
      return v1Part > v2Part ? 1 : -1;
    }
  }
  return 0;
}
function sortVersions(versions: Version[]): Version[] {
  return versions.sort(compareVersions);
}
// 示例
const versions: Version[] = ['1.0.2', '2.3.1', '1.3.2', '2.3.0', '1.2.3'];
const sortedVersions = sortVersions(versions);
console.log(sortedVersions); // 输出: ['1.0.2', '1.2.3', '1.3.2', '2.3.0', '2.3.1']

在这个示例中：

  • compareVersions 函数用于比较两个版本号。它将版本号字符串分割成数字数组，然后逐个比较每个部分。
  • sortVersions 函数使用 Array.prototype.sort 方法和 compareVersions 函数来对版本号数组进行排序。
  • 最后，我们定义了一个版本号数组 versions 并调用 sortVersions 函数来对其进行排序，然后打印排序后的结果。 这个实现假设版本号是有效的且格式正确。在实际应用中，你可能需要添加额外的错误处理来处理无效的版本号格式。

9. 说说 jsBridge 的原理

JSBridge 是一种用于在原生应用程序（如 iOS 或 Android 应用）和 Web 应用程序之间架起桥梁的技术。它允许原生代码和 JavaScript 代码相互调用，从而实现两者之间的数据交换和功能互操作。JSBridge 的原理主要基于以下几部分：

  1. 消息传递：
    • Web端：在 Web 端，通常通过调用特定的 JavaScript 函数来发送消息到原生端。这些消息可以是简单的字符串，也可以是复杂的 JSON 对象。
    • 原生端：原生端会注册一个 WebView 容器来加载 Web 内容，并设置一个消息处理器来接收来自 Web 端的消息。
  2. URL Scheme 或 JavaScript Interface：
    • URL Scheme：早期的方式是通过自定义的 URL Scheme 来实现通信。Web 端通过改变 WebView 的地址栏（例如 myapp://action?param=value）来触发原生端的事件。
    • JavaScript Interface：现代的方式是原生端注入一个 JavaScript 对象到 WebView 中，Web 端可以直接调用这个对象的函数来与原生端通信。
  3. 原生端处理消息：
    • 当原生端接收到来自 Web 端的消息时，它会解析消息内容，执行相应的原生代码逻辑，如访问设备功能、获取数据等。
  4. 回调机制：
    • 原生端在处理完消息后，通常需要将结果返回给 Web 端。这通过回调函数实现，Web 端在发送消息时可以提供一个回调函数的引用，原生端在处理完消息后调用这个回调函数。
  5. 安全性考虑：
    • 由于 JSBridge 允许 Web 端调用原生功能，因此必须考虑安全性问题。原生端需要验证消息的来源，确保只有可信的 Web 内容才能调用敏感的原生功能。 具体实现方式可能因平台和框架而异，但基本原理是相通的。以下是一个简单的示例： Web端代码：
// 调用原生端的函数
function callNativeMethod(param, callback) {
  if (typeof WebViewBridge !== 'undefined') {
    // 使用 JavaScript Interface
    WebViewBridge.send(param, callback);
  } else {
    // 使用 URL Scheme
    location.href = 'myapp://action?param=' + encodeURIComponent(param);
  }
}
// 处理原生端的回调
function handleNativeCallback(data) {
  console.log('Received data from native:', data);
}

原生端代码（以Android为例）：

// 在 WebView 中注入 JavaScript Interface
webView.addJavascriptInterface(new Object() {
  @JavascriptInterface
  public void send(String param, final Callback callback) {
    // 处理消息
    String result = handleParam(param);
    
    // 调用 Web 端的回调函数
    webView.post(new Runnable() {
      @Override
      public void run() {
        webView.loadUrl("javascript:" + callback + "('" + result + "')");
      }
    });
  }
}, "WebViewBridge");
// 处理来自 Web 端的消息
private String handleParam(String param) {
  // 执行原生逻辑
  return "Processed " + param;
}

在这个示例中，Web 端通过 callNativeMethod 函数发送消息到原生端，原生端通过注入的 WebViewBridge 对象接收消息并处理，然后通过回调将结果返回给 Web 端。

10. 实现一个 useTimeout Hook

useTimeout 是一个自定义的 React hook，它可以让你在组件中方便地设置一个定时器，并在定时器到期时执行一个回调函数。下面是如何实现一个简单的 useTimeout hook：

import { useState, useEffect } from 'react';
function useTimeout(callback, delay) {
  // 使用 useState 来存储定时器的 ID
  const [timerId, setTimerId] = useState(null);
  // useEffect 用于设置和清除定时器
  useEffect(() => {
    // 设置定时器
    const id = setTimeout(callback, delay);
    // 存储定时器 ID
    setTimerId(id);
    // 清除定时器的回调
    return () => {
      clearTimeout(id);
    };
  }, [callback, delay]); // 依赖项数组，当 callback 或 delay 变化时重新设置定时器
  // 返回一个清除定时器的函数
  return () => {
    if (timerId) {
      clearTimeout(timerId);
    }
  };
}
export default useTimeout;

使用示例：

import React, { useState } from 'react';
import useTimeout from './useTimeout';
function MyComponent() {
  const [count, setCount] = useState(0);
  // 设置一个定时器，2秒后增加计数
  useTimeout(() => {
    setCount(count + 1);
  }, 2000);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}
export default MyComponent;

在这个例子中，useTimeout hook 接受两个参数：一个回调函数和一个延迟时间（毫秒）。当组件渲染时，useEffect 会设置一个定时器，在指定的延迟后执行回调函数。如果组件卸载或依赖项发生变化，useEffect 的清理函数会清除定时器。 useTimeout 还返回一个函数，可以用来手动清除定时器，如果需要的话。 请注意，这个简单的实现没有处理延迟为 null 或 undefined 的情况，也没有处理回调函数变化的情况。根据你的需求，你可能需要添加额外的逻辑来处理这些情况。

11. 使用TS实现一个判断传入参数是否是数组类型的方法

在 TypeScript 中，你可以使用类型守卫来创建一个方法，该方法可以判断传入的参数是否是数组类型。以下是一个简单的实现：

function isArray<T>(arg: any): arg is Array<T> {
  return Object.prototype.toString.call(arg) === '[object Array]';
}
// 使用示例
const arr = [1, 2, 3];
const notArr = { foo: 'bar' };
console.log(isArray(arr)); // 输出：true
console.log(isArray(notArr)); // 输出：false

在这个实现中，isArray 函数使用了 TypeScript 的类型谓词 arg is Array<T>，这告诉 TypeScript 编译器，如果函数返回 true，那么 arg 可以被确认为 Array<T> 类型。 另一种方法是使用内置的 Array.isArray 方法，并结合 TypeScript 的类型守卫：

function isArray<T>(arg: any): arg is Array<T> {
  return Array.isArray(arg);
}
// 使用示例
const arr = [1, 2, 3];
const notArr = { foo: 'bar' };
console.log(isArray(arr)); // 输出：true
console.log(isArray(notArr)); // 输出：false

这里，我们直接使用了 Array.isArray 方法，它是 ES5 中引入的，用于判断一个变量是否是数组。TypeScript 的类型守卫确保了类型的安全性。 如果你想要一个更严格的类型检查，确保数组中的元素也是特定类型的，你可以进一步扩展这个函数：

function isArrayOf<T>(arg: any, check: (item: any) => item is T): arg is Array<T> {
  return Array.isArray(arg) && arg.every(check);
}
// 使用示例
const isNumber = (item: any): item is number => typeof item === 'number';
const arr = [1, 2, 3];
const mixedArr = [1, '2', 3];
const notArr = { foo: 'bar' };
console.log(isArrayOf(arr, isNumber)); // 输出：true
console.log(isArrayOf(mixedArr, isNumber)); // 输出：false
console.log(isArrayOf(notArr, isNumber)); // 输出：false

在这个版本中，isArrayOf 函数接受一个额外的参数 check，它是一个类型守卫函数，用于检查数组中的每个元素是否满足特定类型。这样，你就可以确保数组不仅是一个数组，而且数组中的所有元素都是特定类型的。

12. React18新特性

React 18 引入了许多新特性和改进，以下是一些主要的新特性：

  1. 并发渲染（Concurrent Rendering）：
    • React 18 的核心特性之一是并发渲染机制，这使得 React 能够同时准备多个版本的 UI。这种机制可以提高应用的响应性和性能，避免长时间渲染过程中的卡顿或无响应情况。
  2. 新的根节点 API（createRoot）：
    • 引入了 ReactDOM.createRoot API 来替代旧的 ReactDOM.render 方法。使用 createRoot 可以启用 React 18 的新特性，包括并发模式。
  3. 自动批量处理（Automatic Batching）：
    • React 18 实现了自动批量处理，这意味着多个状态更新会自动批处理，从而减少重渲染的次数，提高性能。
  4. startTransition API：
    • startTransition API 允许开发者标记某些更新为过渡状态，从而优先处理用户交互，提高响应性。
  5. Suspense 和流式服务器端渲染：
    • React 18 增强了对 Suspense 的支持，包括流式服务器端渲染。这可以让开发者更轻松地实现数据加载状态的管理和优化。
  6. 放弃对 IE11 的支持：
    • React 18 已经放弃了对 IE11 的支持，如果需要兼容 IE11，需要回退到 React 17 版本。
  7. 其他改进：
    • 包括更好的开发体验、性能优化和稳定性提升。React 18 的许多改进都是为了简化开发过程并提高应用的运行效率。

升级指南

  • 新项目：直接使用 npm 或 yarn 安装最新版依赖。 
    npm i react react-dom --save
npm i @types/react @types/react-dom -D
  • 旧项目：将依赖中的版本号更新到最新，然后删除 node_modules 文件夹，重新安装依赖。 
    npm i

使用示例

import ReactDOM from 'react-dom';
import App from './App';
const root = document.getElementById('root');
ReactDOM.createRoot(root!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

这些新特性和改进使得 React 18 在性能、稳定性和开发体验方面都有了显著的提升。

13. 二叉树的最近公共祖先

二叉树的最近公共祖先（Lowest Common Ancestor，简称 LCA）是指对于给定的两个节点，找到它们在二叉树中的最低公共祖先节点。这个问题是树结构中的一个经典问题，通常有以下几种解法：

1. 递归解法

思路：

  • 如果当前节点是 null 或者等于 p 或 q，则返回当前节点；
  • 递归地在左子树和右子树中查找 p 和 q；
  • 如果在左子树和右子树中都找到了 p 和 q，则当前节点就是它们的最近公共祖先；
  • 如果只在其中一个子树中找到了 p 和 q，则返回该子树中的查找结果。 代码：
class TreeNode:
    def __init__(self, x):
        self.val = x
        self.left = None
        self.right = None
def lowestCommonAncestor(root, p, q):
    if root is None or root == p or root == q:
        return root
    
    left = lowestCommonAncestor(root.left, p, q)
    right = lowestCommonAncestor(root.right, p, q)
    
    if left is not None and right is not None:
        return root
    elif left is not None:
        return left
    else:
        return right

2. 存储父节点解法

思路：

  • 从根节点开始，遍历整棵树，并使用一个字典存储每个节点的父节点；
  • 使用两个集合分别存储从 p 和 q 到根节点的路径；
  • 遍历 p 的路径，找到第一个在 q 的路径中的节点，即为最近公共祖先。 代码：
def lowestCommonAncestor(root, p, q):
    parent = {root: None}
    stack = [root]
    
    while p not in parent or q not in parent:
        node = stack.pop()
        if node.left:
            parent[node.left] = node
            stack.append(node.left)
        if node.right:
            parent[node.right] = node
            stack.append(node.right)
    
    ancestors = set()
    while p:
        ancestors.add(p)
        p = parent[p]
    
    while q not in ancestors:
        q = parent[q]
    
    return q

3. 一遍遍历解法

思路：

  • 从根节点开始遍历，如果当前节点等于 p 或 q，则返回当前节点；
  • 如果左子树和右子树分别返回了 p 和 q，则当前节点就是它们的最近公共祖先；
  • 否则，返回左子树或右子树的查找结果。 代码：
def lowestCommonAncestor(root, p, q):
    if root is None or root == p or root == q:
        return root
    
    left = lowestCommonAncestor(root.left, p, q)
    right = lowestCommonAncestor(root.right, p, q)
    
    if left and right:
        return root
    return left if left else right

以上三种方法都可以有效地找到二叉树中的最近公共祖先。具体使用哪种方法，可以根据实际情况和需求来选择。

14. 给某个资源的链接，如 www.baidu.com/index.html ，请实现一个方法，获取该资源的后缀，如 html

在 TypeScript 中，你可以创建一个函数来解析 URL 并提取资源的后缀。以下是一个简单的实现示例：

function getResourceSuffix(url: string): string {
  // 使用 URL 构造函数解析给定的 URL
  const urlObj = new URL(url);
  // 获取 URL 的路径部分
  const path = urlObj.pathname;
  // 分割路径以获取文件名
  const parts = path.split('/');
  const fileName = parts[parts.length - 1];
  // 分割文件名以获取后缀
  const fileParts = fileName.split('.');
  // 如果文件名包含点，则返回最后一个点之后的部分作为后缀
  if (fileParts.length > 1) {
    return fileParts[fileParts.length - 1];
  }
  // 如果没有后缀，返回空字符串
  return '';
}
// 示例使用
const url = 'https://www.baidu.com/index.html';
const suffix = getResourceSuffix(url);
console.log(suffix); // 输出: html

这个函数首先使用 URL 构造函数来解析给定的 URL，然后获取路径部分，并从中提取文件名。接着，通过分割文件名来获取后缀。如果文件名中包含点（.），则返回最后一个点之后的部分作为后缀；如果没有点，则返回空字符串，表示没有后缀。 请注意，这个实现假设 URL 是有效的，并且路径部分包含文件名。在实际应用中，你可能需要添加额外的错误处理来处理无效的 URL 或其他边缘情况。

15. 你对 babel 了解吗，能不能说说几个 stage 代表什么意思？

Babel 是一个广泛使用的 JavaScript 编译器，它能够将采用最新语法的 JavaScript 代码转换为向后兼容的版本，以便能够运行在旧版本的浏览器或其他环境中。Babel 的核心功能是通过插件实现的，而这些插件又可以根据其成熟度分为不同的阶段（stage）。 在 Babel 中，stage 代表了提案（proposal）在 TC39（Technical Committee 39，即负责制定 ECMAScript 标准的委员会）标准化过程中的不同阶段。每个阶段反映了提案的成熟度和被接受的可能性。以下是各个 stage 的简要说明：

  1. Stage 0 - Strawman（稻草人）：
    • 只是一个想法，可能还没有正式的提案。
    • 主要用于讨论和收集反馈。
  2. Stage 1 - Proposal（提案）：
    • 提案已被正式提出，并进行了初步的讨论。
    • 需要明确问题和可能的解决方案。
  3. Stage 2 - Draft（草案）：
    • 提案已经形成了具体的语法和语义描述。
    • 开始收集实现反馈和进行更深入的审查。
  4. Stage 3 - Candidate（候选）：
    • 提案已经完成了大部分的审查和反馈。
    • 语法和语义在此时应该是稳定的，并准备进行实现测试。
  5. Stage 4 - Finished（完成）：
    • 提案已经完全准备好，并被纳入到正式的 ECMAScript 标准中。
    • 这意味着提案已经得到了广泛的实现和测试，并且被认为是稳定的。 需要注意的是，从 Babel 7 开始，官方已经移除了对 stage 插件的支持，转而鼓励使用具体的提案名称来引入所需的转换。这样做是为了避免 stage 插件带来的不确定性，因为 stage 的变化可能会影响到代码的兼容性。 现在，如果你想要使用某个处于提案阶段的语法，你通常需要安装并使用对应的 Babel 插件，例如 @babel/plugin-proposal-class-properties 用于类属性提案。这样，你就可以更精确地控制你想要使用的语法特性，而不受 stage 插件变化的影响。

16. 说说你对 Iterator, Generator 和 Async/Await 的理解

Iterator（迭代器）： 迭代器是一种设计模式，用于遍历集合中的元素，而不需要暴露集合的内部表示。在JavaScript中，迭代器是一个对象，它实现了next()方法，该方法返回一个包含两个属性的对象：value（当前元素的值）和done（一个布尔值，表示是否已经遍历完所有元素）。 迭代器允许开发者自定义遍历逻辑，使得可以逐个处理集合中的元素。JavaScript中的许多内置类型（如数组、Map、Set等）都实现了迭代器协议，可以通过for...of循环或展开运算符...来遍历。 Generator（生成器）： 生成器是一种特殊的函数，它可以在执行过程中多次暂停和恢复。生成器函数通过function*语法定义，并且可以使用yield关键字来暂停执行并返回一个值。调用生成器函数会返回一个迭代器对象，该对象可以逐个产出由yield表达式提供的值。 生成器的主要用途包括：

  • 实现迭代器：可以轻松地创建自定义的迭代器。
  • 流控制：可以用于复杂的流控制场景，如协作多任务、状态机等。
  • 异步编程：可以用于模拟异步操作，虽然现在更推荐使用Async/Await。 Async/Await： Async/Await是ES2017引入的用于简化异步编程的语法。async关键字用于声明一个异步函数，该函数返回一个Promise。在异步函数内部，可以使用await关键字来暂停函数的执行，直到一个Promise被解决（resolved）或拒绝（rejected）。 Async/Await的主要优点是：
  • 代码更简洁、更易读，更像同步代码。
  • 更好地处理错误，可以使用try...catch语句。
  • 可以使用for...of循环等待一系列的Promise。 关系和区别：
  • 迭代器是一种通用的遍历机制，生成器是实现迭代器的一种方式。
  • 生成器可以用于创建自定义的迭代器，也可以用于模拟异步操作，但Async/Await是专门为异步编程设计的，提供了更简洁的语法。
  • Async/Await内部使用了生成器和其他技术，但它的目的是让异步代码更像同步代码，提高可读性和可维护性。 总的来说，这三个概念都是现代JavaScript中重要的特性，它们各自有不同的用途和优势，但在某些场景下可以相互补充。

17. Node 和 Element 是什么关系？

在Web开发中，特别是在处理文档对象模型（DOM）时，Node和Element是两个核心概念，它们之间有着密切的关系。 Node（节点）：

  • Node是DOM树中的基本数据类型，它代表了文档树中的一个抽象节点。根据W3C DOM规范，Node是一个接口，它有许多子类型，包括元素节点（Element）、属性节点（Attribute）、文本节点（Text）、注释节点（Comment）、文档节点（Document）等。
  • 每个节点都有一些共同的属性和方法，如nodeType（表示节点类型）、nodeName（节点的名称）、childNodes（子节点列表）等。 Element（元素）：
  • Element是Node的一个子类型，它代表了HTML或XML文档中的一个元素，即HTML标签。例如，<div>、<p>、<span>等都是元素。
  • Element节点具有特定的属性和方法，如tagName（元素的标签名）、attributes（元素的属性节点集合）、classList（元素的类名列表）等。 关系：
  • Element继承自Node，这意味着所有Element对象都是Node对象，但并非所有Node对象都是Element对象。例如，文本节点（Text）和注释节点（Comment）也是Node的实例，但它们不是Element的实例。
  • 在DOM树中，Element节点可以包含其他Node类型，如文本节点、注释节点等，作为其子节点。 示例：
<div>Hello, World!</div>

在这个示例中：

  • <div>是一个Element节点，它的nodeType属性值为Node.ELEMENT_NODE。
  • "Hello, World!"是一个Text节点，它是<div>元素的子节点，其nodeType属性值为Node.TEXT_NODE。 总结： Node是一个更广泛的概念，它包括了DOM树中的所有类型的节点，而Element是Node的一个特定类型，专指HTML或XML元素。Element节点是DOM树中的主要构建块，而Node接口为所有类型的节点提供了基本的属性和方法。

18. 如何控制 input 输入框的输入字数？

要控制input输入框的输入字数，你可以使用HTML的maxlength属性或者通过JavaScript来监听输入事件并截断超过指定长度的输入。以下是两种方法的示例：

使用HTML的maxlength属性

这是最简单的方法，你只需要在input元素上设置maxlength属性即可。

<input type="text" maxlength="10" />

在这个例子中，用户只能输入最多10个字符。

使用JavaScript

如果你需要更灵活的控制，或者想要在用户输入时提供实时反馈，可以使用JavaScript。

<input type="text" id="myInput" />
<p id="charCount">0/10</p>
<script>
  const input = document.getElementById('myInput');
  const charCount = document.getElementById('charCount');
  const maxLength = 10;
  input.addEventListener('input', function() {
    if (this.value.length > maxLength) {
      this.value = this.value.slice(0, maxLength); // 截断超过长度的输入
    }
    charCount.textContent = `${this.value.length}/${maxLength}`; // 更新字符计数
  });
</script>

在这个例子中，我们为input元素添加了一个input事件监听器，每当用户输入时，我们检查输入的长度，并如果超过最大长度，则截断输入。同时，我们更新了一个显示当前字符计数的<p>元素。

结合HTML和JavaScript

你也可以结合使用maxlength属性和JavaScript，以提供更好的用户体验。

<input type="text" id="myInput" maxlength="10" />
<p id="charCount">0/10</p>
<script>
  const input = document.getElementById('myInput');
  const charCount = document.getElementById('charCount');
  const maxLength = input.getAttribute('maxlength');
  input.addEventListener('input', function() {
    charCount.textContent = `${this.value.length}/${maxLength}`;
  });
</script>

在这个例子中，我们使用了maxlength属性来限制输入长度，并通过JavaScript来更新字符计数，提供实时反馈。 这些方法可以单独使用，也可以根据需要组合使用，以实现控制input输入框的输入字数的目的。

19. 说说你对 React Hook的闭包陷阱的理解，有哪些解决方案？

React Hook的闭包陷阱通常指的是在使用Hooks（如useState、useEffect等）时，由于JavaScript闭包的特性，导致组件中的状态（state）或副作用（effect）引用了过时的变量或状态值，从而引发的问题。这种情况通常发生在组件重新渲染时。

闭包陷阱的表现

  1. 状态延迟：在事件处理函数或异步操作中，访问的状态值是函数创建时的状态，而不是最新的状态。
  2. 副作用使用过时状态：在useEffect等副作用中，如果依赖数组未正确指定，可能导致使用过时的状态值。

闭包陷阱的例子

function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    setTimeout(() => {
      setCount(count + 1); // 这里的count是闭包中的值，可能不是最新的
    }, 1000);
  };
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

在这个例子中，如果用户快速多次点击“Increment”按钮，setTimeout中的count值可能不是最新的，因为它是函数创建时的闭包中的值。

解决方案

  1. 使用函数式更新： 使用setState的函数式更新形式，确保总是基于最新的状态值进行更新。 
    setCount(currentCount => currentCount + 1);
  2. 使用useRef： useRef可以用来存储最新的状态值，因为它在组件的整个生命周期内保持不变，但.current属性可以被修改。 
    const countRef = useRef(count);
countRef.current = count; // 确保countRef.current总是最新的
const handleIncrement = () => {
  setTimeout(() => {
    setCount(countRef.current + 1);
  }, 1000);
};
  3. 使用useEffect的依赖数组： 确保在useEffect中正确指定依赖数组，以便在依赖变化时重新运行副作用。 
    useEffect(() => {
  // 副作用逻辑
}, [依赖变量]);
  4. 使用useCallback或useMemo： 如果需要将函数或值传递给子组件，可以使用useCallback或useMemo来避免不必要的重新渲染。 
    const handleIncrement = useCallback(() => {
  setCount(currentCount => currentCount + 1);
}, []);
  5. 使用自定义Hook： 对于复杂的状态逻辑，可以创建自定义Hook来封装和管理状态，从而避免闭包问题。 
    function useSafeState(initialValue) {
  const [state, setState] = useState(initialValue);
  const stateRef = useRef(state);
  stateRef.current = state;
  const setSafeState = useCallback((newValue) => {
    setState(newValue);
  }, []);
  return [stateRef, setSafeState];
}

在上述解决方案中，选择哪种方法取决于具体的问题场景和需求。理解闭包陷阱并选择合适的解决方案是提高React应用性能和避免潜在bug的关键。

20. 实现一个将多维数组展示的方法

要实现一个将多维数组展示的方法，我们可以使用递归函数来遍历数组，并将每个元素转换为字符串表示。以下是一个用JavaScript实现的示例方法：

function displayMultiDimensionalArray(arr) {
  // 检查是否是数组
  if (!Array.isArray(arr)) {
    return String(arr);
  }
  // 映射数组中的每个元素
  return '[' + arr.map(item => {
    // 递归调用以处理多维数组
    return displayMultiDimensionalArray(item);
  }).join(', ') + ']';
}
// 示例
const multiDimensionalArray = [1, [2, 3], [4, [5, 6]], 7];
console.log(displayMultiDimensionalArray(multiDimensionalArray));

这个方法会输出：

[1, [2, 3], [4, [5, 6]], 7]

这个实现会递归地检查数组中的每个元素，如果元素是数组，它会继续递归遍历；如果元素不是数组，它会将元素转换为字符串。最终，它会将所有元素用逗号连接起来，并用方括号包裹，形成多维数组的字符串表示。 如果你想要一个更具体的功能或者有其他语言的要求，请提供更多的细节。

21. 说说你对 useReducer 的理解

useReducer 是 React Hooks 中提供的一个用于状态管理的函数，它允许你在函数组件中管理复杂的状态逻辑。useReducer 是一个替代 useState 的更强大的选项，特别适用于以下场景：

  1. 复杂的状态逻辑：当你的状态逻辑变得复杂，涉及多个子状态或者状态更新依赖于前一个状态时，useReducer 可以提供更清晰的结构。
  2. 多个子状态：如果你的组件状态是一个对象，并且这个对象包含多个字段，useReducer 可以帮助你更好地组织这些状态的更新。
  3. 易于维护：useReducer 通过将状态更新逻辑集中在一个地方（reducer 函数），使得代码更易于维护和理解。
  4. 性能优化：由于 useReducer 的更新是通过 dispatching actions 来触发的，它可以更容易地与 useContext 结合使用，从而在多个组件间共享状态，而不会导致不必要的渲染。 useReducer 的基本使用方式如下：
const [state, dispatch] = useReducer(reducer, initialArg, init);
  • reducer：一个函数，它接收当前的 state 和一个 action，然后返回新的 state。
  • initialArg：状态的初始值。
  • init：一个可选的函数，用于计算初始状态。 reducer 函数的定义如下：
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

在这个例子中，reducer 根据不同的 action.type 来更新状态。 useReducer 的工作流程是：

  1. 组件通过 dispatch 函数发送一个 action。
  2. reducer 函数根据这个 action 和当前的 state 计算出新的 state。
  3. React 根据新的 state 重新渲染组件。 useReducer 的优势在于它提供了一种更接近于 Redux 的状态管理方式，使得状态更新逻辑更加集中和可预测。它也是实现复杂逻辑或大型应用中状态管理的一个很好的选择。

22. Map 和 WeakMap 有什么区别？

Map 和 WeakMap 都是 JavaScript 的集合类型，用于存储键值对，但它们之间有一些关键的区别：

  1. 键的类型：
    • Map：可以使用任何类型的值作为键，包括原始类型（如字符串、数字）和对象。
    • WeakMap：只能使用对象作为键，不能使用原始类型。
  2. 引用类型：
    • Map：对键的引用是强引用，即使没有其他引用指向键对象，它也不会被垃圾回收。
    • WeakMap：对键的引用是弱引用，如果键对象没有其他强引用，它可能会被垃圾回收。
  3. 迭代能力：
    • Map：是可迭代的，可以使用 for...of 循环、map.keys()、map.values()、map.entries() 等方法进行迭代。
    • WeakMap：不可迭代，没有提供迭代器，也不能获取所有键或值的列表。
  4. 键的枚举：
    • Map：可以枚举所有的键、值或键值对。
    • WeakMap：不能枚举键，没有提供 keys()、values()、entries() 等方法。
  5. 大小：
    • Map：可以使用 map.size 属性获取映射中的键值对数量。
    • WeakMap：没有 size 属性，因为它的键可能随时被垃圾回收，所以大小是不确定的。
  6. 使用场景：
    • Map：适用于需要频繁添加、删除和访问键值对的场景，以及需要迭代键值对的场景。
    • WeakMap：适用于关联对象和数据，而不想阻止对象被垃圾回收的场景，例如私有属性、缓存等。 由于 WeakMap 的键是弱引用，它特别适合用于那些不需要长期持有键引用的场景，这样可以避免内存泄漏。而 Map 则提供了更全面的键值对管理功能，适用于更广泛的场景。

23. 如何判断某个字符串长度（要求支持表情）？

在 JavaScript 中，判断字符串长度通常使用 length 属性。但是，对于包含表情符号的字符串，这种方法可能不准确，因为某些表情符号由两个 Unicode 符号组成（称为代理对），这会导致 length 属性返回的长度比实际可见的字符数多。 为了正确计算包含表情符号的字符串长度，可以使用以下方法：

  1. 使用 Array.from()： Array.from() 方法可以将字符串转换为一个数组，其中每个 Unicode 符号（包括代理对）都作为数组的一个元素。然后，可以计算数组的长度。 
    function getEmojiLength(str) {
  return Array.from(str).length;
}
const str = 'Hello 🌍!';
console.log(getEmojiLength(str)); // 输出正确的长度
  2. 使用扩展运算符 (...)： 扩展运算符可以将字符串转换为数组，类似于 Array.from()。 
    function getEmojiLength(str) {
  return [...str].length;
}
const str = 'Hello 🌍!';
console.log(getEmojiLength(str)); // 输出正确的长度
  3. 使用正则表达式： 可以使用正则表达式来匹配 Unicode 符号，包括代理对。 
    function getEmojiLength(str) {
  return (str.match(/[\s\S]/gu) || []).length;
}
const str = 'Hello 🌍!';
console.log(getEmojiLength(str)); // 输出正确的长度

在这三个方法中，Array.from() 和扩展运算符 (...) 是最简单和最直观的，而正则表达式方法提供了更多的灵活性，例如可以用来处理其他复杂的 Unicode 字符。 请注意，这些方法在现代浏览器中都得到了很好的支持，但在旧版浏览器中可能需要额外的 polyfill 或替代方案。

24. 讲讲 React.memo 和 JS 的 memorize 函数的区别

React.memo 和 JavaScript 中的 memoize 函数都用于优化性能，但它们在用途、实现和上下文方面有所不同。以下是它们之间的主要区别：

1. 用途和上下文：

  • React.memo：
    • 是 React 的一个高阶组件（HOC），用于优化 React 组件的渲染性能。
    • 用于避免在组件props没有改变的情况下重新渲染组件。
    • 仅在 React 组件的上下文中使用。
  • memoize 函数：
    • 是一种通用的函数优化技术，用于缓存函数的返回值，以避免在相同的输入下重复计算。
    • 可以用于任何JavaScript函数，不仅限于React。
    • 是一种更通用的优化手段，可以在任何需要缓存计算结果的场景中使用。

2. 实现方式：

  • React.memo：
    • 内部实现了一个浅比较机制，用于比较前后两次渲染的props是否相同。
    • 如果props相同，则阻止组件重新渲染。
    • 可以通过第二个参数提供一个自定义的比较函数来进行深度比较。
  • memoize 函数：
    • 通常通过闭包来实现，存储一个缓存对象来保存函数的输入和输出。
    • 当函数被调用时，首先检查缓存中是否已经有了对应的输入和输出，如果有，则直接返回缓存的结果，否则执行函数并保存结果到缓存中。
    • 有多种实现方式，如简单的缓存、使用Map或WeakMap的缓存、带有过期时间的缓存等。

3. 使用方式：

  • React.memo： 
    const MyComponent = React.memo(function MyComponent(props) {
  // 组件内容
});
  • memoize 函数： 
    function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}
const expensiveFunction = memoize(function(args) {
  // 一些昂贵的计算
});

4. 性能优化目标：

  • React.memo：
    • 优化React组件的渲染性能，避免不必要的渲染。
  • memoize 函数：
    • 优化函数调用的性能，避免重复的计算。

5. 适用场景：

  • React.memo：
    • 适用于React组件，特别是那些经常重新渲染但props变化不大的组件。
  • memoize 函数：
    • 适用于任何需要缓存计算结果的函数，如计算密集型的函数、频繁调用的函数等。 总之，React.memo 是React特有的优化手段，专注于组件层面的渲染性能，而 memoize 函数是更通用的JavaScript性能优化技术，适用于任何函数的调用优化。两者在实现原理、使用场景和优化目标上有所区别。

25. 使用正则表达式实现以下需求：筛选出数组中只包含大小写字母的字符串，并将结果转换成大写

要使用正则表达式筛选出数组中只包含大小写字母的字符串，并将结果转换成大写，你可以遵循以下步骤：

  1. 创建一个正则表达式，用于匹配只包含大小写字母的字符串。例如，可以使用正则表达式 /^[A-Za-z]+$/。
  2. 遍历数组，使用正则表达式测试每个元素。
  3. 如果元素匹配正则表达式，则将其转换成大写。 下面是一个TypeScript实现的示例：
function filterAndUppercase(strings: string[]): string[] {
  // 正则表达式，匹配只包含大小写字母的字符串
  const regex = /^[A-Za-z]+$/;
  // 筛选并转换数组
  return strings
    .filter(str => regex.test(str)) // 筛选出只包含字母的字符串
    .map(str => str.toUpperCase());  // 将筛选出的字符串转换成大写
}
// 示例数组
const exampleArray = ['Hello', '123', 'World!', 'Test', 'ABC', 'xyz'];
// 调用函数并打印结果
const result = filterAndUppercase(exampleArray);
console.log(result); // 输出: ['HELLO', 'TEST', 'ABC', 'XYZ']

在这个示例中，filterAndUppercase 函数接受一个字符串数组作为输入，使用 filter 方法和正则表达式来筛选出只包含字母的字符串，然后使用 map 方法将它们转换成大写。最后，函数返回一个新的数组，包含转换后的大写字符串。

26. 实现一个等待函数，支持让 async 函数在执行时暂停一段时间，函数的入参为暂停的时间

在JavaScript中，你可以使用async/await语法结合Promise来实现一个等待函数。以下是一个简单的实现：

/**
 * 等待函数，暂停指定的毫秒数
 * @param {number} ms - 暂停的毫秒数
 * @returns {Promise<void>}
 */
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
// 使用示例
async function example() {
  console.log('开始执行');
  await wait(2000); // 暂停2秒
  console.log('继续执行');
}
example();

在这个实现中，wait函数返回一个Promise，该Promise在指定的毫秒数后解决。你可以在async函数中使用await wait(ms)来暂停函数的执行。 注意：wait函数的参数ms是暂停的毫秒数，不是秒数。如果你想要以秒为单位，可以稍作修改：

/**
 * 等待函数，暂停指定的秒数
 * @param {number} seconds - 暂停的秒数
 * @returns {Promise<void>}
 */
function wait(seconds) {
  return new Promise(resolve => setTimeout(resolve, seconds * 1000));
}
// 使用示例
async function example() {
  console.log('开始执行');
  await wait(2); // 暂停2秒
  console.log('继续执行');
}
example();

这样，你就可以以秒为单位来调用wait函数了。

27. 说说你对模块化方案的理解，比如 CommonJS、AMD、CMD、ES Module 分别是什么？

模块化是软件开发中的一种组织代码的方式，它允许将代码分割成独立的、可复用的模块。每个模块可以包含特定的功能或数据，并且可以被其他模块引用。模块化有助于提高代码的可维护性、可读性和可复用性。以下是一些常见的JavaScript模块化方案：

  1. CommonJS：
    • CommonJS是一种模块化规范，最初为Node.js环境设计。
    • 它通过require函数来导入模块，通过module.exports或exports来导出模块。
    • CommonJS是同步加载模块的，适用于服务器端环境，因为文件系统访问是同步的。
    • 示例： 
      // 导出
module.exports = {
  func: () => {}
};
// 导入
const module = require('./module');
  2. AMD（Asynchronous Module Definition）：
    • AMD是一种异步模块定义规范，适用于浏览器环境。
    • 它允许异步加载模块，解决了浏览器环境下同步加载导致的性能问题。
    • AMD使用define函数来定义模块，并使用require来导入模块。
    • 示例： 
      // 定义模块
define(['dependency'], function(dependency) {
  return {
    func: () => {}
  };
});
// 导入模块
require(['module'], function(module) {
  // 使用module
});
  3. CMD（Common Module Definition）：
    • CMD是一种中国本土的模块化规范，由阿里巴巴推出。
    • 它与AMD类似，也是异步加载模块，但CMD推崇依赖就近，只有在需要时才加载依赖。
    • CMD使用define函数来定义模块，并使用require来导入模块。
    • 示例： 
      // 定义模块
define(function(require, exports, module) {
  var dependency = require('dependency');
  exports.func = () => {};
});
// 导入模块
define(function(require) {
  var module = require('./module');
  // 使用module
});
  4. ES Module（ECMAScript Module）：
    • ES Module是ECMAScript官方的模块化标准，现在已经被大多数现代浏览器和Node.js支持。
    • 它使用import语句来导入模块，使用export或export default来导出模块。
    • ES Module是静态的，意味着导入和导出语句必须在文件的顶层，且在编译时就已经确定。
    • 示例： 
      // 导出
export function func() {}
export default class MyClass {}
// 导入
import { func } from './module';
import MyClass from './module';

每种模块化方案都有其适用的场景和优势。CommonJS适用于Node.js环境，AMD和CMD适用于浏览器环境，而ES Module则是现代JavaScript的官方标准，适用于浏览器和Node.js环境。随着ES Module的广泛支持，它逐渐成为主流的模块化方案。

28. webSocket 有哪些安全问题，应该如何应对？

WebSocket是一种在单个连接上进行全双工、双向交互的协议，它允许服务器和客户端之间的数据在建立连接后实时传输。然而，WebSocket也面临一些安全问题，以下是一些常见的安全问题及其应对措施：

安全问题：

  1. 未经验证的输入：
    • 如果不对输入进行验证，攻击者可能会发送恶意数据，导致XSS（跨站脚本攻击）或SQL注入等。
  2. 缺乏身份验证和授权：
    • 如果不进行适当的身份验证和授权，攻击者可能会伪装成合法用户或访问未授权的资源。
  3. 敏感数据泄露：
    • 如果不加密传输的数据，攻击者可能会截取并读取敏感信息。
  4. 跨站WebSocket劫持（CSWSH）：
    • 攻击者可能利用跨站请求伪造（CSRF）技术劫持用户的WebSocket连接。
  5. 拒绝服务攻击（DoS）：
    • 攻击者可能通过发送大量数据或建立大量连接来耗尽服务器资源。
  6. 协议升级攻击：
    • 攻击者可能利用协议升级过程中的漏洞进行攻击。
  7. 不安全的WebSocket库或实现：
    • 使用存在漏洞的WebSocket库或实现可能导致安全风险。

应对措施：

  1. 输入验证：
    • 对所有输入进行严格的验证，防止XSS和注入攻击。
  2. 身份验证和授权：
    • 实施强身份验证机制，如OAuth或JWT，并确保用户只能访问其授权的资源。
  3. 使用WSS（WebSocket Secure）：
    • 通过WSS协议（即WebSocket over TLS/SSL）加密数据传输，保护数据不被截取。
  4. 防止CSWSH：
    • 使用相同的-origin策略，确保WebSocket连接只接受来自同一源的请求。
    • 设置适当的HTTP头，如Sec-WebSocket-Protocol，以增强安全性。
  5. 限制连接和流量：
    • 限制单个IP地址的连接数和流量，以防止DoS攻击。
  6. 安全协议升级：
    • 确保协议升级过程安全，使用最新的安全协议和补丁。
  7. 使用安全的库和实现：
    • 选择经过安全审计的WebSocket库或实现，并保持更新。
  8. 日志和监控：
    • 实施日志记录和实时监控，以便及时发现和响应异常活动。
  9. 错误处理：
    • 正确处理错误和异常，避免泄露敏感信息。
  10. 安全编码实践：
    • 遵循安全编码最佳实践，如最小权限原则、避免硬编码敏感信息等。 通过采取这些措施，可以显著提高WebSocket应用的安全性，减少潜在的安全风险。

29. 二叉树的层序遍历

在TypeScript中实现二叉树的层序遍历，你可以使用队列来辅助实现。以下是一个简单的示例代码：

class TreeNode {
    val: number;
    left: TreeNode | null;
    right: TreeNode | null;
    constructor(val: number = 0, left: TreeNode | null = null, right: TreeNode | null = null) {
        this.val = val;
        this.left = left;
        this.right = right;
    }
}
function levelOrderTraversal(root: TreeNode | null): number[][] {
    if (!root) {
        return [];
    }
    const result: number[][] = [];
    const queue: TreeNode[] = [root];
    while (queue.length > 0) {
        const level: TreeNode[] = [];
        const levelSize = queue.length;
        for (let i = 0; i < levelSize; i++) {
            const node = queue.shift()!;
            level.push(node.val);
            if (node.left) {
                queue.push(node.left);
            }
            if (node.right) {
                queue.push(node.right);
            }
        }
        result.push(level);
    }
    return result;
}
// Example usage:
const root = new TreeNode(1, new TreeNode(2, new TreeNode(4), new TreeNode(5)), new TreeNode(3, new TreeNode(6), new TreeNode(7)));
console.log(levelOrderTraversal(root));

这个代码定义了一个TreeNode类来表示二叉树的节点，并实现了一个levelOrderTraversal函数来执行层序遍历。在这个函数中，我们使用一个队列来跟踪每一层的节点，并按层收集节点的值。 你可以将这段代码复制到你的 TypeScript 环境中运行，看看它的效果。如果你有任何具体的问题或需要进一步的解释，请告诉我！

30. position: fixed 一定是相对于浏览器窗口进行定位吗？

是的，position: fixed 是相对于浏览器窗口（也称为视口）进行定位的。当元素设置为 position: fixed 时，它会被移出正常文档流，并且不占据空间。然后，该元素会相对于浏览器窗口进行定位，即使页面滚动，它也会保持在固定的位置。 不过，需要注意的是，如果fixed定位的元素有父元素，且父元素设置了transform属性（不为none）、perspective属性（不为none）或者will-change属性（值为transform或perspective），那么fixed定位是相对于该父元素进行定位的，而不是浏览器窗口。 另外，在移动端或某些浏览器中，由于实现了“布局视口”、“视觉视口”和“理想视口”等概念，position: fixed 的表现可能会有所不同。但通常情况下，它是相对于浏览器窗口进行定位的。 总之，position: fixed 通常是相对于浏览器窗口进行定位的，但在特定情况下可能相对于其父元素定位。在使用时需要根据具体情况进行判断和调整。

avatar
文章
阅读
粉丝