skillhub-088-vercel-react-best-practices/rules/js-length-check-first.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Early Length Check for Array Comparisons	MEDIUM-HIGH	avoids expensive operations when lengths differ	javascript, arrays, performance, optimization, comparison

数组比较的早期长度检查

当通过开销较大的操作（排序、深度相等比较、序列化）来比较数组时，应首先检查长度。如果长度不同，则数组不可能相等。

在实际应用中，当比较操作运行在热路径（事件处理、渲染循环）中时，这种优化尤为有价值。

错误做法（始终执行开销大的比较）：

function hasChanges(current: string[], original: string[]) {
  // 始终执行排序和连接，即使长度不同
  return current.sort().join() !== original.sort().join()
}

即使 current.length 为 5 而 original.length 为 100，也会执行两次 O(n log n) 的排序。同时还存在连接数组和比较字符串的开销。

正确做法（先进行 O(1) 长度检查）：

function hasChanges(current: string[], original: string[]) {
  // 如果长度不同则提前返回
  if (current.length !== original.length) {
    return true
  }
  // 仅在长度匹配时才排序
  const currentSorted = current.toSorted()
  const originalSorted = original.toSorted()
  for (let i = 0; i < currentSorted.length; i++) {
    if (currentSorted[i] !== originalSorted[i]) {
      return true
    }
  }
  return false
}

这种新方法效率更高，原因如下：

• 当数组长度不同时，避免了排序和连接数组的开销
• 避免了为连接后的字符串消耗内存（对于大数组尤其重要）
• 避免了修改原始数组
• 在发现差异时即可提前返回