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']
1 chức năng của nó là nhận đầu vào là các phần tử duy nhất không cho trùng lặp, ta có thể sử dụng như sauconst 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']
1 chỉ đáp ứng tốt với các dữ liệu const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
3, const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
4, const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
5, const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
6, const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
7. Các array có cấu trúc phức tạp có thể nó sẽ không hoạt động perfect.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']
1 với const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
9 như sauconst 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']
1 có thể không hoạt động tốt với các array có cấu trúc phức tạp, vì thế ta có thể kết hợp nó với các method khác của array để cho ra kết quả mong muốn. Ví dụ với const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from[new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
1const 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']
2 thì ta làm như sauuniq theo trường const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from[new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
2 thì ta làm như sauconst 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
3 chứ không phải const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from[new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
4: 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']
3 chứ không
phải const myArray = ['a', 1, 'a', 2, '1'];
const unique = Array.from[new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
41 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']
5 truyền thống ta sẽ tạo mới 1 prototype để sử dụng như sauArray.prototype.unique = function [] {
const arr = [];
for [let i = 0; i 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 = ['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 = [
{ 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 = ['a', 1, 'a', 2, '1'];
const unique = Array.from[new Set[myArray]];
console.log[unique]; // > ['a', 1, 2, '1']
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é !