Hướng dẫn distinct array javascript - javascript mảng riêng biệt

Hi các bạn, tiếp tục chuỗi chủ đề xoay quanh JavaScript, hôm nay chúng ta sẽ bàn luận về chủ đề "Unique Array trong Javascript", vấn đề mà mình chắc chắn là trong quá trình làm việc bạn đã gặp phải rất nhiều. Cụ thể như nào chúng ta cùng kéo xuống dưới xem nhé

1. Kết hợp filter() và indexOf()

Ở bài viết trước mình đã giới thiệu phần này tới các bạn đoạn snippet này

function onlyUnique(value, index, self) {
  return self.indexOf(value) === index;
}

const myArray = ['a', 1, 'a', 2, '1'];
const unique = myArray.filter(onlyUnique);

console.log(unique); // > ['a', 1, 2, '1']

Theo đó filter() sẽ return về 1 array mới, trong filter() sử dụng điều kiện check trùng lặp để loại ra các phần tử đã tồn tại trong mảng trước đó nên kết quả cuối cùng ta thu được một mảng mới gồm những phần tử là duy nhất

2. Sử dụng Set() kết hợp Spread operator

Trong ES6 có giới thiệu thêm

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

Tuy nhiên bạn hãy cẩn trọng khi sử dụng nó, vì theo như mình biết

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

3. Sử dụng Set() kết hợp Array.from()

Tương tự như trên ta có thể kết hợp

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

4. Kết hợp Set() với các method của array

Như mình nói ở trên,

const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)];

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

const students = [
  {
    name: 'Krunal',
    age: 26
  },
  {
    name: 'Ankit',
    age: 25
  },
  {
    name: 'Krunal',
    age: 23
  }
];
const uniqueArr = [... new Set(students.map(data => data.name))];

console.log(uniqueArr); // > ["Krunal", "Ankit"]

5. Sử dụng Map()

Vẫn ở ví dụ ở mục 4, trong trường hợp bạn muốn return ra 1 array mới chứa các object là uniq theo trường

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

const students = [
  {
    name: 'Krunal',
    age: 26,
  },
  {
    name: 'Ankit',
    age: 25,
  },
  {
    name: 'Krunal',
    age: 23,
  },
];
const key = 'name';
const arrayUniqueByKey = [...new Map(students.map((item) => [item[key], item])).values()];

console.log(arrayUniqueByKey); // > Array [Object { name: "Krunal", age: 26 }, Object { name: "Ankit", age: 23 }]

Lưu ý: sử dụng cách này sẽ pick phần tử trùng lặp ở cuối list, như ví dụ trên array mới sẽ chứa

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

1 ví dụ khác

const myArray = [
  { id: '93', name: '1' },
  { id: '94', name: '2' },
  { id: '93', name: '3' },
  { id: '94', name: '4' },
];

const data = new Map();
for (const obj of myArray) {
  data.set(obj.id, obj);
}

const unique = [...data.values()];
console.log(unique); // > Array [Object { id: "93", name: "3" }, Object { id: "94", name: "4" }]

6. Định nghĩa mới Array Unique Prototype

Vẫn giữ tư duy cũ đó là lặp qua các phần tử trong mảng và chỉ push vào mảng các phần tử uniq, với vòng lặp

const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from(new Set(myArray));

console.log(unique); // > ['a', 1, 2, '1']

Array.prototype.unique = function () {
  const arr = [];
  for (let i = 0; i < this.length; i++) {
    if (!arr.includes(this[i])) {
      arr.push(this[i]);
    }
  }
  return arr;
};

const ages = [26, 27, 26, 26, 28, 28, 29, 29, 30];
const uniqueAges = ages.unique();
console.log(uniqueAges); // > Array [26, 27, 28, 29, 30]

7. Sử dụng const myArray = ['a', 1, 'a', 2, '1']; const unique = Array.from(new Set(myArray)); console.log(unique); // > ['a', 1, 2, '1'] 6 kết hợp const myArray = ['a', 1, 'a', 2, '1']; const unique = Array.from(new Set(myArray)); console.log(unique); // > ['a', 1, 2, '1'] 7

const myArray = [
  { id: '93', name: '1' },
  { id: '94', name: '2' },
  { id: '93', name: '3' },
  { id: '94', name: '4' },
];

const unique = myArray.reduce((accumulator, current) => {
  if (!accumulator.some((x) => x.id === current.id)) {
    accumulator.push(current);
  }
  return accumulator;
}, []);

console.log(unique); // > Array [Object { id: "93", name: "1" }, Object { id: "94", name: "2" }]

8. Sử dụng filter() kết hợp const myArray = ['a', 1, 'a', 2, '1']; const unique = Array.from(new Set(myArray)); console.log(unique); // > ['a', 1, 2, '1'] 9

const myArray = [
  { id: '93', name: '1' },
  { id: '94', name: '2' },
  { id: '93', name: '3' },
  { id: '94', name: '4' },
];
const unique = myArray.filter(
  (value, index, self) => self.findIndex((m) => m.id === value.id) === index,
);

console.log(unique); // > Array [Object { id: "93", name: "1" }, Object { id: "94", name: "2" }]

Kết luận

Trên đây mình đã giới thiệu cho các bạn 1 số cách để lọc ra các giá trị unique trong array, bài viết cũng khá dài rồi có gì chúng ta sẽ gặp lại nhau ở các bài viết khác nhé

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công và hẹn gặp lại ở bài viết sau nhé !