当前位置：首页 > JavaScript

js 实现对比

2026-02-01 14:20:25JavaScript

实现 JavaScript 对比功能

对象或数组的深度比较

使用递归方法比较对象或数组的每个属性或元素，确保嵌套结构也能被正确对比。

function deepEqual(a, b) {
  if (a === b) return true;
  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false;
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  if (keysA.length !== keysB.length) return false;
  for (const key of keysA) {
    if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
  }
  return true;
}

字符串或数字的简单比较

直接使用严格相等运算符 === 进行基本类型的比较。

js 实现对比

const str1 = 'hello';
const str2 = 'world';
console.log(str1 === str2); // false

const num1 = 42;
const num2 = 42;
console.log(num1 === num2); // true

数组的浅层比较

通过遍历数组元素进行逐项比较，适用于非嵌套数组。

js 实现对比

function shallowCompareArrays(arr1, arr2) {
  if (arr1.length !== arr2.length) return false;
  return arr1.every((item, index) => item === arr2[index]);
}

使用第三方库进行复杂比较

Lodash 的 isEqual 方法提供了完善的深度比较功能。

const _ = require('lodash');
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
console.log(_.isEqual(obj1, obj2)); // true

差异高亮显示

对于文本差异，可以使用 diff 算法实现高亮显示变化部分。

function highlightDiff(text1, text2) {
  const diff = [];
  const maxLength = Math.max(text1.length, text2.length);
  for (let i = 0; i < maxLength; i++) {
    if (text1[i] !== text2[i]) {
      diff.push(`<span style="color:red">${text2[i] || ''}</span>`);
    } else {
      diff.push(text2[i] || '');
    }
  }
  return diff.join('');
}