首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

去除重复数据 js

在 JavaScript 中去除重复数据常见的方法有以下几种:

一、使用 Set 对象

Set 是 ES6 引入的一种新的数据结构,它类似于数组,但是成员的值都是唯一的。

示例代码:

代码语言:txt
复制
const array = [1, 2, 2, 3, 3, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4]

优势:

  • 简洁高效,代码量少。

应用场景:

  • 处理简单的数值或字符串数组去重。

二、使用 filter 方法结合 indexOf

示例代码:

代码语言:txt
复制
const array = [1, 2, 2, 3, 3, 4];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // [1, 2, 3, 4]

优势:

  • 兼容性较好,适用于较旧的浏览器。

应用场景:

  • 对于不支持 Set 的环境或者需要更复杂的去重条件时使用。

三、使用对象属性

通过将数组元素作为对象的属性名来实现去重。

示例代码:

代码语言:txt
复制
const array = [1, 2, 2, 3, 3, 4];
const obj = {};
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
  if (!obj[array[i]]) {
    obj[array[i]] = true;
    uniqueArray.push(array[i]);
  }
}
console.log(uniqueArray); // [1, 2, 3, 4]

优势:

  • 性能在一定情况下较好。

应用场景:

  • 处理大量数据且对性能有一定要求的情况。

可能出现的问题及原因:

  • 如果数组中的元素是对象或者其他复杂类型,直接使用上述方法可能无法正确去重,因为对象的比较是基于引用的,而不是值。

解决方法:

  • 对于对象数组,可以根据对象的特定属性进行去重。

示例代码:

代码语言:txt
复制
const array = [{id: 1}, {id: 2}, {id: 1}];
const uniqueArray = array.filter((item, index, self) =>
  index === self.findIndex((t) => t.id === item.id)
);
console.log(uniqueArray); // [{id: 1}, {id: 2}]
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • js 数组去除重复数据-5 个提升你 JS 编码水平的实例

    ]   虽然 2020 的今天,各种前端框架、工具林立,而这些框架跟工具也帮我们提前解决了不少麻烦的问题,但是工具始终是工具,扎实的基本功才是最核心的,现在一起来通过几个实际的代码片段来提高我们原生 JS...然后就是.body.跟..这两个是一个功能,只不过在不同的浏览器下会有一个始终为 0js 数组去除重复数据,所以做了以上的兼容性处理。所以当我们做拖拽功能的时候,就可以依赖上以上属性。   ...当然就是利用我们的循环啦,对子元素集合进行遍历js 数组去除重复数据,直到确定下标为止,代码如下: var index = function(el) {` if (!...利用 reduce 进行数据优化数组去重   没错,又是一个老生常谈的问题,数组去重,但是我们这次去除的不仅仅是单个的数据,而是拥有某个相同键值的对象集合。...25" }, { name: "Andy", age: "25" }, { name: "Kitty", age: "25" }];`   现在我们要去重里面name重复的对象

    1.7K20

    js 数组去除重复数据-Vue.js开发移动端经验总结

    important;" />   组件   自动加载   在我们的项目中,往往会使用的许多组件,一般使用频率比较高的组件为了避免重复导入的繁琐一般是作为全局组件在项目中使用的。...important;" />    // 获取组件名称,去除文件名开头的 ./ 和结尾的扩展名   之后在main.js中导入注册模块进行注册,使用.我们也可以实现vue插件和全局filter的导入。...important;" />   通过v-model绑定数据   v-model是语法糖,它的本质是对组件事件进行监听和数据进行更新,是props和 o n 监 听 事 件 的 缩 写 , v − m...官方文档关于主题定制是在.config.js中进行设置的: // webpack.config.js<br style="max-width: 100%;box-sizing: border-box !

    2.1K30
    领券