js的数组去重方法

news/2024/6/3 3:21:52 标签: es6, 前端, javascript

 

目录

es6%E6%95%B0%E7%BB%84%E4%B8%AD%E5%AF%B9%E8%B1%A1%E5%8E%BB%E9%87%8D-toc" style="margin-left:40px;">es6数组中对象去重

1. filter()用法

2. findIndex()用法

3. 去重

其他方法:

方法二:reduce()去重

1. reduce()用法

1.1 找出字符长度最长的数组成员。

1.2 扁平化二维数组

1.3 扁平化多维数组

 三、总结方案:

使用Set:ES6引入的Set数据结构可以用于存储唯一的值。通过将数组转换为Set,然后将Set转换回数组,可以实现去重。

使用filter()方法和indexOf()方法:利用Array的filter()方法和indexOf()方法,可以过滤出不重复的元素。

使用reduce()方法和includes()方法:利用Array的reduce()方法和includes()方法,可以遍历数组并累积不重复的元素。

使用Map:利用Map数据结构的特性,可以实现数组的去重。


es6%E6%95%B0%E7%BB%84%E4%B8%AD%E5%AF%B9%E8%B1%A1%E5%8E%BB%E9%87%8D">es6数组中对象去重

1. filter()用法

filter()方法返回一个包含符合指定条件的所有元素的新数组。如果没有符合条件的元素,则返回空数组。

  • 注意: filter() 不会对空数组进行检测。
  • 注意: filter() 不会改变原始数组。
let arr = [
		{id: 1,name: '王五'},
		{id: 2,name: '李赵六'}
	];

let nArr = arr.filter((value, index, Arr) =>{
    console.log(value);
    console.log(index);
    console.log(Arr);
});

打印结果:

{id: 1, name: '王五'}
0
[{id: 1, name: '王五'},{id: 2, name: '李赵六'}]

{id: 2, name: '李赵六'}
1
[{id: 1, name: '王五'},{id: 2, name: '李赵六'}]

2. findIndex()用法

findIndex()方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex()方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1
  •  注意: findIndex() 对于空数组,函数是不会执行的。
  • 注意: findIndex() 并没有改变数组的原始值。

[3, 10, 18, 20].findIndex(value => value>11);  // 2 (18的下标是2)
[3, 10, 18, 20].findIndex(value => value>1);  // 0 (3的下标是0)
[3, 10, 18, 20].findIndex(value => value>30); // -1 (不存在则返回-1) 

3. 去重

let arr = [
		{id: 1,name: '张三'},
		{id: 2,name: '李四'},
		{id: 1,name: '张三'},
		{id: 2,name: '李四'}
	];

let nArr = arr.filter((currentValue, currentIndex, selfArr) = >{
	return selfArr.findIndex(x = >x.name === currentValue.name) === currentIndex
});
console.log(nArr);
[{"id": 1,"name": "张三"},{"id": 2,"name": "李四"}]

其他方法:

var m = new Map();
person = person.filter((ele) => !m.has(ele.id) && m.set(ele.id, ""));

方法二:reduce()去重

1. reduce()用法

reduce方法和reduceRight方法依次处理数组的每个成员,最终累计为一个值。

区别:

reduce是从左到右处理(从第一个成员到最后一个成员),
reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

  • 注意:reduce() 对于空数组是不会执行回调函数的。

语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • total 累积变量,默认为数组的第一个成员
  • currentValue 当前变量,默认为数组的第二个成员
  • currentIndex 当前位置(从0开始)
  • arr 原数组
    这四个参数之中,只有前两个是必须的,后两个则是可选的
// total为最终累计值
let total = [1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
});
// 1 2
// 3 3
// 6 4
// 10 5
// 15

如果要对累积变量指定初值,可以把它放在reduce方法和reduceRight方法的第二个参数。

上面的第二个参数相当于设定了默认值,处理空数组时尤其有用,可避免一些空指针异常。

由于这两个方法会遍历数组,所以实际上还可以用来做一些遍历相关的操作。
比如,

1.1 找出字符长度最长的数组成员。
function findLongest(entries) {
  return entries.reduce(function (longest, entry) {
    return entry.length > longest.length ? entry : longest;
  }, '');
}
 
