二分查找，其实就这些了

引言

在前端开发的算法工具箱中，二分查找（Binary Search）是一种极其高效且常用的搜索算法。它能够在有序数据集上实现对数级别的查找效率，相比线性查找大幅降低时间复杂度。本文将深入剖析二分查找的原理、实现方法，并通过实际案例展示其在前端开发中的应用。

二分查找的基本原理

二分查找的核心思想是"排除法"，基于"分而治之"的策略，每次将搜索空间减半。它只适用于已排序的数据集，这是使用该算法的前提条件。

算法步骤

1. 确定待查找区间的中间位置
2. 将目标值与中间元素进行比较
3. 根据比较结果，缩小查找范围（左半部分或右半部分）
4. 重复上述步骤直到找到目标值或确定目标值不存在

时间与空间复杂度

• 时间复杂度：O(log n)，其中n是数据集大小
• 空间复杂度：O(1)（迭代实现）或O(log n)（递归实现，主要是函数调用栈）

二分查找的标准实现

/**
 * 标准二分查找算法
 * @param arr 已排序的数组
 * @param target 要查找的目标值
 * @returns 目标值的索引，如果不存在则返回-1
 */
function binarySearch<T>(arr: T[], target: T): number {
  let left = 0;
  let right = arr.length - 1;
  
  while (left <= right) {
    // 计算中间位置（避免整数溢出的写法）
    const mid = left + Math.floor((right - left) / 2);
    
    // 找到目标值
    if (arr[mid] === target) {
      return mid;
    }
    
    // 目标值在左半部分
    if (arr[mid] > target) {
      right = mid - 1;
    } 
    // 目标值在右半部分
    else {
      left = mid + 1;
    }
  }
  
  // 目标值不存在
  return -1;
}

这个实现有几个需要注意的细节：

1. 边界条件 ：使用left <= right作为循环条件，确保能够检查单个元素的区间
2. 中间索引计算 ：使用left + Math.floor((right - left) / 2)而非(left + right) / 2，避免在处理大数组时可能发生的整数溢出
3. 无限循环防护：确保在每次迭代中搜索空间都会减小

二分查找的变体

二分查找有多种变体，适用于不同的场景：

查找第一个等于目标值的元素

当数组中存在多个等于目标值的元素时，此变体返回第一个匹配元素的索引。

/**
 * 查找第一个等于目标值的元素
 * @param arr 已排序的数组
 * @param target 要查找的目标值
 * @returns 第一个等于目标值的元素索引，如果不存在则返回-1
 */
function findFirstEqual<T>(arr: T[], target: T): number {
  let left = 0;
  let right = arr.length - 1;
  let result = -1;
  
  while (left <= right) {
    const mid = left + Math.floor((right - left) / 2);
    
    if (arr[mid] === target) {
      result = mid; // 记录当前找到的位置
      right = mid - 1; // 继续向左查找
    } else if (arr[mid] > target) {
      right = mid - 1;
    } else {
      left = mid + 1;
    }
  }
  
  return result;
}

查找最后一个等于目标值的元素

与前一个变体类似，但返回最后一个匹配元素的索引。

/**
 * 查找最后一个等于目标值的元素
 * @param arr 已排序的数组
 * @param target 要查找的目标值
 * @returns 最后一个等于目标值的元素索引，如果不存在则返回-1
 */
function findLastEqual<T>(arr: T[], target: T): number {
  let left = 0;
  let right = arr.length - 1;
  let result = -1;
  
  while (left <= right) {
    const mid = left + Math.floor((right - left) / 2);
    
    if (arr[mid] === target) {
      result = mid; // 记录当前找到的位置
      left = mid + 1; // 继续向右查找
    } else if (arr[mid] > target) {
      right = mid - 1;
    } else {
      left = mid + 1;
    }
  }
  
  return result;
}

二分查找在前端开发中的应用

尽管二分查找在算法面试中很常见，但它在前端实际开发中也有很多应用场景：

1. 虚拟滚动优化

在虚拟滚动组件中，我们可以使用二分查找快速定位滚动位置对应的数据索引。

/**
 * 在虚拟滚动中查找特定滚动位置对应的元素索引
 * @param positions 元素位置数组，表示每个元素的起始位置
 * @param scrollTop 当前滚动位置
 * @returns 对应的元素索引
 */
