JavaScript 中重复调用方法的性能与可读性优化指南-js教程-PHP中文网

JavaScript 中重复调用方法的性能与可读性优化指南

在 JavaScript 中，同一表达式（如 str.lastIndexOf('_')）若在代码中多次出现，会被重复执行，而非自动缓存结果；因此显式提取为变量不仅提升性能，也增强代码可维护性。

在 javascript 中，同一表达式（如 `str.lastindexof('_')`）若在代码中多次出现，会被重复执行，而非自动缓存结果；因此显式提取为变量不仅提升性能，也增强代码可维护性。

在实际开发中，一个看似微小的写法差异可能带来双重开销——尤其是当方法涉及字符串搜索、DOM 查询或复杂计算时。以 str.lastIndexOf('_') 为例，它是一个纯函数式操作（不改变原字符串），但每次调用都会重新遍历字符串、执行匹配逻辑。这意味着：

if (str.lastIndexOf('_') !== -1) {
  z = str.lastIndexOf('_'); // ❌ 再次调用，重复遍历！
}

上述代码中，lastIndexOf 被执行了两次：一次用于条件判断，一次用于赋值。可通过重写原型并添加日志轻松验证：

const orig = String.prototype.lastIndexOf;
String.prototype.lastIndexOf = function(...args) {
  console.log('⚠️ lastIndexOf called');
  return orig.call(this, ...args); // 注意：必须 return 原函数结果
};

const str = 'hello_world';
let z = 99999;
if (str.lastIndexOf('_') !== -1) {
  z = str.lastIndexOf('_');
}
// 控制台将输出两行 "⚠️ lastIndexOf called"

同理，三元运算符中若重复书写表达式，也会触发多次执行：

z = str.lastIndexOf('_') !== -1 ? str.lastIndexOf('_') : 99999; // ❌ 仍执行两次

✅ 推荐做法：提前缓存结果

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

const idx = str.lastIndexOf('_');
if (idx !== -1) {
  z = idx;
} else {
  z = 99999;
}
// 或更简洁地：
z = idx !== -1 ? idx : 99999;

这种写法不仅避免重复计算，还提升了语义清晰度——idx 明确表达了“下划线最后出现的位置”，便于后续扩展（例如添加边界检查或日志）。

? 注意事项：

此原则适用于所有无副作用但耗时的操作（如 Array.prototype.findIndex、document.querySelector、自定义 heavy computation 函数）；
若方法有副作用（如修改内部状态、触发事件），重复调用可能导致逻辑错误，而不仅是性能损耗；
V8 等引擎不会自动优化跨语句的相同方法调用，即使参数完全一致——JS 引擎无法保证方法纯度，故不作假设性缓存。

总结：不要依赖“看起来一样就只算一次”的直觉。 将共享计算结果提取为具名变量，是兼顾性能、可读性与可维护性的最佳实践。这并非过度设计，而是对 JavaScript 执行模型的合理响应。