如何在JavaScript中向数组添加新元素并处理重复项及倒序返回最后3个元素?

如何在javascript中向数组添加新元素并处理重复项及倒序返回最后3个元素?

JavaScript数组高级操作:去重、添加及倒序截取

本文介绍一个JavaScript函数updateList,该函数实现以下功能:向数组末尾添加新元素,去除与新元素相同的现有元素(支持对象比较),并倒序返回数组末尾的三个元素。

函数updateList接受两个参数:目标数组list和待添加的新元素newElement。 它首先检查list是否为数组,如果不是,则将其初始化为空数组。 核心功能在于精准地比较新元素与数组中已有元素是否完全相同,即使是对象也能正确比较。

以下是函数的实现代码:

function updateList(list, newElement) {    // 初始化为空数组,处理非数组输入    if (!Array.isArray(list)) {        list = [];    }    // 对象深度比较函数    const isEqual = (obj1, obj2) => {        if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {            return obj1 === obj2;        }        const keys1 = Object.keys(obj1);        const keys2 = Object.keys(obj2);        if (keys1.length !== keys2.length) return false;        return keys1.every(key => isEqual(obj1[key], obj2[key]));    };    // 查找并移除重复元素    list = list.filter(item => !isEqual(item, newElement));    // 添加新元素    list.push(newElement);    // 倒序返回末尾三个元素    return list.slice(-3).reverse();}

下面是一些测试用例,验证函数的正确性:

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

// 测试用例1let list1 = [{ id: 2 }, { id: 3 }, { id: 4 }];let newElement1 = { id: 2 };console.log(updateList(list1, newElement1)); // 输出: [{id: 4}, {id: 3}, {id: 2}]// 测试用例2let list2 = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];let newElement2 = { id: 3 };console.log(updateList(list2, newElement2)); // 输出: [{id: 3}, {id: 2}, {id: 1}]// 测试用例3 (处理非数组输入)let list3 = null;let newElement3 = { id: 5 };console.log(updateList(list3, newElement3)); // 输出: [{id: 5}]// 测试用例4 (对象比较)let list4 = [{name: 'apple', color: 'red'}, {name: 'banana', color: 'yellow'}];let newElement4 = {name: 'apple', color: 'red'};console.log(updateList(list4, newElement4)); // 输出: [{name: 'banana', color: 'yellow'}, {name: 'apple', color: 'red'}]

该函数使用了filter方法高效地移除重复元素,并利用slicereverse方法简洁地处理数组的倒序截取。 isEqual函数确保了对对象进行精确的深度比较,避免了浅比较可能造成的错误。 通过这些测试用例,可以清晰地看到函数的各项功能都得到了正确的实现。

以上就是如何在JavaScript中向数组添加新元素并处理重复项及倒序返回最后3个元素?的详细内容,更多请关注创想鸟其它相关文章!

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

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

相关推荐

  • 在Vuex应用中根据对象键值获取唯一数组的策略与实践

    本文详细探讨了在Vuex应用中,如何通过特定对象键(如trip_class)高效地过滤并生成一个包含唯一对象的数组。文章分析了reduce方法在使用find进行查重时的常见陷阱,并提供了正确的实现方式,同时介绍了其他多种去重策略,旨在帮助开发者优化数据处理逻辑,确保数据唯一性,提高数据处理效率和代码…

    2025年12月20日
    000
  • React中嵌套setTimeout异步状态更新的最佳实践与陷阱规避

    本文深入探讨了在React函数组件中使用嵌套setTimeout进行状态更新时常见的陷阱——状态覆盖问题。通过分析问题根源,文章详细阐述了两种核心解决方案:利用状态更新函数确保基于最新状态的累加更新,以及通过useEffect的清理机制来有效管理定时器,避免潜在的内存泄漏和组件卸载后的错误。文章提供…

    2025年12月20日
    000
  • JavaScript中异步操作的状态管理

    javascript异步操作的状态管理旨在优雅处理耗时任务,避免回调地狱并保持界面流畅。1. promise提供结构化异步处理方式,通过resolve和reject控制成功或失败状态,结合.then和.catch处理结果或错误;2. async/await是基于promise的语法糖,使异步代码更易…

    2025年12月20日 好文分享
    000
  • JavaScript中异步编程的安全考虑

    异步编程在javascript中引入了时间不确定性,导致竞态条件、数据泄露、错误处理缺失等安全风险。核心解决措施包括:1. 严格验证输入并编码输出;2. 使用互斥锁或信号量管理共享资源;3. 强化状态管理和前置同步安全检查;4. 设计幂等性api并控制异步流程顺序;5. 全面使用try……

    2025年12月20日 好文分享
    000
  • JavaScript/Vuex 中基于指定键值对数组对象进行高效去重

    本文旨在详细阐述如何在 JavaScript 环境(尤其是在 Vuex 的 computed 属性中)对数组对象进行去重操作,使其仅保留指定键(如 trip_class)值唯一的对象。文章将分析常见错误,并提供基于 reduce 方法和 Map 对象的两种高效解决方案,辅以清晰的代码示例和性能考量,…

    2025年12月20日
    000
  • JavaScript/Vuex:高效过滤对象数组,确保特定键值唯一性

    本文旨在探讨在JavaScript环境中,尤其是在Vuex应用中,如何高效地从一个对象数组中筛选出具有特定键值唯一性的元素。我们将详细分析常见的过滤方法,包括reduce、Map和Set的运用,并提供具体的代码示例,帮助开发者正确实现数据去重,避免常见错误,并确保代码的健壮性和性能。 在前端开发中,…

    2025年12月20日
    000
  • 如何基于指定键值获取Vuex状态中唯一的对象数组

    本文详细介绍了在Vue.js应用中,如何利用Vuex存储的数据,对一个包含重复对象的数组进行去重操作,使其基于某个特定键(如trip_class)只保留唯一的对象。文章分析了reduce方法在使用中常见的逻辑错误,并提供了正确的reduce实现方案,同时引入了更高效、简洁的Map对象去重策略,旨在帮…

    2025年12月20日
    000
  • 使用 JavaScript 展开运算符高效创建对象数组

    本文旨在讲解如何使用 JavaScript 的展开运算符,将包含对象信息的数组转换为一个以 objectid 为键,包含对应联系人信息的对象数组。我们将分析常见问题,并提供一种简洁高效的解决方案,帮助开发者更好地理解和运用展开运算符。 在 JavaScript 中,处理数组并将其转换为特定格式的对象…

    2025年12月20日
    000
  • 使用 JavaScript 展开运算符将数组转换为对象数组

    本文旨在介绍如何利用 JavaScript 中的展开运算符,将一个包含对象数据的数组转换为一个以 objectid 为键、包含 contacts 数组的对象数组。通过示例代码和详细解释,帮助读者理解并掌握这种高效的数据转换方法。 在 JavaScript 中,经常需要对数组数据进行转换和重塑。本文将…

    2025年12月20日
    000
  • 事件循环和JavaScript的内存管理有什么关系?

    事件循环决定代码执行时机,直接影响变量何时创建和变得不可达,从而影响垃圾回收;2. 内存泄漏常因未移除事件监听器、未清除定时器、滥用全局变量或闭包导致,这些都与事件循环调度的任务生命周期有关;3. javascript使用标记-清除算法回收内存,现代引擎如v8还采用分代回收和增量回收优化性能;4. …

    2025年12月20日 好文分享
    000
  • 事件循环中的I/O阶段指的是什么?

    i/o阶段是事件循环中负责收集已完成异步i/o操作回调并放入执行队列的机制,它不执行i/o而是接收操作系统通知;2. 它确保程序非阻塞运行,像调度员一样让主线程持续处理任务而不被外部资源等待卡住;3. 非阻塞i/o是其基础,操作系统通过epoll/kqueue等机制通知事件循环哪些i/o已就绪;4.…

    2025年12月20日 好文分享
    000
  • 纯JavaScript实现IPFS文件上传与固定:策略、服务与实践

    IPFS并非传统意义上的存储提供商,而是去中心化文件系统协议。要将文件(特别是NFT图像)高效且持久地添加到IPFS网络,推荐使用专业的IPFS固定服务,如Pinata或nft.storage。这些服务通常提供API接口,允许开发者通过纯JavaScript进行文件上传与固定操作,且多数提供免费层级…

    2025年12月20日
    000
  • Vue.js 3 应用卸载与重新挂载:避免重复挂载的实用指南

    在 Vue.js 3 单页应用开发中,有时会遇到页面刷新或重新进入时,控制台出现 [Vue warn]: There is already an app instance mounted on the host container. 警告,提示应用实例已被挂载。这通常意味着在同一个挂载点重复执行了 …

    2025年12月20日
    000
  • 构建基于Node.js的轻量级网站内容管理面板:集成WYSIWYG编辑器实践

    本文探讨了如何在Node.js项目中构建一个轻量级的管理面板,以实现网站文本和图片的便捷修改。针对无需复杂CMS的需求,文章推荐了QuillJS和ContentTools等所见即所得(WYSIWYG)编辑器作为前端解决方案,并详细阐述了其与Node.js后端集成时所需的关键步骤,包括认证、数据持久化…

    2025年12月20日
    000
  • Vue.js 3 Composition API 中单页应用卸载与重载的正确姿势

    本文旨在解决 Vue.js 3 Composition API 单页应用中,页面刷新或重新加载时出现的重复挂载问题。通过检测现有挂载点,避免重复创建应用实例,并提供卸载旧实例的方案,确保应用的生命周期管理更加规范,避免潜在的性能问题和逻辑错误。 在 Vue.js 3 的单页应用开发中,尤其是在使用 …

    2025年12月20日
    000
  • async函数中的竞态条件避免

    异步函数中的竞态条件是指多个异步操作同时修改共享数据导致结果不可预测。1. 解决方案核心是控制并发和管理状态;2. 可使用异步锁(mutex)机制,通过promise链确保操作串行化;3. 可将操作队列化,确保顺序执行;4. 使用abortcontroller取消旧请求,仅保留最新请求;5. asy…

    2025年12月20日 好文分享
    000
  • 动态配置日期选择器:实现双周日期自动选择

    本教程旨在指导如何在日期选择器中动态启用特定日期,特别是如何通过JavaScript逻辑自动计算并选择每两周一次的日期,从而避免手动列举,显著提升日期选择功能的灵活性和可维护性。文章将详细阐述其实现原理、提供代码示例,并探讨相关注意事项。 动态日期选择的必要性 在网页应用中,日期选择器(Date P…

    好文分享 2025年12月20日
    000
  • React Native表单验证:实现实时错误消息显示

    本教程详细阐述了如何在React Native应用中,利用React Context API和Styled Components,实现表单字段(如邮箱)的实时验证及错误消息显示。文章通过具体代码示例,指导开发者如何将验证逻辑与UI组件有效结合,确保用户输入时即时获得反馈,从而提升用户体验。 引言:R…

    2025年12月20日
    000
  • React Native表单:实现输入框级别的实时错误消息显示

    本教程详细讲解如何在React Native应用中,利用React Context和组件化思想,为表单输入框(特别是邮件地址)实现实时、精准的错误消息显示。我们将探讨如何管理验证状态,并通过自定义输入组件将错误信息直观地呈现给用户,提升用户体验。 1. 引言:React Native表单错误处理的挑…

    2025年12月20日
    000
  • React Native表单实时错误提示:实现邮箱格式验证与显示

    本教程详细阐述如何在React Native应用中实现实时的表单输入验证,特别是邮箱格式验证,并向用户显示具体的错误提示。文章将深入探讨如何利用React Context API管理验证逻辑和错误状态,以及如何改造自定义输入组件(如AuthInput)以接收并渲染字段级的错误信息,从而提供即时、友好…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信