JavaScript 中比较两个 JSON 数组并提取差异数据

javascript 中比较两个 json 数组并提取差异数据

本文介绍了如何使用 JavaScript 比较两个 JSON 数组,并提取出在一个数组中不存在,且满足特定条件的数据。通过示例代码,详细展示了如何利用 Set 数据结构和数组遍历高效地实现这一功能,并提供了代码示例和注意事项。

比较两个 JSON 数组并提取差异数据

在 JavaScript 开发中,经常会遇到需要比较两个 JSON 数组,并根据特定条件提取差异数据的场景。例如,我们需要找出在一个数组中不存在,且满足特定条件(例如,deleted 字段不等于 “1”)的元素。本文将介绍如何使用 Set 数据结构和数组遍历高效地实现这一功能。

示例场景

假设我们有两个 JSON 数组:fruits 和 food。fruits 数组包含水果的 id 和 name,food 数组包含食物的 id、food_name 和 deleted 字段。我们需要找出 fruits 数组中,name 不存在于 food 数组的 food_name 中,并且 food 数组中 deleted 字段不等于 “1” 的水果信息。

const fruits = [  { id: '1', name: 'Apple' },  { id: '2', name: 'Orange' },  { id: '3', name: 'Cherry' }];const food = [  { id: '1', food_name: 'Orange', deleted: "0" },  { id: '2', food_name: 'Bread', deleted: "0" },  { id: '3', food_name: 'Cheese', deleted: "0" },  { id: '4', food_name: 'Apple', deleted: "1" },  { id: '5', food_name: 'Salt', deleted: "0" }];

实现步骤

创建 food_name 的 Set 集合:

立即学习“Java免费学习笔记(深入)”;

为了提高查找效率,我们将 food 数组中的 food_name 提取出来,并存储到一个 Set 集合中。Set 集合具有快速查找的特性,可以有效地判断某个元素是否存在。

const foodSet = new Set(food.map(item => item.food_name));

遍历 fruits 数组:

我们使用 for 循环遍历 fruits 数组,对每个水果进行判断。

let dep_data = [];for (let i = 0; i < fruits.length; i++) {  // ...}

判断水果是否存在于 food 数组中,并满足 deleted 条件:

对于每个水果,我们使用 foodSet.has(fruits[i].name) 判断其 name 是否存在于 foodSet 集合中。如果不存在,并且 food 数组中没有对应的 food_name 且 deleted 不等于 “1”,则将该水果的信息添加到结果数组 dep_data 中。

let dep_data = [];for (let i = 0; i  item.food_name === fruitName);    if (!foodSet.has(fruitName) || (foodItem && foodItem.deleted === "1")) {        dep_data.push({ id: fruits[i].id, name: fruitName });    }}

完整代码示例

const fruits = [  { id: '1', name: 'Apple' },  { id: '2', name: 'Orange' },  { id: '3', name: 'Cherry' }];const food = [  { id: '1', food_name: 'Orange', deleted: "0" },  { id: '2', food_name: 'Bread', deleted: "0" },  { id: '3', food_name: 'Cheese', deleted: "0" },  { id: '4', food_name: 'Apple', deleted: "1" },  { id: '5', food_name: 'Salt', deleted: "0" }];let dep_data = [];const foodSet = new Set(food.map(item => item.food_name));for (let i = 0; i  item.food_name === fruitName);    if (!foodSet.has(fruitName) || (foodItem && foodItem.deleted === "1")) {        dep_data.push({ id: fruits[i].id, name: fruitName });    }}console.log(dep_data); // 输出: [ { id: '3', name: 'Cherry' } ]

总结

通过使用 Set 数据结构和数组遍历,我们可以高效地比较两个 JSON 数组,并根据特定条件提取差异数据。Set 集合的快速查找特性可以提高比较效率,而数组遍历则可以对每个元素进行判断。在实际开发中,可以根据具体需求调整代码逻辑,以满足不同的场景。

注意事项

确保 JSON 数组的结构一致,以便正确提取需要比较的字段。Set 集合只能存储唯一值,因此如果 food 数组中存在重复的 food_name,Set 集合会自动去重。在比较过程中,注意处理空值或 undefined 的情况,避免出现错误。如果数据量很大,可以考虑使用更高效的算法或数据结构,例如哈希表。

以上就是JavaScript 中比较两个 JSON 数组并提取差异数据的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1512584.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 07:13:53
下一篇 2025年12月20日 07:14:04

