6 Cách remove những phần tử trùng nhau trong mảng javascript

Nội dung bài viết

Video học lập trình mỗi ngày

How to Remove Array Duplicates in ES6. Có những câu hỏi tôi thường thấy trên những diễn đàn như reddit hay stackoverflow vấn đề làm sao để loại bỏ những phần tử trùng nhau trong array một cách nhanh gọn mà không làm code của bạn rối tung lên. Sau đây bài viết sẽ giúp bạn làm được điều đó với 6 cách loại bỏ phần tử trùng lặp.


1. Sử dụng thuộc tính indexOf của mảng để truy vấn


Bởi vì khi ES6 được giới thiệu thì lúc đó cũng có sự nhầm lẫn giữa FindIndex vs indexOf trong javascript. Chính vì lẽ đó nên nhớ sử dụng indexOf() khi tìm index của một array kiểu primitive types (like string, number, or boolean).


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

2. Sắp xếp mảng ban đầu trước, so sánh nó với các mảng liền kề và lưu trữ chúng trong mảng mới nếu chúng khác nhau.


Đây có thể gọi là một phương pháp lập trình theo tư duy, mỗi người có một cách để giải quyết.

function unique(arr) {
  var formArr = arr.sort()
  var newArr = [formArr[0]]
  for (let i = 1; i < formArr.length; i++) {
    if (formArr[i] !== formArr[i - 1]) {
      newArr.push(formArr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

3. Sử dụng các đặc điểm hiện có của thuộc tính đối tượng và lưu trữ nó trong một mảng mới nếu không có thuộc tính đó.


function unique(arr) {
  var obj = {}
  var newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = 1
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))


4. Sử dụng includes()


function unique(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))


5. Sử dụng filter và includes

Tips: Cẩn thẩn khi sử dụng filter trong es6

function unique(arr) {
  var newArr = []
  newArr = arr.filter(function (item) {
    return newArr.includes(item) ? '' : newArr.push(item)
  })
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))


6. Sử dụng Set() của ES6.

Sự tiện dụng của map và set trong ES6 là một điều tuyệt vời khi ES mang lại cho mỗi lập trình javascript.

function unique(arr) {
  return Array.from(new Set(arr)) //
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

Có thể bạn đã bị missing