js实现数组去重,普通项与对象项

如何实现 js 中数组去重,普通项与对象项目,你会几种?

js 中普通项去重方法:

双层循环:(最原始)

1
2
// 普通项
let arr = [1, 2, 3, 2, 33, 55, 66, 3, 55];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function unique(array) {
  // res用来存储结果
  var res = [];
  for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
    for (var j = 0, resLen = res.length; j < resLen; j++) {
      if (array[i] === res[j]) {
        break;
      }
    }
    // 如果array[i]是唯一的，那么执行完循环，j等于resLen
    if (j === resLen) {
      res.push(array[i]);
    }
  }
  return res;
}

indexOf(/inclues) 判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function unique(array) {
  var res = [];
  for (var i = 0, len = array.length; i < len; i++) {
    var current = array[i];
    if (res.indexOf(current) === -1) {
      res.push(current);
    }
  }
  return res;
}

let newArr = [];
arr.forEach((item) => {
  if (!newArr.includes(item)) {
    newArr.push(item);
  }
});

console.log(newArr);

Object 键值对

1
2
3
4
5
6
function unique(array) {
  var obj = {};
  return array.filter(function (item, index, array) {
    return obj.hasOwnProperty(item) ? false : (obj[item] = true);
  });
}

ES6 的 Set 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function unique(array) {
   return Array.from(new Set(array));
}
------------------------------
function unique(array) {
    return [...new Set(array)];
}
------------------------------

var unique = (arr) => [...new Set(arr)]

// 此外，如果用 Map 的话：

function unique (arr) {
    const seen = new Map()
    return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}

js 中对象项去重方法:

一般是根据数组对象中的某个字段去重.

1
2
3
4
5
6
var arr = [
  { id: 1, city: "南京" },
  { id: 2, city: "南京" },
  { id: 3, city: "杭州" },
  { id: 4, city: "广州" },
];

对象法:数组的 reduce 方法:

1
2
3
4
5
var obj = {};
var newArr = arr.reduce((prev, cur) => {
  obj[cur.city] ? "" : (obj[cur.city] = true && prev.push(cur));
  return prev;
}, []);

冒泡排序法

1
2
3
4
5
6
7
8
9
10
for (var i = 0; i < arr.length - 1; i++) {
  for (var j = i + 1; j < arr.length; j++) {
    console.log(i, j);
    if (arr[i].city == arr[j].city) {
      arr.splice(j, 1);
      j--; // 因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
    }
  }
}
console.log(arr); //  [{id: 1,city: '南京'},{id: 3,city: '杭州'},{id: 4,city: '广州'}]

双重循环

1
2
3
4
5
6
7
8
9
var newArr = [];
arr.forEach((item) => {
  var check = newArr.every((b) => {
    return item.city !== b.city;
  });
  check ? newArr.push(item) : "";
});

console.log(newArr); //  [{id: 1,city: '南京'},{id: 3,city: '杭州'},{id: 4,city: '广州'}]

ES6 Map 对象

1
2
3
4
5
6
7
8
9
10
11
let formatArr = () => {
  let map = new Map();
  for (let item of arr) {
    if (!map.has(item.city)) {
      map.set(item.city, item);
    }
  }
  return [...map.values()];
};

let newArr = formatArr(); // [{id: 1,city: '南京'},{id: 3,city: '杭州'},{id: 4,city: '广州'}]

其他方法

如果项目中有引入相关的工具库,例如loadash等,也可以直接使用工具库提供的相关方法.

1
2
3
_.uniq(arr); // 数组(普通项去重)

_.uniqBy(arr, "city"); //数组对象 (根据某个字段去重)