如何保存JavaScript中由函数生成的变量结果？

Hey there! Let's break down how to save the result from your random() function so you can reuse it across your other functions without generating a new random number each time. Here are a few practical approaches tailored to your code:

方法1：使用全局变量（简单直接） #

If you're working on a small project and don't mind a single global variable, this is the quickest fix. Declare a variable outside your functions to store the generated number:

// 全局变量，用来保存生成的随机数
let savedNumber;

function random() {
  savedNumber = Math.floor(Math.random() * 2); // 直接赋值给全局变量
  document.getElementById('number').innerHTML = savedNumber;
  return savedNumber;
};

function searchE() {
  // 直接使用全局的savedNumber，无需传参
  const english = englishID[savedNumber];
  document.getElementById('english').innerHTML = english;
};

function searchJ() {
  // 注意：避免和浏览器全局对象`root`重名，建议把数组改名为rootArr/masuArr/teArr
  const root = rootArr[savedNumber];
  const masu = masuArr[savedNumber];
  const te = teArr[savedNumber];
  document.getElementById('root').innerHTML = root;
  document.getElementById('masu').innerHTML = masu;
  document.getElementById('te').innerHTML = te;
};

Note: Be careful with global variables—they can cause naming conflicts if you're working with larger codebases.

方法2：保存返回值并传递参数（模块化首选） #

A cleaner approach is to capture the return value of random() when you call it, then pass that value directly to your other functions. This keeps your code modular and avoids global scope pollution:

// 假设你有一个按钮触发生成和查询操作
document.getElementById('generateBtn').addEventListener('click', () => {
  // 保存random()的返回值
  const generatedNumber = random();
  // 把这个值传给需要它的函数
  searchE(generatedNumber);
  searchJ(generatedNumber);
});

// 你的原函数可以保持简洁，职责单一
function random() {
  const number = Math.floor(Math.random() * 2);
  document.getElementById('number').innerHTML = number;
  return number;
};

function searchE(number) {
  const english = englishID[number];
  document.getElementById('english').innerHTML = english;
};

function searchJ(number) {
  const root = rootArr[number];
  const masu = masuArr[number];
  const te = teArr[number];
  document.getElementById('root').innerHTML = root;
  document.getElementById('masu').innerHTML = masu;
  document.getElementById('te').innerHTML = te;
};

This way, you're explicitly passing data between functions, which makes your code easier to debug and maintain.

方法3：用闭包封装（避免全局污染） #

For more structured code, wrap all your related logic in a closure. This keeps the saved number private to the closure, so it won't leak into the global scope:

// 闭包封装，把相关函数和变量打包在一起
const numberManager = (() => {
  // 这个变量只在闭包内部可见，不会污染全局
  let savedNumber;

  function random() {
    savedNumber = Math.floor(Math.random() * 2);
    document.getElementById('number').innerHTML = savedNumber;
    return savedNumber;
  };

  function searchE() {
    const english = englishID[savedNumber];
    document.getElementById('english').innerHTML = english;
  };

  function searchJ() {
    const root = rootArr[savedNumber];
    const masu = masuArr[savedNumber];
    const te = teArr[savedNumber];
    document.getElementById('root').innerHTML = root;
    document.getElementById('masu').innerHTML = masu;
    document.getElementById('te').innerHTML = te;
  };

  // 暴露需要的函数给外部调用
  return {
    random,
    searchE,
    searchJ
  };
})();

// 调用方式：
numberManager.random();
numberManager.searchE();
numberManager.searchJ();

This is great for larger projects where you want to keep your code organized and avoid unintended side effects.

Quick Tips: #

• Make sure your arrays (englishID, rootArr, etc.) are accessible in the scope where your functions run—if using a closure, you might want to include them inside the closure too.
• If you want to prevent the saved number from being overwritten accidentally, you can add checks or use a getter function to access it.

内容的提问来源于stack exchange，提问作者Alexander Jephtha