深圳企业网站建设公司哪家好,网页设计与制作实训报告800字,正规网站开发公司,网页设计需要设计什么JS 数组去重 — 各类场景适合方法大全 本文介绍各种场景 JS 去重 方法使用 性能最好、用的最多、场景大全 文章目录 JS 数组去重 — 各类场景适合方法大全 一、基础篇#xff1a;简单直观的去重方法1. 使用Set数据结构2. 利用filter和indexOf方法3. reduce方法的应用 二、进阶…JS 数组去重 — 各类场景适合方法大全 本文介绍各种场景 JS 去重 方法使用 性能最好、用的最多、场景大全 文章目录 JS 数组去重 — 各类场景适合方法大全 一、基础篇简单直观的去重方法1. 使用Set数据结构2. 利用filter和indexOf方法3. reduce方法的应用 二、进阶篇性能与效率的优化4. 优化后的Set方法5. 对象键值对的巧妙利用 三、实战篇常用与特殊需求的解决方案6. 结合Map和Set的强大功能7. Lodash库的uniq方法8. 支持终止条件的去重方法9. 异步场景下的数据去重10. 更复杂的去重逻辑自定义比较函数 一、基础篇简单直观的去重方法 1. 使用Set数据结构
Set是ES6引入的一种新的数据结构它类似于数组但成员的值都是唯一的没有重复的值。利用这一特性我们可以轻松实现数据去重。
const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]2. 利用filter和indexOf方法
filter方法能够创建一个新数组其包含通过所提供函数实现的测试的所有元素。结合indexOf方法我们可以检查每个元素在数组中的首次出现位置从而实现去重。
const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray array.filter((item, index) array.indexOf(item) index);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]3. reduce方法的应用
reduce方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)将其结果汇总为单个返回值。通过累积器acc和当前值current的比较我们可以实现去重逻辑。
const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray array.reduce((acc, current) {if (!acc.includes(current)) acc.push(current);return acc;
}, []);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]二、进阶篇性能与效率的优化 4. 优化后的Set方法
对于大数据集直接使用Set进行去重通常是最优选择。Set内部使用了哈希表来存储值因此查找和插入的时间复杂度接近O(1)性能表现优异。
// 生成大量重复数据
const array Array.from({ length: 1000000 }, (_, i) i % 1000);
const uniqueArray [...new Set(array)];
console.log(uniqueArray.length); // 输出: 10005. 对象键值对的巧妙利用
对象的键值对具有唯一性这一特性可以被用来实现数据去重。通过将数组元素作为对象的键我们可以快速去重并保留元素的顺序。
const array [1, 2, 2, 3, 4, 4, 5];
const uniqueObj {};
array.forEach(item uniqueObj[item] true);
const uniqueArray Object.keys(uniqueObj).map(Number); // 转换键回数字类型
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5] 三、实战篇常用与特殊需求的解决方案 6. 结合Map和Set的强大功能
Map能够保持插入顺序而Set则确保值的唯一性。通过将两者结合我们可以实现既保持顺序又去重的目标。
const array [1, 2, 2, 3, 4, 4, 5, {a: 1}, {a: 1}];
const uniqueArray Array.from(new Map(array.map(item [JSON.stringify(item), item])).values());
console.log(uniqueArray); // 输出包含唯一对象的数组7. Lodash库的uniq方法
Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。它提供了丰富的API其中uniq方法就是用于数组去重的利器。
const _ require(lodash);
const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray _.uniq(array);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]8. 支持终止条件的去重方法
在某些特定场景下我们可能需要在满足特定条件时终止去重操作。这时我们可以使用for循环结合break语句来实现。
const array [1, 2, 2, 3, 4, 4, 5, stop, 6];
const uniqueArray [];
const stopValue stop;
for (let i 0; i array.length; i) {if (array[i] stopValue) break;if (!uniqueArray.includes(array[i])) uniqueArray.push(array[i]);
}
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]9. 异步场景下的数据去重
在前端开发中异步操作是家常便饭。当处理异步获取的数据时我们同样需要确保数据的唯一性。这时Promise和async/await就派上了用场。
const fetchData async () {const urls [url1, url2, url2, url3]; // 假设这些URL返回不同的数据const uniqueUrls [...new Set(urls)];const fetchPromises uniqueUrls.map(url fetch(url).then(response response.json()));const results await Promise.all(fetchPromises);console.log(results); // 输出每个URL的响应数据
};
fetchData();10. 更复杂的去重逻辑自定义比较函数
在某些情况下我们可能需要根据更复杂的逻辑来判断元素的唯一性。这时我们可以编写自定义的比较函数来实现去重。
const array [{ id: 1, name: Alice },{ id: 2, name: Bob },{ id: 2, name: Bob }, // 重复元素{ id: 3, name: Charlie }
];const uniqueArray array.filter((item, index, self) {return self.findIndex(el el.id item.id) index;
});console.log(uniqueArray); // 输出根据id去重后的数组通过以上10种JavaScript前端数据去重方式的详细讲解和代码案例相信你已经掌握了多种数据去重的技巧。在实际项目中你可以根据具体需求和性能要求选择合适的方法。希望这篇文章能够对你的前端开发之旅提供有益的帮助。如果你有任何疑问或想要分享你的经验欢迎在评论区留言交流 看到这里的小伙伴欢迎点赞、评论收藏
