数组去重的几种实现方式

下面每种方法都采用普通的函数模式封装和原型模式封装

方法一:

普通函数模式封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>

<body>
<script>
var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

function unique(arr) {
var n = []; //声明一个临时数组
for (var i = 0; i < arr.length; i++) {
if (n.indexOf(arr[i]) == -1) n.push(arr[i]);//如果当前数组的第i项已经保存进了临时数组,那么跳过, 否则把当前项push到临时数组里面,运用了indexOf方法的使用
}
return n;
}
console.log(unique(arr1)); //[1, 2, 3, 4, 5]

</script>
</body>

</html>

原型模式

与函数模式的不同是直接将这个去重方法封装到数组Array的原型属性当中,这样每一个数组都能后通过原型链访问到这个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>

<body>
<script>
var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

Array.prototype.unique = function() {
var n = []; //声明一个临时数组
for (var i = 0; i < this.length; i++) {
if (n.indexOf(this[i]) == -1) n.push(this[i]);//如果当前数组的第i项已经保存进了临时数组,那么跳过,否则把当前项push到临时数组里面
}
return n;
}
console.log(arr1.unique());//[1, 2, 3, 4, 5]

</script>
</body>

</html>

方法二:

普通函数模式封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>

<body>
<script>
var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

function unique(arr) {
var n = {}, //n为一个hash对象
r = []; //r为一个临时数组
for (var i = 0; i < arr.length; i++) {
if (!n[arr[i]]){ //如果hash表中没有当前项
n[arr[i]] = true; //存入hash表
r.push(arr[i]); //把当前数组的当前项push到临时数组里面
}
}
return r;
}
console.log(unique(arr1));//[1, 2, 3, 4, 5]

</script>
</body>

</html>

原型模式

与函数模式的不同是直接将这个去重方法封装到数组Array的原型属性当中,这样每一个数组都能后通过原型链访问到这个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>

<body>
<script>
var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

Array.prototype.unique = function() {
var n = {}, //n为hash表
r = []; //r为临时数组
for (var i = 0; i < this.length; i++) {
if (!n[this[i]]) { //如果hash表中没有当前项
n[this[i]] = true; //存入hash表
r.push(this[i]); //把当前数组的当前项push到临时数组里面
}
}
return r;
}
console.log(arr1.unique1()); //[1, 2, 3, 4, 5]
</script>
</body>

</html>

方法三

普通函数模式封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>

<body>
<script>
var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

function unique(arr) {
var n = [arr[0]]; //结果数组
for (var i = 1; i < arr.length; i++) { //从第二项开始遍历
if (arr.indexOf(arr[i]) == i) n.push(arr[i]);
//如果当前数组的第i项在当前数组中第一次出现的位置不是i, 那么表示第i项是重复的,忽略掉。否则存入结果数组
}
return n;
}
console.log(unique(arr1));//[1, 2, 3, 4, 5]

</script>
</body>

</html>

原型模式

与函数模式的不同是直接将这个去重方法封装到数组Array的原型属性当中,这样每一个数组都能后通过原型链访问到这个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>

<body>
<script>
var arr1 = [1, 2, 2, 3, 4, 3, 5, 4];

Array.prototype.unique = function() {
var n = [this[0]]; //结果数组
for (var i = 1; i < this.length; i++) { //从第二项开始遍历
if (this.indexOf(this[i]) == i) n.push(this[i]);
//如果当前数组的第i项在当前数组中第一次出现的位置不是i, 那么表示第i项是重复的,忽略掉。否则存入结果数组
}
return n;
}
console.log(arr1.unique1()); //[1, 2, 3, 4, 5]
</script>
</body>

</html>

结语

这里总结这几种方法,也是提醒自己以后遇到问题注意发散思维,并且通过发散思维还能够让自己收获更多相关的知识运用,何乐而不为。