trong hướng dẫn này, bạn sẽ học cách xóa các bản sao khỏi một mảng trong JavaScript.

Remove Duplicates - Xoá phần tử trùng bằng javascript

2022-02-09 2454 lượt xem

Cách 1 dùng set để xoá kiểu dữ liệu nguyên thuỷ

Set trong Javascript là một loại object cho phép bạn lưu trữ dữ liệu một cách duy nhất, không trùng lặp.
new Set([iterable]);

Trong đó:

  • Tham số iterable là không bắt buộc. Nếu bạn không truyền tham số vào hàm khởi tạo thì Set sẽ rỗng - không có phần tử nào.
  • Ngược lại, nếu bạn truyền vào một iterable object thì tất cả các phần tử của object sẽ được thêm vào Set.

Ví dụ: 

Array là một loại iterable object Nên bạn có thể set như sau: 

const set2 = new Set([1, 2, "a", "b", 1]);
console.log(set2);
// Set(4) {1, 2, "a", "b"}

 Vậy nếu bạn muốn tạo xoá trùng trong js thì bạn clone object thành array là xong!

let chars = ['A', 'B', 'A', 'C', 'B'];
let uniqueChars = [...new Set(chars)];

console.log(uniqueChars);
Code language: JavaScript (javascript)
/// OUTPUT: [ 'A', 'B', 'C' ]

Cách 2 Xoá duplicatekhỏi một mảng bằng cách sử dụng phương thức indexOf () và filter ()

Phương thức indexOf () trả về index của lần xuất hiện đầu tiên của một phần tử tồn tại trong một mảng hoặc -1 nếu không thấy. Xem thêm ở đây: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf?retiredLocale=vi

Filter trong Javascript là một phương thức thuộc đối tượng mảng. Nó có công dụng đúng ý nghĩa với tên gọi của nó, tức là sẽ lặp qua qua các phần tử, sau đó tùy vào từng bài toán mà sẽ quyết định chọn phần tử đó hay không. Cuối cùng hàm này sẽ trả về một mảng các phần tử đã chọn. bạn xem thêm ở đây: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter?retiredLocale=vi

kết hợp 2 hàm đó lại ta muốn xoá trùng làm như sau: 

let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = chars.filter((c, index) => {
    return chars.indexOf(c) === index;
});

console.log(uniqueChars); output: [ 'A', 'B', 'C' ]

Cách 3 xoá phần tử trùngkhỏi một mảng bằng forEach () và include ()

Thay vì dùng indexOf để lấy index phần tử thì dùng include để check có tồn tại trong mảng không? nếu có rồi thì không push vào nữa. Cách này khá củ chuối - code dài dòng phức tạp nên không nên dùng.

let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = [];
chars.forEach((c) => {
    if (!uniqueChars.includes(c)) {
        uniqueChars.push(c);
    }
});

console.log(uniqueChars); // output: [ 'A', 'B', 'C' ]  

Bonus cách xoá hẳn những phần tử bị trùng ra khỏi mảng

Thay vì mảng đã cho là : ['A', 'B', 'A', 'C', 'B'] và output là [ 'A', 'B', 'C' ] thì đối với bài toán mình muốn output lại là như thế này: ['C']

Vậy chúng ta dùng thêm hàm: lastIndexOf

Xem chi tiết ở đây: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf

let chars = ['A', 'B', 'A', 'C', 'B'];

let dupChars = chars.filter((c, index) => chars.indexOf(c) == chars.lastIndexOf(c));

console.log(dupChars);/// output ['C']
bài viết trong chủ đề