function findIndexByScrollPosition(positions: number[], scrollTop: number): number {
  // 使用二分查找找到第一个起始位置大于scrollTop的元素
  let left = 0;
  let right = positions.length - 1;
  
  if (scrollTop <= positions[0]) {
    return 0;
  }
  
  while (left <= right) {
    const mid = left + Math.floor((right - left) / 2);
    
    if (positions[mid] === scrollTop) {
      return mid;
    } else if (positions[mid] < scrollTop) {
      if (mid === positions.length - 1 || positions[mid + 1] > scrollTop) {
        return mid;
      }
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  
  return Math.max(0, left - 1);
}

2. 日期范围选择器

在日期范围选择器中，可以使用二分查找快速定位一个日期在可选日期范围内的位置。

/**
 * 在日期范围中查找特定日期的位置
 * @param dates 日期数组（已按时间排序）
 * @param targetDate 目标日期
 * @returns 目标日期在数组中的位置，如果不存在则返回可插入的位置
 */
function findDatePosition(dates: Date[], targetDate: Date): number {
  const targetTime = targetDate.getTime();
  let left = 0;
  let right = dates.length - 1;
  
  while (left <= right) {
    const mid = left + Math.floor((right - left) / 2);
    const midTime = dates[mid].getTime();
    
    if (midTime === targetTime) {
      return mid;
    } else if (midTime < targetTime) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  
  // 返回可插入位置
  return left;
}

3. 自动补全和搜索建议

在实现自动补全功能时，可以用二分查找在已排序的候选词列表中快速查找匹配项。

/**
 * 在排序的建议列表中查找匹配前缀的范围
 * @param suggestions 已排序的建议列表
 * @param prefix 用户输入的前缀
 * @returns 匹配该前缀的建议范围（起始和结束索引）
 */
function findSuggestionRange(suggestions: string[], prefix: string): [number, number] {
  // 查找第一个匹配的位置
  const start = findFirstMatchingPrefix(suggestions, prefix);
  if (start === -1) {
    return [-1, -1];
  }
  
  // 查找最后一个匹配的位置
  const end = findLastMatchingPrefix(suggestions, prefix);
  
  return [start, end];
}

/**
 * 查找第一个匹配前缀的元素
 */
function findFirstMatchingPrefix(suggestions: string[], prefix: string): number {
  let left = 0;
  let right = suggestions.length - 1;
  let result = -1;
  
  while (left <= right) {
    const mid = left + Math.floor((right - left) / 2);
    
    if (suggestions[mid].startsWith(prefix)) {
      result = mid;
      right = mid - 1; // 继续向左查找
    } else if (suggestions[mid] < prefix) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  
  return result;
}

/**
 * 查找最后一个匹配前缀的元素
 */
function findLastMatchingPrefix(suggestions: string[], prefix: string): number {
  let left = 0;
  let right = suggestions.length - 1;
  let result = -1;
  
  while (left <= right) {
    const mid = left + Math.floor((right - left) / 2);
    
    if (suggestions[mid].startsWith(prefix)) {
      result = mid;
      left = mid + 1; // 继续向右查找
    } else if (suggestions[mid] < prefix) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  
  return result;
}

使用二分查找的注意事项

1. 确保数据已排序：二分查找的前提是数据集已按照某种顺序排序。
2. 处理重复元素：标准二分查找在有重复元素时可能返回任意匹配元素，如需返回第一个或最后一个匹配元素，需使用相应变体。
3. 边界条件处理：需要正确处理各种边界情况，如空数组、单元素数组等。
4. 避免整数溢出 ：在计算中间索引时，应使用left + Math.floor((right - left) / 2)而非(left + right) / 2，以避免处理大数组时可能发生的整数溢出。
5. 适用场景选择：只有在处理已排序的大型数据集时，二分查找才能体现其优势。对于小型数据集或频繁变化的数据，简单的线性查找可能更为适合。

总结

二分查找是一种强大而高效的算法，在处理有序数据集时能够显著提高搜索效率。其O(log n)的时间复杂度使它在处理大规模数据时尤为有价值。在前端开发中，二分查找不仅限于基础算法面试题，还广泛应用于虚拟滚动、自动补全、日期选择器等实际功能实现中。

掌握二分查找及其变体，不仅能够帮助我们通过算法面试，更能够在实际开发中写出更加高效的代码。通过本文的示例问题，我们也看到了如何将二分查找应用于非标准场景，这种思维方式的灵活运用是每个优秀前端工程师应当具备的能力。