JavaScript实战笔记(二) 数组去重

简介: JavaScript实战笔记(二) 数组去重

前言


这篇文章介绍数组去重的几种方法


正文


1、利用 Set 去重


利用集合元素唯一的性质,去除重复的元素,但是不能去除相同的对象(id 不同)

function unique(array) {
    return [...new Set(array)] 
}


2、利用 Map 去重


利用映射键值唯一的性质,去除重复的元素,但是不能去除相同的对象(id 不同)

function unique(array) {
    let result  = new Array()
    let mapping = new Map()
    for (let item of array) {
        if(!mapping.has(item)) {
            mapping.set(item)
            result.push(item)
        }
    }
    return result
}


3、双层循环


外层循环遍历数组的每一个元素,内层循环判断当前元素是否在结果数组中

function unique(arr) {
    let res = []
    for (let i = 0, arrlen = arr.length; i < arrlen; i++) {
        let isUnique = true
        for (let j = 0, reslen = res.length; j < reslen; j++) {
            if (arr[i] === res[j]) {
                isUnique = false
                break
            }
        }
        if (isUnique) res.push(arr[i])
    }
    return res
}


注意,这种方法不能去除相同的对象和重复的 NaN


4、单层循环 + 语言特性


使用循环遍历数组的每一个元素,使用 indexOf 方法判断当前元素是否在结果数组中

function unique(arr) {
    let res = []
    for (let ind = 0, len = arr.length; ind < len; ind++) {
        let val = arr[ind]
        if (res.indexOf(val) === -1) res.push(val)
    }
    return res
}


注意,这种方法不能去除相同的对象和重复的 NaN


目录
相关文章
|
8天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
8天前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
31 0
|
8天前
|
JavaScript 前端开发 算法
JavaScript 中算术操作符:全面解读、实战应用与最佳实践
【4月更文挑战第5天】本文探讨JavaScript中的算术操作符,包括加、减、乘、除、求余、自增、自减及复合赋值等,强调理解与熟练运用它们对提升编程效率和代码准确性的重要性。文中通过示例介绍了各种操作符的用法,同时提醒注意数据类型转换、浮点数精度、除以零错误以及利用短路求值优化逻辑等问题。通过学习,读者能更好地掌握算术操作符在不同场景的应用,提升编程技能。
26 1
|
8天前
|
JavaScript 前端开发
js实现对象数组去重
js实现对象数组去重
24 0
|
8天前
|
存储 JavaScript 前端开发
史上最详细JavaScript数组去重方法(11种)
使用set和Array.from ()方法 array.from可以将set结构转成数组
22 7
|
1天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
12 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
7 0
|
5天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
5天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
8天前
|
XML JavaScript 前端开发
【JavaScript】实战训练小项目-WebAPI
【JavaScript】实战训练小项目-WebAPI
13 1