React学习项目模拟LeetCode运行用户输入JS函数实现问询

核心实现思路：通过构造隔离作用域的方式执行用户代码，提取目标函数后传入解析后的测试用例执行，既可以满足从多函数声明中取指定函数的需求，也能避免直接使用eval污染全局作用域。

具体实现步骤 #

• 第一步：将字符串格式的测试用例解析为可直接传入函数的JS值
• 第二步：构造隔离执行上下文，运行用户输入的代码字符串，提取目标函数containsDuplicate
• 第三步：执行目标函数并捕获可能出现的异常（语法错误、运行时错误、函数不存在等场景）

完整代码示例 #

const submitHandler = () => {
  try {
    // 1. 解析字符串格式的测试用例为真实JS值
    const parsedTestCase = new Function(`return ${testCase}`)();
    
    // 2. 构造隔离作用域运行用户代码，提取目标函数
    // 所有用户代码仅在该Function的独立作用域内执行，不会污染全局
    const getTargetFunction = new Function(
      codeValue + `; return containsDuplicate;`
    );
    const targetFn = getTargetFunction();

    // 3. 校验函数存在性后执行
    if (typeof targetFn !== 'function') {
      throw new Error('未找到目标函数containsDuplicate，请检查代码声明');
    }
    const runResult = targetFn(parsedTestCase);

    // 执行成功，可将结果输出到UI展示
    console.log('代码执行结果：', runResult);
  } catch (err) {
    // 全链路捕获异常，可将错误信息输出到UI提示用户
    console.error('运行出错：', err.message);
  }
};

实现说明 #

• 自动适配多函数声明场景：只要用户代码中声明了containsDuplicate函数，不管附带多少其他辅助函数，都可以正常调用，辅助函数也会被正确挂载到当前作用域供目标函数使用
• 如果需要执行其他名称的函数，只需要把getTargetFunction中返回的函数名换成对应名称即可，比如要运行functionA就修改为; return functionA;
• 覆盖所有常见异常场景：包含测试用例解析错误、用户代码语法错误、目标函数不存在、运行时报错等，无需额外做边界判断

注意事项 #

该方案仅适用于本地学习类项目，如果要上线面向公开用户使用，需要额外添加代码沙箱隔离逻辑，避免恶意代码攻击。

内容的提问来源于stack exchange，提问作者Xinrui Ma