JavaScript数组去重：统一类型处理字符串格式数字的技巧

问题分析：混合数据类型带来的挑战

在javascript中，当我们需要从数组中移除重复项时，常用的方法是结合array.prototype.filter()和array.prototype.indexof()。indexof()方法使用严格相等（===）进行比较，这意味着它不仅比较值，还比较数据类型。因此，数字1和字符串"1"在indexof()看来是不同的元素。

考虑以下数组示例：

const arr1 = [1, 2, "1", 3, 2, 4, "3", 5, 6, 7, 6, "5"];

如果我们直接应用标准的去重逻辑：

const result = arr1.filter((item, index) => arr1.indexOf(item) === index);
console.log(result);
// 实际输出: [1, 2, "1", 3, 4, "3", 5, 6, 7, "5"]
// 期望输出: [1, 2, 3, 4, 5, 6, 7]

可以看到，由于1和"1"被视为不同的值，它们都被保留了下来。这与我们期望的，将"1"视为1的重复项并移除的目标不符。

核心策略：数据类型统一化

解决此问题的关键在于在进行重复项检查之前，确保所有相关元素的数据类型保持一致。对于包含数字和字符串格式数字的数组，最直接有效的方法是将所有元素统一转换为数字类型。JavaScript提供了多种将字符串转换为数字的方法，例如parseInt()、parseFloat()或Number()。

立即学习“Java免费学习笔记（深入）”；

解决方案一：map 结合 filter

这种方法分两步执行：首先使用map()方法遍历数组，将所有元素转换为数字类型；然后，在转换后的数组上应用filter()和indexOf()进行去重。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

let arr1 = [1, 2, "1", 3, 2, 4, "3", 5, 6, 7, 6, "5"];

// 第一步：使用 map 将所有元素转换为整数
// parseInt() 会尝试解析字符串直到遇到非数字字符，
// 对于纯数字字符串和数字类型本身，它都能有效转换。
arr1 = arr1.map(item => parseInt(item));

// 第二步：在类型统一后的数组上进行去重
const result = arr1.filter((item, index) => arr1.indexOf(item) === index);

console.log(result);
// 输出: [1, 2, 3, 4, 5, 6, 7]

代码解析：

1. arr1.map(item => parseInt(item)): 这一步创建了一个新数组。对于原始数组中的每个元素，parseInt()函数会被调用。
   • 如果元素是数字（如1），parseInt(1)仍返回1。
   • 如果元素是字符串数字（如"1"），parseInt("1")会将其转换为数字1。
   • 如果元素是无法转换为数字的字符串（如"abc"），parseInt("abc")会返回NaN。
2. arr1.filter((item, index) => arr1.indexOf(item) === index): 在所有元素都已是数字类型的新数组上，indexOf()能够正确识别重复的数字值，从而实现去重。

解决方案二：利用 Set 结合类型转换

JavaScript的Set对象是一种集合，它只存储唯一的值。结合类型转换，Set提供了一种更简洁的去重方式。

const arr1 = [1, 2, "1", 3, 2, 4, "3", 5, 6, 7, 6, "5"];

// 先使用 map 转换类型，然后将结果传递给 Set
const uniqueNumbersSet = new Set(arr1.map(item => Number(item)));

// 将 Set 转换回数组
const result = Array.from(uniqueNumbersSet);
// 或者使用扩展运算符：const result = [...uniqueNumbersSet];

console.log(result);
// 输出: [1, 2, 3, 4, 5, 6, 7]

代码解析：

1. arr1.map(item => Number(item)): 类似于parseInt，Number()构造函数或转型函数也能将值转换为数字。它比parseInt更严格，如果字符串包含任何非数字字符（除了开头和结尾的空白），它会返回NaN。
2. new Set(...): Set构造函数接受一个可迭代对象（这里是转换后的数组），并自动移除所有重复项。
3. Array.from(uniqueNumbersSet)或[...uniqueNumbersSet]: 将Set对象转换回一个数组。

注意事项

1. parseInt() 与 Number() 的选择：
   • parseInt(string, radix)：解析一个字符串参数，并返回一个指定基数的整数。它会从字符串的开头开始解析，直到遇到第一个非数字字符。例如，parseInt("10.5px")返回10，parseInt("abc")返回NaN。
   • Number(value)：将任何类型的值转换为数字。如果字符串包含非数字字符（除了有效的数字表示，如"1.2"），它会返回NaN。例如，Number("10.5px")返回NaN，Number("10.5")返回10.5。
   • 在本教程的场景中，如果确保所有字符串都是纯数字或数字的字符串表示，两者都能良好工作。如果字符串可能包含额外的非数字字符但你仍想提取开头的数字，parseInt可能更合适。如果希望严格只转换纯数字字符串，Number更合适。
2. 处理非数字字符串： 如果数组中可能包含无法转换为有效数字的字符串（例如"hello"），parseInt()或Number()会将其转换为NaN。NaN在比较时有一个特殊行为：NaN === NaN返回false。这意味着，如果数组中存在多个NaN，它们在去重后都可能被保留。如果需要处理这种情况，可能需要在类型转换后额外过滤掉NaN，或者采用更复杂的去重逻辑。
3. 性能考量： 对于大多数常见的数组大小，上述两种方法在性能上差异不大。然而，对于极大的数组（例如数十万或数百万元素），Set方法通常比map结合filter和indexOf的方法具有更好的性能，因为它内部使用了哈希表结构，查找效率更高。
4. 保留原始数据类型： 如果去重后还需要保留原始的数据类型（例如，希望1和"1"在去重后只保留1，但如果原始数组中只有"1"，则保留"1"），则上述方法不适用。这需要更复杂的逻辑，例如使用一个辅助对象或Map来跟踪已经遇到的值及其原始类型，但这超出了本教程的范围。

总结

当JavaScript数组中混合了数字类型和字符串格式的数字时，直接使用filter与indexOf进行去重会导致不准确的结果。解决此问题的核心在于统一数据类型。通过map()方法结合parseInt()或Number()将所有元素转换为统一的数字类型，然后无论是使用filter()和indexOf()，还是更简洁的Set对象，都能有效地实现准确的去重。在实际应用中，根据数据特点和性能需求选择最合适的类型转换函数和去重策略至关重要。

以上就是JavaScript数组去重：统一类型处理字符串格式数字的技巧的详细内容，更多请关注php中文网其它相关文章！