脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS一级数组数组对象合并去重

JS一级数组和数组对象合并去重方法实例

 更新时间：2023年12月08日 09:44:33   作者：大不了从头再来  
这篇文章主要为大家介绍了JS一级数组和数组对象合并去重方法实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一级数组

方法一 使用 es6 的 Set 和 Array.from 方法

let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let result = Array.from(new Set([...arr1, ...arr2]))
console.log(result) // [1, 2, 3, 4, 5, 6]

方法二 使用 indexOf 方法

let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2)
function uniqueFun(arr) {
 const newArr = []
 for (let i = 0; i < arr.length; i++) {
     if (newArr.indexOf(arr[i]) == -1) {
         newArr.push(arr[i])
     }
 }
 return newArr
}
console.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]

方法三 使用 includes 方法

let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2)
function uniqueFun(arr) {
 const newArr = []
 for (let i = 0; i < arr.length; i++) {
     if (!newArr.includes(arr[i])) {
         newArr.push(arr[i])
     }
 }
 return newArr
}
console.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]

方法四 使用 filter 方法

let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2) // [1, 2, 3, 4, 5, 6, 2, 3, 1, 2, 3, 4, 5, 6, 5, 6]
function uniqueFun(arr) {
 return arr.filter((item, index, arr) => {
     return arr.indexOf(item) == index // 返回当前元素在原始数组的索引值 == 当前索引值的元素
 })
}
conosle.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]

方法五 使用 es6 Map

let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2) 
function uniqueFun(arr) {
 let map = new Map()
 return arr.filter(item => {
     return !map.has(item) && map.set(item, 1)
 })
}
console.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]

数组对象

方法一 使用扩展运算符(...), filter 和 Map

let arr1 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 4, name: '小刘'}]
let arr2 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 3, name: '小王'}]
let arr3 = [...arr1, ...arr2]
function uniqueFun(arr) {
 const map = new Map()
 return arr.filter(item => {
     return !map.has(item.id) && map.set(item.id, 1)
 })
}
console.log(uniqueFun(arr3)) // 输出 [{id: 1, name: '小明}, {id: 2, name: '小红'}, {id: 4, name: '小刘'}, {id: 3, name: '小王'}]

方法二 使用扩展运算符(...), filter 和对象字面量 {}

let arr1 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 4, name: '小刘'}]
let arr2 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 3, name: '小王'}]
let arr3 = [...arr1, ...arr2]
function uniqueFun(arr) {
 const obj = {}
 return arr.filter(item => {
     return !obj.hasOwnProperty(item.id) && (obj[item.id] = 1)
 })
}
console.log(uniqueFun(arr3)) // 输出 [{id: 1, name: '小明}, {id: 2, name: '小红'}, {id: 4, name: '小刘'}, {id: 3, name: '小王'}]

方法三 使用concat, reduce 和 find

let arr1 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 4, name: '小刘'}]
let arr2 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 3, name: '小王'}]
let arr3 = arr1.concat(arr2)
function uniqueFun(arr) {
 return arr.reduce((pre, cur) => {
     if (!pre.find(item => item.id === cur.id)) {
         pre.push(cur)
     }
     return pre
 }, [])
}
console.log(uniqueFun(arr3)) // 输出 [{id: 1, name: '小明}, {id: 2, name: '小红'}, {id: 4, name: '小刘'}, {id: 3, name: '小王'}]

以上就是JS一级数组和数组对象合并去重方法实例的详细内容，更多关于JS一级数组数组对象合并去重的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 从表单校验看JavaScript策略模式的使用详解

    从表单校验看JavaScript策略模式的使用详解

    这篇文章主要介绍了从表单校验看JavaScript策略模式的使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    这篇文章主要介绍了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能,结合实例形式分析了JSON.parse()与JSON.stringify()方法实现深拷贝的相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-03-03
  • 树结构之JavaScript

    树结构之JavaScript

    本文主要介绍了JavaScript树结构的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • ionic组件ion-tabs选项卡切换效果实例

    ionic组件ion-tabs选项卡切换效果实例

    这篇文章主要为大家详细介绍了ionic组件ion-tabs选项卡切换效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 如何通过JavaScript来实现页面间数据传递

    如何通过JavaScript来实现页面间数据传递

    这篇文章主要给大家介绍了关于如何通过JavaScript来实现页面间数据传递的相关资料,在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,需要的朋友可以参考下
    2023-11-11
  • JS实现的简单图片切换功能示例【测试可用】

    JS实现的简单图片切换功能示例【测试可用】

    这篇文章主要介绍了JS实现的简单图片切换功能,结合实例形式分析了javascript结合时间函数定时触发控制图片的遍历与切换操作相关技巧,需要的朋友可以参考下
    2017-02-02
  • 在javascript中使用com组件的简单实现方法

    在javascript中使用com组件的简单实现方法

    下面小编就为大家带来一篇在javascript中使用com组件的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-08-08
  • 使用layui的router来进行传参的实现方法

    使用layui的router来进行传参的实现方法

    今天小编就为大家分享一篇使用layui的router来进行传参的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS中间件设计模式的深入探讨与实例分析

    JS中间件设计模式的深入探讨与实例分析

    这篇文章主要介绍了JS中间件设计模式,结合实例形式分析了JS中间件设计模式功能、原理、应用场景及相关操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能,本文逐步展示了如何构建基本的地图页面,如何通过点击地图获取经纬度和地理信息,以及如何实现模糊查询地址并在地图上标注,感兴趣的小伙伴跟着小编一起来看看吧
    2024-07-07

最新评论