Mảng là một trong những cấu trúc dữ liệu phổ biến nhất mà bạn sẽ sử dụng trong Javascript. Họ tạo danh sách để hiển thị cho người dùng có thể đơn giản hoặc chứa các đối tượng dữ liệu phức tạp. Tạo danh sách có thông tin rõ ràng trong đó là rất quan trọng để có trải nghiệm người dùng tốt. Một cách để làm điều này là đảm bảo rằng bạn không hiển thị cùng một thông tin nhiều lần
Mảng chứa dữ liệu đơn giản
Như đã đề cập ở trên, mảng trong Javascript có thể được tạo thành từ các mục dữ liệu đơn giản như số, chuỗi hoặc booleans. Các mảng chứa các loại thực thể dữ liệu này dễ dọn dẹp hơn nhiều để đảm bảo chỉ còn lại các giá trị riêng biệt
Đối với các mảng Javascript thuộc loại đơn giản, có hai tính năng kỳ diệu được tích hợp trong ngôn ngữ sẽ loại bỏ các bản sao trong một mảng cho bạn. Hai mục này là
- Đối tượng Set, là một tập hợp các giá trị giống như một mảng, tuy nhiên, đối tượng Set khác với mảng ở chỗ nó vốn không có khả năng lưu trữ các giá trị không phải là duy nhất. Điều này làm cho nó trở thành một đối tượng lý tưởng để sử dụng để loại bỏ các giá trị trùng lặp
- Toán tử trải rộng, được viết là. ...array. Trong trường hợp sử dụng này, toán tử trải phổ về cơ bản lấy từng mục trong tập hợp và chuyển nó dưới dạng một mục để thêm vào mảng trong hàm tạo bên trong của nó, sao cho mảng kết quả được tạo thành từ từng mục trong đối tượng Set
const duplicatesArray = [1,1,1,1,2,2,3,4,5,6,6,6,6]; const uniqueArray = [...new Set[duplicateArray]]; // console.log[uniqueArray] => [1, 2, 3, 4, 5, 6]
Cũng cần lưu ý rằng đoạn mã trên sẽ không thay đổi mảng ban đầu, nghĩa là hằng số bản saoArray vẫn chứa tất cả các thực thể ban đầu. Các mục duy nhất được lưu trữ riêng trong một mảng mới
Mảng chứa các đối tượng có nhiều thuộc tính
Thật không may, loại bỏ các đối tượng trùng lặp không đơn giản như trên đối với các loại không phức tạp. Điều này chủ yếu là do cách Javascript xử lý các đối tượng nói chung. Mỗi đối tượng được tạo sẽ được cấp phát một con trỏ bộ nhớ khác nhau và do đó, việc so sánh các đối tượng theo cách tương tự như trên không phát hiện ra các đối tượng có cùng giá trị vì chúng có các con trỏ tham chiếu khác nhau. Điều này cũng áp dụng trong trường hợp mảng chứa mảng con thay vì đối tượng
Điều này có nghĩa là chúng ta cần sử dụng logic thao tác mảng hơn một chút để xác định các đối tượng có cùng giá trị
Có một số trường hợp sử dụng khác nhau có nhiều khả năng bạn sẽ gặp nhất
- Một đối tượng trùng lặp là một trong đó một giá trị thuộc tính đối tượng phải là duy nhất
const duplicateObjs = [ { id: 1, name: 'James' }, { id: 2, name: 'Nick' }, { id: 2, name: 'Bob' } ]; const uniqueObjs = [...new Set[duplicateObjs.map[obj => obj.id]]] .map[id => duplicateObjs.find[obj => obj.id === id]]; /* console.log[uniqueObjs] => [ { id: 1, name: 'James' }, { id: 2, name: 'Nick' } ] */
Những gì chúng ta đang làm ở đây là biến mảng ban đầu thành một mảng kiểu nguyên thủy bằng cách sử dụng. map[] để chỉ truy xuất các giá trị thuộc tính id. Bằng cách đặt cái này bên trong một đối tượng Set[] mới, chúng tôi đạt được chức năng giống như ví dụ đầu tiên để chỉ tạo các giá trị duy nhất. Cuộc gọi thứ hai của. map[] sau đó trả về toàn bộ đối tượng từ mảng ban đầu bằng cách tìm phần tử có giá trị id đó. Các. Hàm find[] trả về thực thể đầu tiên trong mảng phù hợp với tiêu chí tìm kiếm, vì vậy chúng ta sẽ nhận được đối tượng có tên 'Nick' trong trường hợp này
- Đối tượng trùng lặp là đối tượng mà nhiều giá trị thuộc tính đối tượng không thể bằng nhau giữa các đối tượng
const duplicateObjs = [ { id: 1, name: 'James', age: 19 }, { id: 2, name: 'Nick', age: 26 }, { id: 2, name: 'Bob', age: 45 }, { id: 2, name: 'Nick', age: 34 }, { id: 1, name: 'James', age: 19 } ]; const isDuplicate = [item, arr] => { return arr.some[el => item.id === el.id && item.name === el.name]; } const uniqueArray = []; for[const item of duplicateArr] { if[!isDuplicate[item, uniqueArray]] uniqueArray.push[item]; } /* console.log[uniqueArray] => [ { id: 1, name: 'James' }, { id: 2, name: 'Nick' }, { id: 2, name: 'Bob' } ] */
Trong trường hợp sử dụng này, chúng tôi đang chạy chức năng phụ isDuplicate để kiểm tra xem mảng có chứa đối tượng có cả thuộc tính id và tên hay không. Nếu hàm này trả về false, thì chúng ta thêm đối tượng vào mảng duy nhất. Nếu mảng duy nhất đã chứa đối tượng, thì chúng ta tiếp tục
- Tất cả các giá trị thuộc tính đối tượng không được bằng nhau giữa các đối tượng
const duplicateObjs = [ { id: 1, name: 'James', age: 19 }, { id: 2, name: 'Nick', age: 26 }, { id: 2, name: 'Bob', age: 45 }, { id: 2, name: 'Nick', age: 34 }, { id: 1, name: 'James', age: 19 } ]; const uniqueArray = duplicateObjs.filter[[item] => { var key = Object.keys[item].map[key => item[key]].join['|']; if[!this[key]] return this[key] = true; }, Object.create[null]]; /* console.log[uniqueArray] => [ { id: 1, name: 'James', age: 19 }, { id: 2, name: 'Nick', age: 26 }, { id: 2, name: 'Bob', age: 45 }, { id: 2, name: 'Nick', age: 34 } ] */
Trong trường hợp sử dụng này, chúng tôi đang sử dụng phương thức bộ lọc mảng dựng sẵn, sau đó sử dụng một đối tượng mới để đánh giá xem danh sách kết hợp các khóa đối tượng đã tồn tại chưa. Danh sách kết hợp các thuộc tính đối tượng được đặt thành biến khóa bằng cách sử dụng Object. keys[] trả về một mảng các tên khóa. Sau đó, ánh xạ này để lấy giá trị cho từng khóa, sau đó chúng tôi nối chúng thành một chuỗi ở định dạng giá trị. giá trị ['1. Giacôbê. 19']. Đây là khóa chúng ta thêm vào đối tượng mới nếu nó không tồn tại. Nếu không, chúng ta trả về true cho hàm lọc để nó bao gồm đối tượng ban đầu trong mảng cuối cùng