JavaScript从指定索引查找数组元素的最优方案及原生find性能疑问

一、原生Array.prototype.find性能低于自定义for循环的原因 #

原生方法的实现必须严格遵循ECMAScript规范要求，存在大量自定义for循环没有的额外开销：

• 前置校验逻辑：执行遍历前会先校验调用对象的合法性、回调函数的合法性、绑定thisArg参数，还要处理稀疏数组的空槽跳过逻辑、类数组对象的兼容逻辑。
• 迭代时的额外处理：每一轮遍历都要做索引合法性校验、属性访问的安全检查（支持代理数组、带自定义getter的数组等特殊场景），这些通用兼容逻辑在常规稠密数组场景下都是冗余开销。
• 调用开销：原生方法调用传入的回调函数时，需要在引擎底层C++代码和JS上下文之间切换，而自定义for循环和简单回调可以被V8等JS引擎的JIT编译器深度优化，直接内联执行，没有跨上下文调用的开销。

二、从指定索引开始查找数组元素的最优方案 #

如果你的需求是无第三方依赖、不创建数组浅拷贝、性能最优，推荐使用自定义for循环版本，仅需补充少量边界校验即可投入生产使用，示例实现如下：

function findFromIndex(arr, predicate, startIndex = 0) {
  // 边界校验
  if (!Array.isArray(arr)) throw new TypeError('First argument must be an array')
  if (typeof predicate !== 'function') throw new TypeError('Predicate must be a function')
  const length = arr.length
  let i = Math.max(startIndex < 0 ? length + startIndex : startIndex, 0)
  for (; i < length; i++) {
    if (predicate(arr[i], i, arr)) return arr[i]
  }
  return undefined
}

其他方案的缺陷：

• 原生Array.prototype.find：无起始索引参数，若要手动在回调中判断索引会进一步降低性能。
• slice+find方案：会创建子数组的浅拷贝，大数组场景下有额外的内存占用和拷贝耗时，起始索引越靠前性能损耗越明显。
• lodash.find：需要引入第三方依赖，存在包体积开销，性能和自定义实现基本持平，没有额外优势。

内容的提问来源于stack exchange，提问作者Eliav Louski