相关推荐

  • React音频播放器:页面切换时自动停止播放的实现与最佳实践

    本文详细阐述了在React应用中,如何利用useEffect钩子的清理机制,确保音频播放器在用户导航至新页面时自动停止播放。我们将探讨use-sound库的特定实现方法,包括在组件卸载时调用stop()函数。同时,文章也提供了使用原生HTML5 audio元素实现相同功能的指导,强调了在组件生命周期…

    2025年12月20日
    000
  • Node.js 中处理 JSON 科学计数法与固定小数位格式化输出

    本文探讨了在 Node.js 应用中,如何将包含科学计数法且带有固定小数位的数字正确地序列化到 JSON 文件中,以满足特定非标准应用的需求。通过利用 JavaScript 的 JSON.rawJSON 方法结合自定义 replacer 函数,我们能够精确控制数字的输出格式,确保其以期望的科学计数法…

    2025年12月20日
    000
  • Node.js:在JSON文件中精确保存科学计数法与固定小数位格式

    本文探讨了在Node.js应用中,如何处理JSON文件中的科学计数法数字,并确保在读写过程中保留其特定的固定小数位和指数格式。针对标准JSON序列化无法满足此特殊格式需求的问题,文章介绍了利用ES提案中的JSON.rawJSON结合自定义replacer函数的方法,实现对数字格式的精确控制,从而满足…

    2025年12月20日
    000
  • Node.js中JSON科学计数法与固定小数位格式化指南

    本文旨在解决Node.js应用在处理JSON文件时,如何将数字以特定科学计数法(如固定小数位数和指数部分补零)格式化输出的问题。尽管标准JSON解析器能正确处理数字,但当面临需要保留非标准格式以兼容特定下游应用时,传统的JSON.stringify无法满足需求。文章将深入探讨如何利用ES提案中的JS…

    2025年12月20日
    000
  • Cypress测试中跨测试块保持登录状态的最佳实践

    在Cypress自动化测试中,默认的测试隔离机制会导致每个it测试块之间浏览器状态被重置,使得before()钩子中的一次性登录操作无法在后续测试块中保持。本文将深入探讨这一问题,并提供两种解决方案:不推荐的testIsolation: false配置及其潜在风险,以及强烈推荐使用cy.sessio…

    2025年12月20日
    000
  • 优化Cypress测试:高效管理跨it块的登录状态与cy.session()实践

    本文旨在解决Cypress自动化测试中,使用before()钩子进行一次性登录后,登录状态无法在后续it测试块中保持的问题。文章将深入探讨Cypress默认的测试隔离机制,并介绍两种解决方案:设置testIsolation: false(非最佳实践)以及推荐使用cy.session()命令。通过详细…

    2025年12月20日
    000
  • Vue.js 中使用 v-if 和 v-show 实现多个元素的切换显示

    本文旨在介绍如何在 Vue.js 中使用 v-if 和 v-show 指令,配合数据驱动的方式,实现多个元素的独立切换显示功能,避免直接操作 DOM,遵循 Vue.js 的响应式编程思想,提供清晰的代码示例和详细的解释。 使用数据驱动实现多个元素的切换 在 Vue.js 中,避免直接操作 DOM 是…

    2025年12月20日
    000
  • 使用原生 JavaScript 统计选中的复选框数量

    使用原生 JavaScript 统计选中的复选框数量 在前端开发中,经常需要统计页面上被选中的复选框数量,例如,在密码生成器中,根据用户选择的字符类型(数字、字母、特殊字符等)来评估密码强度。本文将介绍如何使用原生 JavaScript 高效地实现这一功能。 传统的方法可能需要循环遍历所有复选框元素…

    2025年12月20日
    000
  • Vue.js 中实现多个可切换元素的最佳实践:打造可复用的 Tooltip 组件

    本文旨在指导开发者使用 Vue.js 构建可复用的、易于管理的 Tooltip 组件。通过将 Tooltip 的数据和状态集中管理,并利用 Vue 的循环渲染和事件处理机制,可以避免 jQuery 式的 DOM 操作,实现更优雅、更高效的组件化开发。文章将提供详细的代码示例和逐步解释,帮助读者理解 …

    2025年12月20日
    000
  • 使用 jQuery 显示/隐藏除第一个元素外的所有元素

    本文旨在提供一种使用 jQuery 有效地显示或隐藏 HTML 结构中除第一个子元素之外的所有元素的方法。通过使用 :not(:first) 选择器,我们可以轻松地选择目标元素,并使用 show() 和 hide() 方法控制它们的可见性,从而避免不必要的循环操作,提高代码效率和可维护性。 在 We…

    2025年12月20日 好文分享
    000
  • 使用原生JavaScript统计选中的复选框数量

    在密码生成器等应用中,根据用户选择的字符类型(例如大小写字母、数字、特殊符号)来评估密码强度是一种常见的做法。本文将介绍如何使用原生JavaScript统计选中的复选框数量,并利用该数量动态更新密码安全指示器。 // 获取所有选中的复选框const checkedCount = document.q…

    2025年12月20日
    000
  • 使用 jQuery 显示和隐藏除第一个元素外的所有元素

    本文旨在提供一种使用 jQuery 快速有效地显示或隐藏 HTML 结构中除第一个子元素之外的所有元素的方法。通过使用 :not(:first) 选择器,我们可以轻松地定位并操作目标元素,从而避免不必要的循环,提高代码效率。本文将提供详细的代码示例和解释,帮助开发者理解和应用该技术。 在 Web 开…

    2025年12月20日 好文分享
    000
  • 使用 jQuery 优雅地显示/隐藏除第一个元素外的所有元素

    本文将介绍如何使用 jQuery 选择器来控制 HTML 元素的可视性,特别是隐藏或显示除第一个子元素之外的所有同级元素。通过使用 :not(:first) 选择器,我们可以避免不必要的循环,从而提高代码性能和可读性。 使用 jQuery 选择器 :not(:first) 在 Web 开发中,经常会…

    2025年12月20日 好文分享
    000
  • JavaScript 数组分组与按日期排序教程

    本教程旨在指导开发者如何使用 JavaScript 对包含日期和分组信息的对象数组进行分组,并按照日期进行排序。通过groupBy函数实现按指定属性分组,并结合sort方法按照日期降序排列,最终将分组后的数据扁平化,生成符合预期结果的数组。 需求分析 假设我们有一个包含对象的数组,每个对象都包含 d…

    2025年12月20日
    000
  • JavaScript 数组分组与按日期排序详解

    本文详细介绍了如何使用 JavaScript 对包含日期和分组信息的对象数组进行分组和排序。通过自定义 groupBy 函数实现按指定属性分组,并结合 sort 方法按日期进行排序,最终将分组后的数组扁平化,得到符合要求的排序结果。本文提供清晰的代码示例和详细的步骤说明,帮助开发者高效地处理类似的数…

    2025年12月20日
    000
  • JavaScript 数组分组与日期排序详解

    本文将详细介绍如何使用 JavaScript 对包含日期和分组信息的对象数组进行分组和排序。我们将首先按日期对数组进行降序排序,然后根据指定的属性(例如 “group”)对排序后的数组进行分组,最后将分组后的数据扁平化为一个新的数组。通过本文,你将掌握高效处理和组织复杂数据结…

    2025年12月20日
    000
  • Vue Composition API 中强制要求定义事件发射

    在 Vue Composition API 中,有时我们需要确保组件的使用者必须监听特定的事件。虽然 defineEmits 可以定义组件可以发出的事件,但它并不能强制使用者必须监听这些事件。本文介绍一种在开发环境下检查事件监听器是否被定义的方法,从而帮助开发者尽早发现潜在的问题。 检查事件监听器是…

    2025年12月20日
    000
  • Vue Composition API 中强制要求使用 emit 的方法

    本文介绍如何在 Vue Composition API 中强制要求组件使用者监听特定的 emit 事件。通过自定义函数,我们可以在开发环境下检测组件实例的 vnode props,判断是否定义了相应的事件监听器,从而在缺少必要的事件监听时发出警告,提高代码健壮性和可维护性。 在 Vue Compos…

    2025年12月20日
    000
  • Vue Composition API 中强制要求组件触发特定事件

    在 Vue Composition API 组件开发中,我们经常需要定义一些自定义事件,供父组件监听并执行相应的操作。然而,有时我们希望确保父组件必须监听某个特定的事件,否则可能会导致程序出现意料之外的行为。虽然 Vue 本身并没有提供直接强制要求监听事件的机制,但我们可以通过一些技巧来实现类似的效…

    2025年12月20日
    000
  • Vue 3 Composition API 中强制要求组件 emit 特定事件

    在 Vue 3 Composition API 中,defineEmits 用于声明组件可以触发的事件。然而,仅仅声明事件并不能强制组件的使用者监听这些事件。为了确保关键事件被正确处理,我们需要一种机制来检查组件使用者是否提供了相应的事件监听器。本文将介绍如何通过自定义函数实现这一功能,并在开发环境…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信