js数组去重(9种方法),你都会了吗?

这篇具有很好参考价值的文章主要介绍了js数组去重(9种方法),你都会了吗?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

以下共有九种数组去重的方式和详解(包含对象数组去重):

1.利用Array.from(new Set)去重:

// 1.利用set去重 
// Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合
// Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组,也是ES6的新增方法
    let list = ['你是最棒的', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的',]
    let newList = Array.from(new Set(list))
    console.log('newList', newList);

效果:

js 数组去重,js,javascript,vue.js,开发语言

2.利用includes去重

//2.利用Array.includes 去重   
//includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
let list = ['你是最棒的1', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的1',]
    let newList2 = []
    list.forEach((item) => {
        // 空数组newList2 不包含item为false ,取反为true 执行数组添加操作
        // 如果数组包含了 item为true 取反为false 不执行数组添加操作
        if (!newList2.includes(item)) {
            newList2.push(item)
        }
    })
    console.log('newList2', newList2);

效果

js 数组去重,js,javascript,vue.js,开发语言

3.利用map去重

//3.利用map去重
//map数据结构是es6中新出的语法,其本质也是键值对,只是其键不局限于普通对象的字符串 
let list = ['你是最棒的2', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的2',]
    let newList3 = [];
    let map = new Map()
    list.forEach((item) => {
     // 如果map.has指定的item不存在,那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
     // 如果下次出现重复的item,那么map.has(item等于ture 取反 !map.has(item)  不执行
        if (!map.has(item)) {
            map.set(item,ture)
            newList3.push(item)
        }
    })
    console.log('newList3', newList3);

 效果:

js 数组去重,js,javascript,vue.js,开发语言

4.利用indexOf去重

//4.利用indexOf去重  
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1 
let list = ['你是最棒的3', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的3',]
    let newList4 = [];
    list.forEach((item) => {
     // 空数组newList4第一次循环没有找到匹配的item 返回-1  执行数组添加操作
     // 如果数组在第n次循环中找到了newList4数组中item 例如:item等于6 而在newList4数组中已经有9 所以indexOf就不等于-1  不执行数组添加操作
        if (newList4.indexOf(item) === -1) {
            newList4.push(item)
        }
    })
    console.log('newList4', newList4);

效果:

js 数组去重,js,javascript,vue.js,开发语言

5. 利用单层for循环去重

// 5.单层for循环去重 
// Array.splice() 方法用于添加或删除数组中的元素。会改变原数组 
let list = ['你是最棒的4', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的4',]
    let newlist5 = [];
    for (let i = 0; i < list.sort().length; i++) {
        if (list[i] == list[i + 1]) {
            list.splice(i, 1)
            i--
        }
    }
    console.log('newlist5', list);

 效果:

js 数组去重,js,javascript,vue.js,开发语言

6.利用双层for循环去重

// 6.双层for循环去重
// Array.splice() 方法用于添加或删除数组中的元素。会改变原数组
let list = ['你是最棒的5', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的5',]
    for (let i = 0; i < list.sort().length; i++) {
        for (let j = i + 1; j < list.sort().length; j++) {
            if (list[i] == list[j]) {
                list.splice(i, 1)
                j--
            }
        }
    }
    console.log('newlist6', list);

效果:

js 数组去重,js,javascript,vue.js,开发语言

 7.利用递归去重

// 7.递归去重
let list = ['你是最棒的6', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的6',]
    function callBack(index) {
      // 数组的长度不能等于0
        if (index >= 1) {
      // 第一次如果数组最后一个索引和最后第二个索引相等
            if (list[index] === list[index - 1]) {
      // 那么就删除这个索引的元素
                list.splice(index, 1)
            }
      // 继续调用这个函数 第一次传入的参数是数组末尾第一个 第二次传入的参数是数组末尾第二个 层层递减
            callBack(index - 1)
        }
    }
      //传入排序好的数组的最大索引index
    callBack(list.sort().length - 1)
    console.log('newList7', list);

 效果:

js 数组去重,js,javascript,vue.js,开发语言

8.利用Array.filter和map对象数组去重 (性能较高)

//8.利用Array.filter和map去重 
let map = new Map()
let list3 = [{
        name: '好先森1',
        id: 1
    },
    {
        name: '好先森1',
        id: 2
    },
    {
        name: '好先森2',
        id: 3
    },
    {
        name: '好先森3',
        id: 3
    }
    ]
    // 对象数组去重
    function xxx(list3, key) {
        return list3.filter((item) => !map.has(item[key].toString()) && map.set(item[key].toString()))
    }
    console.log('newList8', xxx(list3, 'id'));

 效果:
js 数组去重,js,javascript,vue.js,开发语言

9.利用Array.filter和Array.includes 对象数组去重

// 9.利用Array.filter和Array.includes去重
let list4 = [{
        name: '好先森1',
        id: 1
    },
    {
        name: '好先森1',
        id: 2
    },
    {
        name: '好先森2',
        id: 3
    },
    {
        name: '好先森3',
        id: 3
    }
    ]
    function xxx(arr) {
        let list = [];
        return arr.filter((item) => !list.includes(item.name) && list.push(item.name))
    }
    console.log('newList9', xxx(list4));

 效果:

js 数组去重,js,javascript,vue.js,开发语言文章来源地址https://www.toymoban.com/news/detail-517699.html

到了这里,关于js数组去重(9种方法),你都会了吗?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS数组去重的12种方法

    Set 对象是 ES6 中新定义的数据结构,类似数组,它允许存储任何类型的唯一值,不管是原始值还是对象引用。 Array.from() 方法 就是将一个类数组对象或者可遍历对象转换成一个真正的数组 不考虑兼容性,这种去重的方式代码最少。这种方法无法去掉 {} 空对象,后面的高阶方

    2024年02月06日
    浏览(35)
  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(51)
  • JavaScript数组去重的方式

    数组去重的意思就是去除数组中重复的元素,处理完后数组中所有的元素都是唯一的,本文介绍了在js中数组去重的5种方式,请往下看。 Set 对象 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。 Set 中的特殊值 Set 对象存储的值总是唯一的,所以需要判

    2024年02月07日
    浏览(36)
  • 这些常见的python编码习惯,你都会吗

    本文分享自华为云社区《不得不知的十个常见PY编码习惯》,作者:码乐。 语言在发展和变化,编码习惯也在发生改变。这里简单聊聊 17个python中常见的编码习惯或者风格。 我们定义一个老王模块,再定义一个小李模块,相互导入时,将报错 导入问题,如果在使用其他语言

    2024年02月03日
    浏览(41)
  • vector容器会了吗?一文搞定它

    它是动态扩展,找一块新的更大的空间,把原来的数据拷贝到这,释放原来的空间 //1.赋值操作 /* 函数模型: vector operator=(const vector dep) 重载=运算符 assign(beg,end); 将beg,end之间的数据拷贝给自身 assign(n,elem); 将n个elem拷贝赋值给本身 / / //2.容量和大小 /* 函数原型: empty() 判断

    2024年02月08日
    浏览(31)
  • 最长递增子序列问题(你真的会了吗)

    目录 一.最长递增子序列问题I 二.最长递增子序列问题II 三. 最长递增子序列问题III 1.对应牛客网链接 最长上升子序列(一)_牛客题霸_牛客网 (nowcoder.com) 2.题目描述:  3.解题思路 1.首先我们分析题意:最长递增子序列拆:要递增的,还是序列,不一定连续 ,要长度最长的。

    2024年02月15日
    浏览(47)
  • 【Springboot】| 阿里云发送短信验证码,你会了吗?

    专栏 名字 🔥Elasticsearch专栏 es 🔥spring专栏 spring开发 redis专栏 redis学习笔记 🔥项目专栏 项目集锦 修bug专栏 bug修理厂 狮子之前发了一篇《邮箱发送验证码,你会了吗?》,很快上了热度榜单,但是那篇文章只是简单介绍了如何接收验证码的流程以及安利了一个接收验证码的

    2024年02月08日
    浏览(39)
  • 【Python基础篇】从Hello, world到函数几分钟看完就都会了~

    大家好,我是辣条哥~ Python是一种高级编程语言,易于学习和使用。以下是Python入门基础的一小部分: 首先需要从官方网站下载和安装Python。安装过程很简单,只需按照安装向导的步骤进行操作即可。 如果实在不会可以在文末底下找到辣条哥名片,直接找辣条哥拿安装包以及

    2023年04月25日
    浏览(32)
  • 【C++】面试官:你小子,继承与多态的题你都会

    文章目录 前言 一、 理论知识类 二、 编程题选择类 上一篇文章我们详细了介绍了多态,用汇编一步一步的查看了多态的实现原理,讲解了这么多理论知识该做一些面试题了,这些面试题都是历年来大厂所出的笔试题,希望大家可以把我今天所讲的全部学懂~ 1. 下面哪种面向

    2023年04月25日
    浏览(34)
  • Python中最常用的5种线程锁,你都会用吗

    对于日常开发者来讲很少会使用到本章节的内容,但是对框架作者等是必备知识,同时也是高频的面试常见问题。 线程安全是多线程或多进程编程中的一个概念,在拥有共享数据的多条线程并行执行的程序中,线程安全的代码会通过同步机制保证各个线程都可以正常且正确的

    2024年02月08日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包