数组去重方法 js

2023-03-05 14:48:02JavaScript018

数组去重方法 js,第1张

js数组去重的方法可以利用数组排序，通过相邻元素比较,去除重复元素。

去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下，以防面试的时候可能回被问到。

利用for嵌套for，然后splice去重（ES5中最常用）。双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。想快速学习更多常用的ES6语法，可以看一些相关的文章如《学习ES6笔记──工作中常用到的ES6语法》。

js数组去重的几种方法

利用数组排序，通过相邻元素比较，去除重复元素，可以严格匹配以区分数据类型。

借用对象属性方法，将数组中的元素添加为对象的属性。遍历数组元素的时候查询对象是否已经有该属性，如果有则不重复添加。

借用正则匹配的方法，将新数组转换为字符串。原数组中的每个元素与在字符串中查找，如果匹配到，则不添加。

使用js新特性的Map对象，使用键值对的方式修改第二种方法。或者利用Set对象，自动过滤掉重复项，而且可以判断数据类型。

利用js中对象的特性（对象中属性具有唯一性）将数组中重复的数值项去掉。

例如数组： <code>var arr = [35,2,1,2,10,2,3,5,10,13]</code>

1.将数组转换为对象

var toObject = function (arr) { var obj = {}// 声明一个对象容器 var jfor(var i = 0j = arr.length, i<ji++){ //将数组中的值作为对象的键，然后给个值 obj[arr[i]] = true} return obj}

2.将对象转化为数组

function keys(obj){ var arr = []// 私有对象 for(var attr in obj) { // 判断对象是否有attr属性 if(obj.hasOwnProperty(attr)){ arr.push(attr)// 将对象属性的键放到数组中 } } return arr}

3.调用这两个方法

function uniq(newArr) { return keys(toObject(newArr))}

这样就可以把数组中重复的数字去掉了。

使用<code>alert(uniq(arr))</code>测试一下

方法一

无需思考，我们可以得到 O(n^2) 复杂度的解法。定义一个变量数组 res 保存结果，遍历需要去重的数组，如果该元素已经存在在 res 中了，则说明是重复的元素，如果没有，则放入 res 中。

function unique(a) {

var res = []

for (var i = 0, len = a.lengthi <leni++) {

var item = a[i]

for (var j = 0, jLen = res.lengthj <jLenj++) {

if (res[j] === item)

break

}

if (j === jLen)

res.push(item)

}

return res

}

var a = [1, 1, '1', '2', 1]

var ans = unique(a)

console.log(ans)// =>[1, "1", "2"]

代码非常简单，那么是否能更简洁些？如果不考虑浏览器兼容，我们可以用 ES5 提供的 Array.prototype.indexOf 方法来简化代码。

function unique(a) {

var res = []

for (var i = 0, len = a.lengthi <leni++) {

var item = a[i]

(res.indexOf(item) === -1) &&res.push(item)

}

return res

}

var a = [1, 1, '1', '2', 1]

var ans = unique(a)

console.log(ans)// =>[1, "1", "2"]

既然用了 indexOf，那么不妨再加上 filter。

function unique(a) {

var res = a.filter(function(item, index, array) {

return array.indexOf(item) === index

})

return res

}

var a = [1, 1, '1', '2', 1]

var ans = unique(a)

console.log(ans)// =>[1, "1", "2"]

方法二

法一是将原数组中的元素和结果数组中的元素一一比较，我们可以换个思路，将原数组中重复元素的最后一个元素放入结果数组中。

function unique(a) {

var res = []

for (var i = 0, len = a.lengthi <leni++) {

for (var j = i + 1j <lenj++) {

// 这一步十分巧妙

// 如果发现相同元素

// 则 i 自增进入下一个循环比较

if (a[i] === a[j])

j = ++i

}

res.push(a[i])

}

return res

}

var a = [1, 1, '1', '2', 1]

var ans = unique(a)

console.log(ans)// =>["1", "2", 1]

虽然复杂度还是 O(n^2)，但是可以看到结果不同，1 出现在了数组最后面，因为结果数组取的是元素最后一次出现的位置。

方法三（sort)

如果笔试面试时只答出了上面这样 O(n^2) 的方案，可能还不能使面试官满意，下面就来说几种进阶方案。

将数组用 sort 排序后，理论上相同的元素会被放在相邻的位置，那么比较前后位置的元素就可以了。

function unique(a) {

return a.concat().sort().filter(function(item, pos, ary) {

return !pos || item != ary[pos - 1]

})

}

var a = [1, 1, 3, 2, 1, 2, 4]

var ans = unique(a)

console.log(ans)// =>[1, 2, 3, 4]

但是问题又来了，1 和 "1" 会被排在一起，不同的 Object 会被排在一起，因为它们 toString() 的结果相同，所以会出现这样的错误：

var a = [1, 1, 3, 2, 1, 2, 4, '1']

var ans = unique(a)

console.log(ans)// =>[1, 2, 3, 4]

当然你完全可以针对数组中可能出现的不同类型，来写这个比较函数。不过这似乎有点麻烦。

方法四（object）

用 JavaScript 中的 Object 对象来当做哈希表，这也是几年前笔试时的解法，跟 sort 一样，可以去重完全由 Number 基本类型组成的数组。

function unique(a) {

var seen = {}

return a.filter(function(item) {

return seen.hasOwnProperty(item) ? false : (seen[item] = true)

})

}

var a = [1, 1, 3, 2, 1, 2, 4]

var ans = unique(a)

console.log(ans)// =>[1, 3, 2, 4]

还是和方法三一样的问题，因为 Object 的 key 值都是 String 类型，所以对于 1 和 "1" 无法分别，我们可以稍微改进下，将类型也存入 key 中。

function unique(a) {

var ret = []

var hash = {}

for (var i = 0, len = a.lengthi <leni++) {

var item = a[i]

var key = typeof(item) + item

if (hash[key] !== 1) {

ret.push(item)

hash[key] = 1

}

return ret

}

var a = [1, 1, 3, 2, '4', 1, 2, 4, '1']

var ans = unique(a)

console.log(ans)// =>[1, 3, 2, "4", 4, "1"]

虽然解决了讨厌的 1 和 "1" 的问题，但是还有别的问题！

var a = [{name: "hanzichi"}, {age: 30}, new String(1), new Number(1)]

var ans = unique(a)

console.log(ans)// =>[Object, String]

但是如果数组元素全部是基础类型的 Number 值，键值对法应该是最高效的！

方法五（ES6）

ES6 部署了 Set 以及 Array.from 方法，太强大了！如果浏览器支持，完全可以这样：

function unique(a) {

return Array.from(new Set(a))

}

var a = [{name: "hanzichi"}, {age: 30}, new String(1), new Number(1)]

var ans = unique(a)

console.log(ans)// =>[Object, Object, String, Number]

_.unique

最后来看看 underscore 对此的实现方式，underscore 将此封装到了 _.unique 方法中，调用方式为 _.unique(array, [isSorted], [iteratee])。其中第一个参数是必须的，是需要去重的数组，第二个参数可选，如果数组有序，则可以传入布尔值 true，第三个参数可选，如果需要对数组迭代的结果去重，则可以传入一个迭代函数。而数组元素去重是基于 === 运算符的。

其实很简单，underscore 中的实现方式和上面的方法一相似。

我们来看它的核心代码：

for (var i = 0, length = getLength(array)i lengthi++) {

var value = array[i],

// 如果指定了迭代函数

// 则对数组每一个元素进行迭代

computed = iteratee ? iteratee(value, i, array) : value

// 如果是有序数组，则当前元素只需跟上一个元素对比即可

// 用 seen 变量保存上一个元素

if (isSorted) {

// 如果 i === 0，则直接 push

// 否则比较当前元素是否和前一个元素相等