Bài viết đăng tại: https://laptrinhcanban.com

Hướng dẫn cách xoá phần tử trùng trong mảng JavaScript. Bạn sẽ học được 3 cách căn bản để xoá phần tử trùng trong mảng JavaScript sau bài học này.

Chúng ta có 3 cách cơ bản để xóa phần tử trùng trong mảng JavaScript như sau:

• Xóa phần tử trùng trong mảng JavaScript bằng Array reduce
• Xóa phần tử trùng trong mảng JavaScript bằng Array filter
• Xóa phần tử trùng trong mảng JavaScript bằng Set

Xóa phần tử trùng trong mảng JavaScript bằng Array reduce

Trong bài Array reduce trong JavaScript chúng ta đã biết cách sử dụng phương thức này để xử lý tuần tự các phần tử trong mảng ban đầu thông qua một hàm “thu nhỏ dần” để thu về một kết quả tích lũy duy nhất.

Và nếu chúng ta đặt kết quả tích lũy duy nhất là là một mảng chứa các phần tử duy nhất từ mảng ban đầu, chúng ta cũng cũng có thể sử dụng Array reduce để tiến hành xóa phần tử trùng trong mảng JavaScript.

Dưới đây là chương trình mẫu:

let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let myArrayWithNoDuplicates = myArray.reduce(function (accumulator, element) {
  if (accumulator.indexOf(element) === -1) {
    accumulator.push(element)
  }
  return accumulator
}, [])

console.log(myArrayWithNoDuplicates)
// [ 'a', 'b', 'c', 'e', 'd' ]

Trong ví dụ này, chúng ta chỉ định giá trị giá trị ban đầu initialValue của biến mảng tích lũy accumulator là một mảng rỗng [].

Sau đó, bằng cách dùng hàm callback, chúng ta lần lượt lấy các phần tử element từ trong mảng ban đầu và kiểm tra phần tử element này có trong biến mảng accumulator hay không, thông qua phương thức indexOf trong JavaScript.

Nếu element đã tồn tại trong biến mảng accumulator, phần tử này sẽ được bỏ qua. Còn nếu chưa tồn tại thì sẽ được thêm vào trong accumulator thông qua phương thức push trong JavaScript.

Và mảng accumulator thu được trong kết quả kiểm tra với phần tử ngay trước đó được chuyển đến trong phép tính với phần tử sau đó. Và cuối cùng, khi tất cả các phần tử đã được kiểm tra với biến tích lũy, kết quả duy nhất là mảng accumulator đã được tích lũy chứa các phần tử không trùng nhau trong mảng ban đầu.

Tương tự với mảng chuỗi thì chúng ta cũng có thể sử dụng Array reduce với các mảng số để xóa phần tử trùng trong mảng JavaScript như sau:

let myArray = [1, 2, 2, 1, 4, 3, 76];

let myArrayWithNoDuplicates = myArray.reduce(function (accumulator, element) {
  if (accumulator.indexOf(element) === -1) {
    accumulator.push(element)
  }
  return accumulator
}, [])

console.log(myArrayWithNoDuplicates)

// [ 1, 2, 4, 3, 76 ]

Chúng ta cũng có thể viết gọn và tạo thành một hàm xóa phần tử trùng trong mảng JavaScript như sau:

function unique_arr(arr) {
    let newArr = arr.reduce(function (accumulator, element) {
        if (accumulator.indexOf(element) === -1) {
            accumulator.push(element)
        }
        return accumulator
    }, [])
    return newArr
}

let num = [1, 2, 2, 1, 4, 3, 76];

console.log(unique_arr(num));
//[ 1, 2, 4, 3, 76 ]

Xóa phần tử trùng trong mảng JavaScript bằng Array filter

Tương tự như Array reduce thì chúng ta cũng có thể sử dụng Array filter để xóa phần tử trùng trong mảng JavaScript.

Trong bài Array filter trong JavaScript chúng ta đã biết cách sử dụng phương thức này để lấy các phần tử trong mảng ban đầu thỏa mãn điều kiện và ra tạo mảng mới.

Nếu chúng ta đặt điều kiện chỉ định là không được lấy phần tử trùng lặp, thì sau khi xử lý hết các phần tử trong mảng ban đầu bằng Array filter, mảng không chứa phần tử trùng sẽ được trả về.
Dưới đây là chương trình mẫu:

let num = [1, 2, 2, 1, 4, 3, 76];
let result = [];
result = num.filter(function(element){
  return result.includes(element) ? '' : result.push(element)
});

console.log(result);
//[ 1, 2, 4, 3, 76 ]

Trong ví dụ này, chúng ta sử dụng biến element để nhận lần lượt các phần tử từ trong mảng ban đầu, và kiểm tra phần tử đó có thỏa mãn điều kiện tồn tại trong mảng kết quả hay không.

Và bằng cách sử dụng tới Toán tử 3 ngôi, chúng ta có thể quyết định việc xử lý kết quả như thế nào nếu phần tử đang xét có và không tồn tại trong mảng kết quả. Nếu có tồn tại, chúng ta trả về chuỗi trống, và nếu không tồn tại, chúng ta sẽ thêm nó vào mảng kết quả

Và, một mảng mới gồm các phần tử duy nhất được lấy ra từ mảng ban đầu thỏa mãn điều kiện đã được tạo ra như trên.

Chúng ta cũng có thể viết gọn và tạo thành một hàm xóa phần tử trùng trong mảng JavaScript như sau:

function unique_arr(arr) {
  var newArr = []
  newArr = arr.filter(function (item) {
    return newArr.includes(item) ? '' : newArr.push(item)
  })
  return newArr
}

let num = [1, 2, 2, 1, 4, 3, 76];

console.log(unique_arr(num));
//[ 1, 2, 4, 3, 76 ]

Xóa phần tử trùng trong mảng JavaScript bằng Set

Set trong JavaScript là kiểu dữ liệu chỉ cho phép chứa các phần tử duy nhất không trùng lặp trong nó.

Bằng cách chuyển mảng đã cho thành Set, chúng ta có thể xóa đi các phần tử trùng trong mảng ban đầu, rồi chuyển lại kết quả từ Set thành mảng và hoàn thành xử lý xóa phần tử trùng trong mảng JavaScript.

Ví dụ cụ thể:

let myArray = [1, 2, 2, 1, 4, 3, 76];
let myset = new Set(myArray); //Chuyển mảng thành Set để xóa phần tử trùng
let result = Array.from(myset);//Chuyển lại Set thành mảng kết quả

console.log(result)
// [ 1, 2, 4, 3, 76 ]

Chúng ta cũng có thể viết gọn và tạo thành một hàm xóa phần tử trùng trong mảng JavaScript như sau:

//Hàm xóa phần tử trùng trong mảng JavaScript
function unique_arr(arr) {
  return Array.from(new Set(arr)) //
}

let myArray = [1, 2, 2, 1, 4, 3, 76];
console.log(unique_arr(myArray));
//[ 1, 2, 4, 3, 76 ]

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách xoá phần tử trùng trong mảng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/xoa-phan-tu-trung-trong-mang-javascript/