js对象数组去重的方法

答案:对象数组去重需根据唯一属性、多属性组合或完全深比较判断重复。1. 按单字段如id去重可用reduce或Map结构;2. 多字段组合可拼接key或用JSON.stringify生成标识;3. 全属性相同可用JSON.stringify比较,但不支持undefined、函数等值,推荐lodash的_.isEqual;4. 使用lodash的uniqBy方法更简洁高效。选择方法应基于数据结构和性能需求。

js对象数组去重的方法

JavaScript中对对象数组去重是一个常见需求,由于对象是引用类型,不能直接用原始值的方式比较。以下是几种实用的去重方法,适用于不同场景。

1. 基于某个唯一属性去重(如id)

如果你的对象数组中有某个字段是唯一的(比如id),可以用这个字段作为判断依据,使用reduce或Map结构来去重。

示例:

const arr = [  { id: 1, name: 'Alice' },  { id: 2, name: 'Bob' },  { id: 1, name: 'Alice' }];const unique = arr.reduce((acc, curr) => {  if (!acc.some(item => item.id === curr.id)) {    acc.push(curr);  }  return acc;}, []);

或者更高效地使用Map:

const unique = Array.from(  new Map(arr.map(item => [item.id, item])).values());

这种方式利用Map的键唯一性,把id作为键,自动覆盖重复项。

2. 基于多个属性组合去重

如果需要根据多个字段联合判断是否重复,可以将这些字段拼接成字符串或使用JSON.stringify生成唯一标识。

const arr = [  { name: 'Alice', age: 25 },  { name: 'Bob', age: 30 },  { name: 'Alice', age: 25 }];const seen = new Set();const unique = arr.filter(item => {  const key = `${item.name}-${item.age}`;  if (seen.has(key)) {    return false;  }  seen.add(key);  return true;});

你也可以用JSON.stringify([item.name, item.age])作为key,灵活控制比对字段。

3. 完全深比较去重(所有属性都相同才算重复)

当你要判断整个对象是否完全一样时,可借助深比较函数。虽然JSON.stringify简单,但要注意:属性顺序会影响结果。

const unique = arr.filter((item, index) => {  return index === arr.findIndex(obj =>     JSON.stringify(obj) === JSON.stringify(item)  );});

注意:这种方法不适用于包含undefined、函数、Symbol等无法被序列化的值。生产环境建议使用lodash的_.isEqual。

4. 使用 lodash 库简化操作

如果你项目中用了lodash,可以直接使用_.uniqBy方法,简洁又可靠。

import { uniqBy } from 'lodash';const unique = uniqBy(arr, 'id'); // 按id去重// 或const unique = uniqBy(arr, item => `${item.name}-${item.age}`);

基本上就这些。选择哪种方式取决于你的数据结构和性能要求。小数据量用filter + findIndex没问题,大数据推荐用Map或Set提升效率。关键是明确“重复”的定义:是某个字段相同?还是全部属性一致?

以上就是js对象数组去重的方法的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 02:13:08
下一篇 2025年12月21日 02:13:21

