es6数组去重的威力

最新推荐文章于 2021-12-01 09:49:14 发布

向飞飞

最新推荐文章于 2021-12-01 09:49:14 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

分类专栏：随笔记录

本文链接：https://blog.youkuaiyun.com/weixin_44943270/article/details/94037132

随笔记录专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现数组去重的方法，通过Set对象结合扩展运算符，快速去除数组中重复元素，提高数据处理效率。

一句话数组去重

	var arr = [1, 2, 2, 1, 3, 6, 6, 5];
	
    // var newArr = new Set(arr);//获取到的是对象
    // console.log( [...newArr] )

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

向飞飞

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

去重数组的利器——JavaScript中的ES6数组去重方法

laugh666的博客

10-05

488

ES6中引入了Set数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。利用这个特性，我们可以将数组转换为Set，然后再将Set转换回数组，实现数组的去重。方法可以根据指定的条件筛选数组中的元素，并返回一个新的数组。利用这个特性，我们可以通过遍历数组，将重复的元素过滤掉，从而实现数组的去重。上述代码中，我们先将数组转换为Set数据结构，然后再通过扩展运算符将Set转回数组，得到去重后的数组。方法可以根据指定的条件筛选数组中的元素，并返回一个新的数组。我们可以利用这个特性来实现数组的去重。

es6 数组去重_JS数组去重的9种方法（包括去重NaN和复杂数组类型）

weixin_39556590的博客

11-21

918

其实网上已经有很多js数组的去重方法，但是我看了很多篇并自己通过代码验证，发现都有一些缺陷，于是在研究多篇代码之后，自己总结了9种方法，如果有哪里不对请及时纠正我哈~测试代码let arr1 = [3, 1, [1], 1, [1], true, true, {}, '1', NaN, undefined, NaN, undefined, {}, null, null];let arr2 = []...

参与评论您还未登录，请先登录后发表或查看评论

Es6中一句话数组去重

qq_45645051的博客

11-10

342

ES6中新增的快捷对数组去重，类数组去重方法，只需要一句话… // ES6里新添加了两个很好用的东西，set和Array.from // set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。；当传入一个对象类型时// ...

一句话js数组去重【ES6】【伸手党福利】

wwppp987的博客

02-08

291

