js实用技巧之去除数组或者对象里重复选项

 更新时间:2023年08月11日 10:23:12   作者:huyt-web  
这篇文章主要给大家介绍了关于js实用技巧之去除数组或者对象里重复选项的相关资料,JavaScript数组有很多内置方法,可以操作和处理数据,文中通过代码示例介绍的非常详细,需要的朋友可以参考下

前言

在 JavaScript 中,数组去重,对象去重,可以使用多种方法来去除数组或对象中的重复项。以下是其中的一些方法:

去除数组中的重复项

方法一:使用 Set

使用 Set 是去除数组中重复项的最简单和最快的方法。Set 对象是一组不重复的值的集合,可以接受一个数组(或者具有可迭代属性的其他对象)作为参数,并返回一个包含不重复元素的新数组。例如:

javascriptCopy code
const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

方法二:使用 filter 和 indexOf

使用 filter 和 indexOf 方法可以从数组中删除重复项。例如:

javascriptCopy code
const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

方法三:使用 reduce 和 includes

使用 reduce 和 includes 方法可以从数组中删除重复项。例如:

javascriptCopy code
const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = arr.reduce((prev, cur) => {
  if (!prev.includes(cur)) {
    prev.push(cur);
  }
  return prev;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

去除对象中的重复项

方法一:使用 for…in 和 hasOwnProperty

使用 for…in 循环遍历对象的属性,并使用 hasOwnProperty 方法检查属性是否是对象自身的属性。例如:

javascriptCopy code
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 3,
  e: 4,
  f: 4
};
const uniqueObj = {};
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    uniqueObj[obj[key]] = key;
  }
}
console.log(uniqueObj); // { '1': 'a', '2': 'b', '3': 'c', '4': 'e' }

方法二:使用 Object.keys 和 reduce

使用 Object.keys 方法获取对象的所有属性,然后使用 reduce 方法来去除重复项。例如:

javascriptCopy code
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 3,
  e: 4,
  f: 4
};
const uniqueObj = Object.keys(obj).reduce((prev, key) => {
  const value = obj[key];
  if (!prev.hasOwnProperty(value)) {
    prev[value] = key;
  }
  return prev;
}, {});
console.log(uniqueObj); // { '1': 'a', '2': 'b', '3': 'c', '4': 'e' }

以上是去除数组或对象中的重复项的几种方法。选择哪种方法取决于个人喜好和具体情况。

总结

到此这篇关于js实用技巧之去除数组或者对象里重复选项的文章就介绍到这了,更多相关js去除数组对象重复选项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS中的一些常用的函数式编程术语

    JS中的一些常用的函数式编程术语

    这篇文章主要介绍了JS中的一些常用的函数式编程术语,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
    2019-06-06
  • Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    这篇文章主要介绍了Bootstrap弹出框(modal)垂直居中的问题及解决方案详解的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Javascript 访问样式表实现代码

    Javascript 访问样式表实现代码

    Javascript访问样式表--又一篇好文章
    2009-08-08
  • 微信小程序中target和currentTarget的区别小结

    微信小程序中target和currentTarget的区别小结

    这篇文章主要给大家介绍了关于微信小程序中target和currentTarget区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • js千分位实现方法大汇总

    js千分位实现方法大汇总

    这篇文章主要介绍了js千分位实现方法大汇总,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 前端js中的事件循环eventloop机制详解

    前端js中的事件循环eventloop机制详解

    这篇文章主要给大家介绍了关于前端js中事件循环eventloop机制的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js实现视图和数据双向绑定的方法分析

    js实现视图和数据双向绑定的方法分析

    这篇文章主要介绍了js实现视图和数据双向绑定的方法,结合实例形式分析了vue.js及jQuery数据绑定相关操作技巧与注意事项,需要的朋友可以参考下
    2020-02-02
  • JavaScript中频繁垃圾回收(GC)的避免方法与实践

    JavaScript中频繁垃圾回收(GC)的避免方法与实践

    在现代 Web 应用中,JavaScript 的垃圾回收机制(GC)承担着自动内存管理的职责,但如果不加控制,频繁的 GC 会导致性能抖动、帧率下降,甚至出现 UI 卡顿,本文将系统性地探讨如何避免 GC 频繁触发,需要的朋友可以参考下
    2025-07-07
  • JavaScript使用lodash实现命名转换和函数封装

    JavaScript使用lodash实现命名转换和函数封装

    Lodash 是一个 JavaScript 的工具库,它提供了一系列的函数来简化代码编写,本文主要为大家介绍了如何使用lodash实现命名转换和函数封装,感兴趣的小伙伴可以了解下
    2023-11-11
  • 鼠标事件延时切换插件

    鼠标事件延时切换插件

    为了防止误操作,很多时候需要对鼠标滑过触发的事件进行延时处理。网易首页的选项卡好几年之前就添加了这个特性,当时我记得是采用150毫秒作为触发基准
    2011-03-03

最新评论