前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS 数组去重的多种方法

JS 数组去重的多种方法

作者头像
很酷的站长
发布2022-12-04 15:42:24
1.3K0
发布2022-12-04 15:42:24
举报
文章被收录于专栏:站长的编程笔记
JS 数组去重的多种方法
JS 数组去重的多种方法
  • 1. 前言
  • 2. 普通方法数组去重
  • 3. filter + indexOf
  • 4. ES6 的 new Set()
  • 5. 需要注意的问题
1. 前言

本文提供两个数组变量供测试使用

代码语言:javascript
复制
const array = ['html', 'css', 'js', 'css']const resArr = ['html', 'css', 'css', [1], [1]]
2. 普通方法数组去重

下面列举几种数组去重的方法思路都一样:

遍历数组,将数组元素添加到新数组中,新数据中已有该元素,则不添加到新数组

代码语言:javascript
复制
// for + indexOfconst res = [];for (let index = 0; index < array.length; index++) {    res.indexOf(array[index]) === -1 && res.push(array[index])}// forEach + indexOfconst res = [];array.forEach(item => {    res.indexOf(item) === -1 && res.push(item)})// reduce + includesconst res = array.reduce((total, item) => {    !total.includes(item) && total.push(item)    return total;}, [])
3. filter + indexOf

使用 filter + indexOf 的方式可以使代码变为更简洁

filter() 方法过滤数组,只保留满足条件的元素。indexOf() 方法判断元素首次出现的下标是否为当前遍历的下标

代码语言:javascript
复制
// ['html', 'css', 'js']const res = array.filter((item, index) => array.indexOf(item) === index)
4. ES6 的 new Set()

利用 Set 结构不能接收重复数据的特点源码下载

代码语言:javascript
复制
const res = [...new Set(array)]
5. 需要注意的问题

当数组中存在引用类型的元素时,引用类型元素无法保持唯一性

代码语言:javascript
复制
const resArr = ['html', 'css', 'css', [1], [1]]// ['html', 'css', 'css', [1], [1]]const res = resArr.filter((item, index) => resArr.indexOf(item) === index)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 前言
  • 2. 普通方法数组去重
  • 3. filter + indexOf
  • 4. ES6 的 new Set()
  • 5. 需要注意的问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档