方法1 function unique(arr) { const res = new Map(); return arr.filter((a) => !res.has(a) && res.set(a, 1)) } 方法1 分析 function unique(arr) { //定义常量 res,值为一个Map对象实例 const res = new Map(); //返回arr数组过滤后的结果，结果为一个数组 //过滤条件是，

ES6数组去重

One_And_One的博客

11-06

276

数组去重的个人思路： let arr1 = [1, 2, 3, 4, 1, 2, 5, 6]; let arr2 = ["a", "b", "c", "a", "d", "c"]; let newArr = []; // 创建一个新数组 for (let [index, item] of arr2.entries()) { // ...

es6实现数组去重

u011295864的博客

12-04

517

首先针对简单的数组 [1, 2, 3, 3, 4, 4, 5] 进行去重。 let testArr = [1, 2, 3, 3, 4, 4, 5] let newArr = Array.from(new Set(testArr)) console.log(newArr) 控制台输出结果：下面针对数组对象进行去重。比如我这里有个数组： [ { ...

js数组去重、获取重复数据以及获取非重复数据--一句话函数

weixin_30505751的博客

05-09

307

数组去重 let arr = [11, 23, 26, 23, 11, 9] const deduplication = arr => [...new Set(arr)] console.log(deduplication(arr)); // [ 11, 23, 26, 9 ] 保留数组中非重复数据 let arr = [11, 23, 26, 23, 11,...

ES6学习笔记（二）（feat阮一峰ES6教程）

weixin_43995977的博客

07-03

802

**内容简介：** 十二、Symbol 十三、Set 和 Map 数据结构十四、Proxy 十五、Reflect 十六、Promise 对象十七、Iterator 和 for...of 循环十八、Generator 函数的语法十九、Generator 函数的异步应用二十、async 函数二十一、Class 的基本语法二十二、Class 的继承二十三、Module 的语法二十四、Module 的加载实现二十七、异步遍历器

ES6新语法

weixin_58361149的博客

12-01

1460

新语法，不容小觑，他的威力很大哦

ES6新增语法详解

m0_37809911的博客

11-30

601

前言 babel babel使用方法变量的定义 let、const this 和作用域 do 顶层对象 global对象 import class JS中的原型原型语言 prototype、__proto__、constructor 箭头函数浏览器的渲染模式严格模式 call、apply、bind原理 call、apply的应用求数组的最大最小值字符串的拓展加强了对unicode的表...

vue中对象数组去重的实现

10-15

在Vue项目中，我们经常需要处理对象数组的去重问题，尤其是当数组中存储的是对象时，不能直接使用JavaScript原生的`new Set()`方法去重，因为`new Set()`只适用于简单数据类型的元素，对于对象这样的复杂数据类型，...

JavaScript 数组去重并统计重复元素出现的次数实例

11-29

1、方法一 var arr = [1, 2, 3, 1, 2, 4]; function arrayCnt(arr) { var newArr = []; for(var i = 0; i < arr.length;... if(newArr.indexOf(arr[i]) == -1) { ... var newarr2 = new Array(newArr.length);...

高性能js数组去重(12种方法，史上最全)

10-15

在JavaScript中，数组去重是一项常见的编程任务，尤其在面试中常常被用来考察候选人的算法理解和编程技巧。这里我们将探讨12种不同的方法来实现JS数组去重，以提高对这些技术的理解。 1. **利用ES6 Set去重**： ...

yarn 安装typescript命令全局无法安装上问题

weixin_44943270的博客

06-27

5131

使用命令 yarn global bin //查询路径将路径配置到全局变量path中

vue中文件上传及接收

weixin_44943270的博客

06-24

5058

准备: 前端:vue环境+axios+elemen-ui 后端:node.js multer 前端代码: // 引入axios import axios from 'axios'; // 获取用户信息 getUserInfo() { // 发送请求获取用户信息 getInfo() .then(res => {...

node.js的token生成,及token验证

weixin_44943270的博客

06-24

4092

验证token 开始 const expressJwt = require('express-jwt');//模块引入 const secret = '自定义'; //定义密钥 router.use(expressJwt ({ secret }).unless({ path: ['/login/checklogin'] //除了这些地址，其他的URL都需要验证 })); ro...

moment时间处理

weixin_44943270的博客

06-24

2034

moment时间处理的使用: 1. 安装moment cnpm i moment --save 2. 引入moment import moment from 'moment' 3. 使用moment moment(时间戳).format('YYYY-MM-DD hh:mm:ss')

vue+element 中遇到的问题汇总

weixin_44943270的博客

08-22

815

1.事件绑定未生效使用修饰.native;在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的 2.vuex不会永久存储,在刷新的时候会消失 vuex-persistedstate插件 plugins: [createPersistedState({ storage: window.sessionStorage, })]...

vue父传子和子传父

weixin_44943270的博客

07-03

261

父组件: <template> <div class="father"> <div class="father-self"> <h1>我是父组件</h1> <p>{{ fatherMsg }}</p> <h2&gt...

es6 数组去重

最新发布

03-28

### 使用 ES6 实现数组去重在 ES6 中，可以通过多种方式实现数组去重。以下是几种常见且高效的方法： #### 方法一：使用 `Set` 和扩展运算符通过创建一个新的 `Set` 对象并将其转换回数组的方式可以轻松实现数组去重。这种方法简单直观，并适用于大多数基本数据类型的数组。 ```javascript const arr = [1, 2, 3, 4, 4, 5, 5, 6, 6]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法利用了 `Set` 的特性——它会自动移除重复项[^1]。 --- #### 方法二：使用 `forEach` 和 `includes` 另一种常用的手动实现方式是遍历原数组并将未出现过的元素加入新数组中。这种方式虽然稍显冗余，但在某些场景下仍然适用。 ```javascript Array.prototype.unique = function () { let newArr = []; this.forEach((item) => { if (!newArr.includes(item)) { newArr.push(item); } }); return newArr; }; const arr = [1, 2, 3, 4, 4, 5, 5, 6, 6]; const uniqueArr = arr.unique(); console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5, 6] ``` 该方法能够正确处理 `NaN` 值的去重问题[^2]。 --- #### 方法三：针对对象数组的去重（基于特定键）当需要对包含对象的数组进行去重时，可以根据某个唯一字段（如 `id`）来进行操作。这里介绍两种主流方法：`Map` 结合过滤器以及 `reduce()` 函数。 ##### 子方法 A：使用 `Map` 进行去重借助 `Map` 数据结构存储已访问的对象键值对，从而快速判断是否已经存在相同记录。 ```javascript var person = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }, // 需要去重 ]; var m = new Map(); person = person.filter((ele) => !m.has(ele.id) && m.set(ele.id, "")); console.log(person); // 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] ``` 上述代码片段展示了如何依据对象中的 `id` 字段完成去重过程[^3]。 ##### 子方法 B：使用 `reduce()` 实现除了 `Map` 外，还可以采用累加器模式来构建无重复的结果集。 ```javascript var person = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }, // 需要去重 ]; const uniquePerson = person.reduce((acc, cur) => { const x = acc.find(item => item.id === cur.id); if (!x) { return acc.concat([cur]); } else { return acc; } }, []); console.log(uniquePerson); // 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] ``` 这种逻辑清晰易懂，适合初学者学习掌握[^5]。 --- #### 总结以上列举了几种典型的 ES6 数组去重方案，每一种都有其特点和局限性。对于基础类型数组推荐优先考虑 `Set` 方式因其简洁性和高性能表现；而对于复杂嵌套或者对象形式的数据，则需结合具体需求选取合适的工具链路加以解决。