当前位置:首页 > JavaScript

js实现equal

2026-02-01 01:23:24JavaScript

在JavaScript中实现深度比较(equal)功能,可以通过以下方法实现。根据比较需求的不同,可分为浅比较和深比较两种场景:

浅比较(Shallow Equal)

浅比较仅检查基本类型值或对象的引用是否相同,适用于简单对象或数组:

function shallowEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (let key of keys1) {
    if (obj1[key] !== obj2[key]) return false;
  }
  return true;
}

深比较(Deep Equal)

深比较会递归检查所有嵌套属性和值,适用于复杂对象或数组:

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (let key of keys1) {
    if (!deepEqual(obj1[key], obj2[key])) return false;
  }
  return true;
}

特殊场景处理

处理特殊对象如DateRegExp等:

function deepEqualWithSpecialTypes(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (obj1 instanceof Date && obj2 instanceof Date) return obj1.getTime() === obj2.getTime();
  if (obj1 instanceof RegExp && obj2 instanceof RegExp) return obj1.toString() === obj2.toString();
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (let key of keys1) {
    if (!deepEqualWithSpecialTypes(obj1[key], obj2[key])) return false;
  }
  return true;
}

使用现成库

推荐使用现成工具库如lodash_.isEqual

const _ = require('lodash');
const isEqual = _.isEqual(obj1, obj2);

注意事项

  • 循环引用会导致递归爆栈,需额外处理(如使用WeakMap记录已比较对象)。
  • 性能敏感场景建议使用浅比较或限制递归深度。
  • 符号(Symbol)属性需通过Object.getOwnPropertySymbols()单独处理。

js实现equal

标签: jsequal
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="sli…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…