findLongest(['aaa', 'bb', 'c']) // "aaa"
1.2 扁平化二维数组
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
1.3 扁平化多维数组
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

 三、总结方案:

 在JavaScript和es6中介绍一些常见的方法

使用Set:ES6引入的Set数据结构可以用于存储唯一的值。通过将数组转换为Set,然后将Set转换回数组,可以实现去重。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用filter()方法和indexOf()方法:利用Array的filter()方法和indexOf()方法,可以过滤出不重复的元素。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用reduce()方法和includes()方法:利用Array的reduce()方法和includes()方法,可以遍历数组并累积不重复的元素。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用Map:利用Map数据结构的特性,可以实现数组的去重。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = Array.from(new Map(arr.map(value => [value, value])).values());
console.log(uniqueArr); // [1, 2, 3, 4, 5]

这些方法都可以实现对数组的去重操作。具体选择哪种方法取决于个人偏好和性能需求。在ES6中引入的Set和箭头函数等特性使得数组去重更加简洁和高效。


http://www.niftyadmin.cn/n/5228430.html

相关文章

CVPR 2023 精选论文学习笔记:Exploiting Unlabelled Photos for Stronger Fine-Grained SBIR

我们给出以下四个分类标准: 1. 检索方法 监督式: 检索过程依赖于标记的训练数据来学习草图和图像之间的映射。这意味着系统在草图和它们对应的图像对上进行训练,使其能够学习视觉特征和语义概念之间的关系。监督式 SBIR 方法的例子包括支持向量机 (SVM) 和卷积神经网络 (CNN…

QToolButton 和 QPushButton

QToolButton 和 QPushButton 都是 Qt 框架中的按钮小部件类,用于在用户界面中提供按钮功能。它们有一些相似之处,但也有一些不同点。 共同点: 点击事件:两者都可以响应鼠标点击事件,并触发相应的操作或信号。 文本和…

[UGUI]实现从一个道具栏拖拽一个UI道具到另一个道具栏

在Unity游戏开发中,实现UI道具的拖拽功能是一项常见的需求。本文将详细介绍如何使用Unity的UGUI系统和事件系统,实现从一个道具栏拖拽一个UI道具到另一个道具栏的功能。 一、准备工作 首先,你需要在Unity中创建两个道具栏和一些UI道具。道具…

你好!线性查找【JAVA】

1.初次相识 线性查找也称线性搜索,是一种简单的查找方式,它是按照元素在数据集合中出现的顺序逐个进行比较,直到找到目标元素或查找完整个集合为止。具体实现方式是从集合的第一个元素开始遍历,逐个比较每个元素与目标元素是否相等…

上市公司数字化转型及同群效应数据集合(四种测算方法)

数据简介:当今世界处于高速发展的信息时代中,数字革命的产生催生出大量数字技术和数字信息。在数字经济时代,数字化转型赋予了企业新的发展动能,数字化转型已经成为诸多企业高质量发展的重要路径。是否需要进行数字化转型、能否及…

认识并初步使用shell脚本

目录 一、什么是Shell脚本 二、变量与运算 三、逻辑判断 四、循环 五、函数 六、中断与继续 一、什么是Shell脚本 在前面学习了Linux的基本指令,而shell脚本其实就是是这些命令的集合。 那么为什么需要shell脚本呢? 因为可以用来实现一些复杂的操…

关于大模型在文本分类上的尝试

文章目录 前言所做的尝试总结前言 总共25个类别,在BERT上的效果是48%,数据存在不平衡的情况,训练数据分布如下: 训练数据不多,4000左右 所做的尝试 1、基于 Qwen-14b-base 做Lora SFT,Loss忘记记录 准确率在68%左右 Lora配置 class LoraArguments:lora_r: int = 64…

【Java】面向对象02-运算符和赋值

2 运算符和赋值 2.1 掌握运算符 在Java中,运算符是用来执行各种操作的特殊符号。运算符用于在表达式中执行算术、关系、逻辑等操作。以下是Java中常见的运算符: 1. 算术运算符: java int a 5, b 2;int sum a b; // 加法 int differe…