相关推荐

  • JavaScript代码压缩与混淆原理浅析_js工程化

    代码压缩与混淆通过减小体积和增加逆向难度提升性能与安全性,常用工具如Terser和JavaScript Obfuscator,在Webpack、Vite等工程化工具中集成,生产环境应权衡压缩、混淆强度与可维护性。 JavaScript代码压缩与混淆是前端工程化中不可或缺的一环,尤其在生产环境中,它直…

    2025年12月21日
    000
  • 利用Node.js的EventEmitter实现自定义事件

    EventEmitter是Node.js中实现事件驱动编程的核心工具,通过继承可为对象添加监听与触发事件能力。首先从events模块导入:const { EventEmitter } = require(‘events’);,接着创建类继承EventEmitter以使用on、…

    2025年12月21日
    000
  • HTML Canvas生成24位深度TIFF图像教程

    本教程将指导您如何通过控制html canvas的颜色空间,从默认的32位深度输出转换为24位深度的tiff图像。核心方法是在获取canvas 2d上下文或创建imagedata时,明确指定`colorspace`为`’srgb’`,以确保颜色数据按预期处理和导出,从而解决因…

    2025年12月21日
    000
  • Excel VBA与OfficeJS Add-in通信:理解限制与官方建议

    本文探讨了在excel vba中监听事件并调用officejs add-in中javascript/typescript函数的尝试。核心结论是,office javascript api目前不支持vba与officejs add-in之间的直接双向通信。文章解释了这种限制背后的原因,并建议通过官方渠…

    2025年12月21日
    000
  • 深入理解JavaScript闭包及其应用场景_javascript技巧

    闭包是函数访问并记住外部作用域变量的机制,如inner函数保留对outer中count的引用,使count在outer执行后仍存在于内存中。 闭包是JavaScript中一个核心且强大的概念,理解它对掌握异步编程、模块化开发和函数式编程至关重要。简单来说,闭包是指一个函数能够访问并记住其外部作用域中…

    2025年12月21日
    000
  • Svelte与Vite构建多模块应用在Webflow中的变量隔离指南

    本文旨在解决在webflow等页面中加载多个svelte+vite构建的javascript文件时,因全局变量冲突导致的脚本执行失败问题。我们将探讨两种核心解决方案:利用es模块的type=”module”属性实现作用域隔离,以及通过vite的库模式(library mode…

    2025年12月21日
    000
  • React组件命名约定:文件与组件名称的最佳实践

    本文深入探讨React组件的命名约定,重点区分了组件文件命名与组件本身命名的大小写规则。明确指出,虽然组件文件命名没有强制规定,但自定义React组件名称必须以大写字母开头,以避免与标准HTML元素混淆,确保JSX正确解析和渲染。 在React开发中,开发者经常会注意到组件文件和组件本身的命名似乎遵…

    2025年12月21日
    000
  • NestJS中DTO方法使用的最佳实践与职责划分

    数据传输对象(dto)在nestjs中主要用于封装和验证请求或响应数据,其核心职责是保持简洁和无业务逻辑。本文探讨了在dto中添加公共方法的边界,指出虽然特定于dto内部数据的简单操作可能被接受,但通用的数据转换(如大小写转换)和所有业务逻辑都应通过nestjs的转换管道、装饰器或服务层来处理,以维…

    2025年12月21日
    000
  • JavaScript 代码规范:ESLint 配置与规则定制

    ESLint 是提升 JavaScript 代码质量的关键工具,通过配置 env、extends、parserOptions 和 rules 可实现环境识别、规则继承与语法支持;结合 eslint-config-prettier 避免格式冲突,引入 eslint-plugin-react 等插件适配…

    2025年12月21日
    000
  • 正确配置与使用 Express Session 的教程

    本教程旨在详细指导如何在 Express 应用中正确配置和使用 `express-session` 中间件。文章将重点阐述 `express-session` 的正确集成方式,避免常见的配置错误,并深入探讨 Node.js 模块的本地与全局安装差异及其对项目依赖管理的影响,确保会话功能能够稳定可靠地…

    2025年12月21日
    000
  • Excel VBA与OfficeJS互操作性:监听事件与函数调用限制解析

    本文深入探讨了在excel vba中监听事件并尝试调用officejs函数的技术挑战。明确指出,office javascript api(officejs)目前不直接支持vba与officejs之间的双向通信。文章解释了这种限制的根本原因,并强调了现有架构下无法通过`msscriptcontrol…

    2025年12月21日
    000
  • Cypress测试中高效管理与复用数据:深入理解别名(Aliases)

    在cypress测试中,如何在异步操作(如api响应处理)中创建并有效复用数据对象是一个常见挑战。本文将深入探讨cypress的别名(aliases)机制,演示如何利用cy.wrap()和.as()将复杂数据结构安全地存储为别名,并在测试的不同阶段通过cy.get()进行检索和使用,从而解决变量作用…

    2025年12月21日
    000
  • 如何创建一个分页组件插件_JavaScript分页插件开发与功能实现教程

    答案:开发一个轻量级JavaScript分页插件,通过封装分页逻辑实现可复用性。首先设计包含container、total、pageSize、currentPage、maxVisiblePages和callback等参数的配置结构,计算总页数并生成DOM;核心逻辑包括根据当前页动态计算显示页码范围,…

    2025年12月21日
    000
  • JSSet数据结构怎么用_JavaScriptSet集合使用方法与去重技巧

    JavaScript中的Set用于存储唯一值,自动去重,支持add、delete、has、clear方法及size属性,可通过展开运算符与数组互转,适合处理数组去重和集合运算(并集、交集、差集),但对象去重需结合Map或属性判断。 JavaScript 中的 Set 是一种内置的数据结构,用于存储唯…

    2025年12月21日
    000
  • 使用JavaScript实现一个简单的路由_js SPA

    单页应用通过JavaScript路由实现视图切换,利用hash变化监听动态更新内容,支持静态路径映射与动态参数匹配,提升用户体验且无需服务端配合,适用于小型项目。 单页应用(SPA)通过动态更新页面内容,避免整页刷新,提升用户体验。JavaScript 路由是实现 SPA 的核心机制之一。下面介绍如…

    2025年12月21日
    000
  • Js如何存储执行上下文

    JavaScript通过执行上下文栈管理代码执行,首先创建全局上下文并压入栈底;每当调用函数时,会创建新的函数执行上下文并压入栈顶,执行完毕后出栈,控制权交还上层上下文。每个执行上下文包含词法环境、变量环境和this绑定三部分,其中词法环境处理let/const声明及作用域链,变量环境处理var声明…

    好文分享 2025年12月21日
    000
  • JS闭包原理怎么理解_JS闭包概念与实际应用场景详解

    闭包是函数记住并访问其词法作用域的机制,即使在外部函数执行完毕后仍能访问内部变量。如outer函数中的inner函数通过闭包保留对count的访问权,实现计数累加;闭包还用于创建私有变量、解决循环中异步回调共享变量问题及函数工厂等场景,但需注意可能引发内存泄漏和意外共享。 闭包是JavaScript…

    2025年12月21日
    000
  • React中异步操作与状态管理的最佳实践:useEffect在认证路由中的应用

    本文深入探讨了react中`usestate`异步更新的特性,以及在处理异步数据获取(如用户认证)时,如何正确使用`useeffect`钩子。通过一个私有路由组件的实例,文章详细阐述了将异步逻辑封装在`useeffect`中、处理竞态条件、以及管理加载状态的最佳实践,旨在帮助开发者构建更健壮、响应更…

    2025年12月21日
    000
  • JavaScript中的代码分割与动态导入

    代码分割是一种通过打包工具将大文件拆分为小块的构建策略,结合动态导入实现按需加载。常见方式包括入口点分割、公共依赖提取和路由级分割,其中动态导入使用 import() 语法异步加载模块,支持条件加载与错误处理。在 React 中可配合 React.lazy 和 Suspense 实现路由懒加载,通过…

    2025年12月21日
    000
  • Coloris.js:实现页面加载时自动打开颜色选择器

    本文详细介绍了如何使用coloris.js库,在网页加载时自动打开颜色选择器。核心方法是结合`inline: true`配置选项与正确的css容器定位(`position: relative`或`absolute`),并指定`parent`容器。通过此教程,您将学会如何设置html结构、css样式以…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信