如何使用 JavaScript 向数组末尾添加元素并去重,然后逆序返回指定数量的元素?

如何使用 javascript 向数组末尾添加元素并去重,然后逆序返回指定数量的元素?

本文介绍一个JavaScript函数,实现向数组末尾添加元素、去除重复元素,并逆序返回指定数量元素的功能。

以下是一些测试用例:

// 测试用例1let list1 = [    { id: 2 },    { id: 3 },    { id: 4 }];let newelement1 = { id: 2 };console.log(updateList(list1, newelement1)); // 预期输出: [{id: 2}, {id: 3}, {id: 4}]// 测试用例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}]// 测试用例3let list3 = [    { id: 1 },    { id: 2 },    { id: 3 },    { id: 4 }];let newelement3 = { id: 5 };console.log(updateList(list3, newelement3)); // 预期输出: [{id: 5}, {id: 4}, {id: 3}]

实现代码如下:

function updateList(list, newElement) {    // 处理非数组输入    if (!Array.isArray(list)) {        list = [];    }    // 对象比较函数    const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);    // 查找并移除重复元素    list = list.filter(item => !isEqual(item, newElement));    // 添加新元素    list.push(newElement);    // 逆序返回后三个元素    return list.slice(-3).reverse();}

该函数首先检查输入是否为数组,如果不是则初始化为空数组。然后使用JSON.stringify进行对象比较,找到并移除与新元素相同的元素。接着将新元素添加到数组末尾,最后截取数组后三个元素并逆序返回。 此方法比使用Object.keysevery方法更高效简洁。 该函数确保了即使输入是空数组或非数组,也能正常运行,并处理了对象比较的问题,使其更加健壮。

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

以上就是如何使用 JavaScript 向数组末尾添加元素并去重,然后逆序返回指定数量的元素?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 02:33:09
下一篇 2025年12月15日 02:57:59

相关推荐

  • 如何在Konva.js中实现命令类Command类以支持撤销和重做功能?

    Konva.js中基于命令模式的撤销重做功能实现 本文介绍如何在Konva.js绘图应用中,利用命令模式实现撤销(Ctrl+Z)和重做(Ctrl+Y)功能。 我们将图形操作封装成命令对象,并使用命令栈管理这些操作,从而实现图形编辑的回退和前进。 首先,定义一个基础Command类: class Co…

    好文分享 2025年12月20日
    000
  • 如何在Tampermonkey中实现对多个链接的GET请求并依次判断条件?

    Tampermonkey中依次处理多个GET请求并进行条件判断 在Tampermonkey脚本中,需要对多个链接发起GET请求,并根据返回结果依次进行条件判断,直到满足条件或处理完所有链接。 直接使用GM_xmlhttpRequest并发请求并不能满足“依次判断”的需求,因为GM_xmlhttpRe…

    2025年12月20日
    000
  • ECharts柱状图浮点数计算结果如何精确显示?

    ECharts柱状图浮点数精度处理技巧 在用ECharts制作柱状图时,常常会遇到浮点数计算精度问题。例如,数据计算后可能出现类似“2897.3 + 5451.6 = 8348.900000000001”这样的结果,影响图表的美观和数据准确性。本文将讲解如何精确显示ECharts柱状图中的浮点数计算…

    2025年12月20日
    000
  • 如何用ECharts绘制展示每日数值的年度图表?

    用echarts直观展现每日数据的年度变化趋势 许多数据分析场景都需要将每日数据以清晰、直观的方式呈现。本文将指导您如何使用ECharts创建年度图表,该图表以0-30为纵轴数值,以1月1日至12月31日为横轴日期,完美展现全年每日数值的波动情况。 ECharts强大的日历坐标系(calendar)…

    2025年12月20日
    000
  • 如何使用JavaScript插件高效导出Excel表格并自定义列顺序和单元格样式?

    利用JavaScript插件高效导出Excel表格,并自定义列顺序和单元格样式 本文介绍如何使用JavaScript插件导出表格数据,并灵活调整导出Excel表格的列顺序和单元格样式,例如设置单元格背景颜色。 文中将重点解决如何调整列顺序(例如,“姓名”和“城市”两列互换)以及设置所有单元格背景色为…

    2025年12月20日
    000
  • 在Vue中如何实现类似微信聊天记录的滚动加载效果?

    Vue.js模拟微信聊天记录滚动加载效果 本文演示如何在Vue.js应用中实现类似微信聊天记录的滚动加载效果。当用户滚动到顶部时,加载更多聊天记录,并保持滚动条在当前位置,而非回到顶部。 以下代码提供了一个完整的实现方案: {{ item }} import { ref, onMounted, ne…

    好文分享 2025年12月20日
    000
  • 在使用vant框架的密码输入框时,眼睛图标为什么会消失?如何解决?

    Vue3 Vant密码输入框自定义显示/隐藏密码图标 在使用Vue3和Vant框架开发时,您可能会遇到Vant密码输入框自带密码显示/隐藏功能缺失或显示异常的问题。 这通常是因为浏览器默认的密码输入框样式与Vant组件样式冲突导致的。 解决方法是自定义密码显示/隐藏功能,并隐藏浏览器默认的图标。 问…

    2025年12月20日
    200
  • 在pnpm和monorepo项目中如何指定本地包的版本?

    pnpm与monorepo项目中本地包版本指定方法 在使用pnpm和monorepo管理多包项目时,常常需要在项目间共享本地包。本文将详细说明如何在pnpm和monorepo环境下正确添加并指定本地包版本。 假设您有一个名为abcd的全局组件,需要将其1.0.0版本添加到名为project1的项目中…

    2025年12月20日
    000
  • Element Plus表格组件max-height失效?如何让表格高度自适应并显示滚动条?

    element plus表格组件max-height属性失效及解决方法 在使用Element Plus开发过程中,我们经常会遇到需要表格高度根据内容动态变化,但又不能无限伸长的需求。理想情况下,表格高度应随着内容增长而增长,直至达到父元素的100%,并出现滚动条以显示超出部分的内容。然而,直接为el…

    好文分享 2025年12月20日
    000
  • 如何在前端实现多品牌高拍仪的拍照上传功能?

    前端集成多品牌高拍仪拍照上传功能 在现代办公场景中,高拍仪已成为高效扫描和上传文档的常用工具。然而,市面上高拍仪品牌和型号众多,给前端开发者集成统一的拍照上传功能带来挑战。本文探讨如何构建一个前端解决方案,兼容多种品牌的高拍仪。 挑战与需求 目标是开发一个前端程序,能够调用不同品牌的高拍仪进行拍照并…

    2025年12月20日
    000
  • 为什么vue-router跳转后控制台网络中没有页面请求信息?

    Vue-Router跳转后控制台无网络请求的原因 使用vue-router进行页面跳转时,浏览器控制台的网络选项卡可能不会显示新的请求,这与vue-router基于spa(单页应用)的架构有关。 刷新页面则会显示请求,这是因为刷新会触发服务器端重新加载整个页面。 让我们更清晰地解释: 当您使用Vue…

    好文分享 2025年12月20日
    300
  • Canvas透明图片如何精准描边?

    Canvas透明图片精准描边技巧 在使用Canvas处理图片时,为透明背景图片添加精准轮廓描边常常是一个挑战。本文提供一种有效的解决方案,避免描边溢出到透明区域。 下图展示了需要解决的问题:(此处应插入题干中提供的图片) 直接使用Canvas的strokeStyle和stroke()方法无法实现精准…

    2025年12月20日
    100
  • 如何在Quill编辑器中实现文本标注的嵌套效果?

    Quill编辑器:巧妙实现文本标注嵌套 在Quill编辑器中进行文本标注时,处理重叠标注的嵌套效果至关重要。本文提供一种解决方案,有效解决多个标注索引重叠的情况。 首先,我们回顾下常见的需求和代码片段: 示例数据: const response = { “errorwordlist”: [ { “a…

    2025年12月20日
    000
  • 在鸿蒙应用开发中,如何捕获用户的交互行为?

    鸿蒙应用开发中,有效捕获用户交互行为至关重要。本文将介绍如何在鸿蒙系统中监听用户点击等事件,替代传统开发中的window.on方法。 鸿蒙系统不直接支持window.on方式。但提供了其他机制来处理用户交互: 组件事件监听: 对于按钮等组件,使用相应的事件监听器方法。例如,按钮点击事件可以使用set…

    2025年12月20日
    200
  • TypeScript接口如何精确表示SQLite的DATETIME类型?

    TypeScript接口映射SQLite DATETIME类型 在TypeScript中定义接口来映射SQLite数据库的DATETIME类型时,选择合适的类型至关重要,这直接关系到类型安全性和数据库数据的一致性。本文将探讨如何用TypeScript接口精确表示SQLite的DATETIME类型(例…

    2025年12月20日
    100
  • console.log输出结果差异:两次调用为何不同?

    console.log输出差异的深入解析 本文分析一段代码中console.log函数输出结果的差异,并解释其根本原因。代码片段涉及URL参数解析和console.log的不同调用方式,导致输出结果存在细微差别。 代码首先定义getUrlParams函数,用于解析URL参数,返回一个包含所有参数的对…

    2025年12月20日
    100
  • 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中?

    JavaScript数组元素合并:将相同ID的元素合并到一个对象中 在数据处理中,经常需要将具有相同ID的数组元素合并成单个对象。本文提供一种JavaScript解决方案,将具有相同ID但属性不同的数组元素,转换成新的数组格式。 原始数据格式: const list = [ { id: “20230…

    2025年12月20日
    200
  • 企业微信中的JS资源缓存问题如何解决?

    企业微信JS资源缓存难题及应对策略 企业微信环境下的JS资源缓存问题,常常导致项目升级后部分用户无法体验最新功能。例如,新增埋点追踪功能后,同一用户在同一时间段访问同一页面,却可能加载到不同版本的JS资源(带埋点或不带埋点)。这并非个例,而是企业微信内置浏览器强缓存策略所致:资源一旦缓存,除非手动刷…

    2025年12月20日
    000
  • Async/Await中回调函数如何优雅退出?

    在Async/Await中优雅地终止回调函数 使用async/await进行异步操作时,如何安全地从一个执行时间不确定的回调函数中退出,是一个常见挑战。本文将针对一个场景,演示如何在async/await环境下有效控制回调函数的退出。 问题: 代码使用MutationObserver监听按钮属性变化…

    2025年12月20日
    000
  • Vue Material Year Calendar插件:activeDates.push后日历不更新选中状态怎么办?

    Vue Material Year Calendar插件:activeDates.push后日历选中状态更新失败的解决方法 使用vue-material-year-calendar插件时,开发者经常遇到一个问题:将日期添加到activeDates数组后,日历界面无法更新选中状态。本文分析并解决此问题…

    2025年12月20日
    100

发表回复

登录后才能评论
关注微信