数组去重方法集锦(二)

之前的几种方法都是ES3的方法,也就是说如果你需要兼容低版本浏览器可以参考之前的方法。

今天的要说的是ES5的方法。数组的方法在ES5时增加了几个比如indexOf啦foreEach啦那么第一种就先用这两个。

其实它的原理还是前一个元素和后一个元素的比较。不明白前后对比的同学可以到前面文章看看啊!正好你可以多看一个,字不多能看懂!

方法一 索引对比法:

还是先创建老数组新数组,空的新数组就可以了

var arr = [3, 5, 2, 5, 7, 23, 5, 7];
var newArr = [];

接着给老数组用forEach方法,为什么用这个?我们都知道,之前一直用for循环的方法,但是ES5提供的几种遍历方法种,可以接收一个参数,这个参数分别是:数组元素,索引,数组本身。这些东西直接就可以用,岂不是很方便吗?

function fn(a, b, c) {}
arr.forEach(fn);

之后在拿到所有的东西,需要判断前后值是否一样,这是有需要用到indexOf,它的作用是可以检测这个值在数组种是否存在,不存在就返回-1。那么不存在意味着没找到一样的,对我们来说就是需要这个,所以push。

if (arr.indexOf(a,(b+1))==-1) {
  newArr.push(a);
}

再把代码重新整理,写一遍完整的

var arr = [3, 5, 2, 5, 7, 23, 5, 7];
var newArr = [];
function fn(a, b, c) {
  if (arr.indexOf(a, (b+1)) == -1) {
    newArr.push(a);
  }
}
arr.forEach(fn);
console.log(newArr);

方法二 索引查找法:

接下来看索引查找法,当然了也是应用ES5提供的新方法。先弄一个老数组一个新数组。新数组先给个值,就给老数组的第一个,这样后面好比较。

var arr = [3, 5, 2, 7, 23, 5, 7];
var newArr = [arr[0]];

判断新数组的值在老数组有没有一样的,如果没有还是用indexOf照元素,没找到的返回-1,没找到就是没有,所以push。

for (var i = 1; i < arr.length; i++) {
  if(newArr.indexOf(arr[i]) == -1){
    newArr.push(arr[i]);
  }
}

以下是最终代码:

var arr = [3, 5, 2, 7, 23, 5, 7];
var newArr = [arr[0]];
for (var i = 1; i < arr.length; i++) {
  if(newArr.indexOf(arr[i]) == -1){
    newArr.push(arr[i]);
  }
}
console.log(newArr);

大家应该发现了,用了ES5提供的新方法之后简单了不少,但前提是之前的方法要理解才行。低版本浏览器不要用这样的方法,否则不出效果或者报错。

那么也希望大家能关注我我都公众号web-jianma,手机浏览随时随地~

你可能感兴趣的:(javascript)