JavaScript代码优化：避免重复调用Math.floor/Math.random实现随机短语生成

嘿，作为JavaScript新手能写出可运行的代码已经超棒啦！重复三次写Math.floor(Math.random()...)确实有点冗余，咱们来把这块逻辑抽出来，让代码更简洁、更易维护～

先看常见的重复写法（模拟你的原始代码） #

假设你的代码大概是这样的：

const startParts = ["清晨", "午后", "深夜"];
const middleParts = ["我在", "我们于", "有人在"];
const endParts = ["读书", "散步", "看星星"];

// 重复的随机选取逻辑写了三次
const randomStart = startParts[Math.floor(Math.random() * startParts.length)];
const randomMiddle = middleParts[Math.floor(Math.random() * middleParts.length)];
const randomEnd = endParts[Math.floor(Math.random() * endParts.length)];

const fullSentence = `${randomStart}${randomMiddle}${randomEnd}`;
console.log(fullSentence);

优化方案1：封装通用随机选取函数 #

把重复的随机逻辑抽成一个独立的工具函数，以后不管选哪个部分的元素，直接调用这个函数就行：

const startParts = ["清晨", "午后", "深夜"];
const middleParts = ["我在", "我们于", "有人在"];
const endParts = ["读书", "散步", "看星星"];

// 封装通用函数：传入数组，返回随机元素
function getRandomElement(arr) {
  // 边界判断：如果传入空数组，返回空或者抛出提示，避免报错
  if (!arr || arr.length === 0) return "";
  return arr[Math.floor(Math.random() * arr.length)];
}

// 调用函数获取各部分随机内容，拼接成完整语句
const fullSentence = `${getRandomElement(startParts)}${getRandomElement(middleParts)}${getRandomElement(endParts)}`;
console.log(fullSentence);

优化方案2：进阶扩展性写法 #

如果以后可能要增加更多短语部分（比如前缀、后缀），可以把所有部分放进一个大数组，用map批量处理，扩展性更强：

// 把所有短语部分整理成二维数组
const phraseSections = [
  ["清晨", "午后", "深夜"],
  ["我在", "我们于", "有人在"],
  ["读书", "散步", "看星星"]
];

function getRandomElement(arr) {
  if (!arr || arr.length === 0) return "";
  return arr[Math.floor(Math.random() * arr.length)];
}

// 用map遍历每个部分，取随机元素后拼接
const fullSentence = phraseSections.map(getRandomElement).join("");
console.log(fullSentence);

为什么这样优化？ #

• 减少重复代码：遵循DRY（Don't Repeat Yourself）原则，不用重复写相同的随机逻辑
• 易于维护：如果以后要修改随机规则（比如换成加权随机），只需要修改getRandomElement这一个函数就行
• 可读性更高：函数名getRandomElement直观表达了功能，代码逻辑一目了然

内容的提问来源于stack exchange，提问作者Χρήστος Ιερείδης