Khi bạn có một mảng với các giá trị trùng lặp, bạn có thể lấy các giá trị duy nhất bằng cách gọi hàm tạo Set
trên mảng. new Set[[]]
Ảnh của Igor Starkov trên BaptXóa các giá trị trùng lặp khỏi một mảng
Một trong những phần yêu thích của tôi về ES6 [còn được gọi là ECMAScript 2015 hoặc chỉ là “JavaScript hiện đại”] là việc bổ sung Set
, một loại đối tượng mới sẽ chỉ cho phép bạn thêm bất kỳ giá trị nào vào nó một lần.
Thoạt nhìn, Set
có một số điểm tương đồng với các đối tượng JavaScript thông thường, yêu cầu các khóa đối tượng duy nhất [còn được gọi là thuộc tính hoặc tên thuộc tính]. Các đối tượng chỉ cho phép bạn thêm bất kỳ tên thuộc tính cụ thể nào một lần, vì vậy có vẻ như bạn có thể sử dụng chúng để nhận các giá trị duy nhất từ một mảng JavaScript
Tuy nhiên, khóa đối tượng JavaScript phải là chuỗi; . Ngoài ra, các khóa đối tượng không nhớ “thứ tự chèn” của chúng — thứ tự ban đầu chúng được thêm vào đối tượng
Điều đó làm cho các đối tượng không phù hợp để tìm các giá trị duy nhất từ một mảng, đặc biệt nếu bạn muốn nhận các giá trị duy nhất theo cùng thứ tự mà chúng xuất hiện bên trong mảng. Đó là lý do tại sao bây giờ chúng ta có Set
Như chúng ta sẽ thấy trong bài viết này, bởi vì các đối tượng Set
có thể lặp lại, nên rất dễ chuyển đổi các mảng thành các đối tượng Set
và ngược lại
Tìm các giá trị mảng duy nhất với Set
Hãy lấy một ví dụ về mã của một mảng chứa các loại khác nhau, một số số trùng lặp, chuỗi và booleans
Trong khi tôi đang sử dụng các kiểu nguyên thủy phổ biến hơn, thì Set
thực sự hoạt động tốt với các giá trị Set
1, Set
2 và Set
3
Xem mã thô dưới dạng GitHub Gist
Trong ví dụ này, chúng ta thấy rằng thứ tự chèn của các mục được duy trì, chẳng hạn như Set
4 vẫn đứng trước Set
5 trong mảng kết quả gồm 6 giá trị duy nhất sau khi 7 giá trị trùng lặp đã bị xóa
Làm cách nào để lấy các giá trị riêng biệt từ mảng?
“Hàm tạo
Set
9 cho phép bạn tạo các đối tượngSet
lưu trữ các giá trị duy nhất thuộc bất kỳ loại nào, cho dù là giá trị nguyên thủy hay tham chiếu đối tượng. ” — Tài liệu MDN
Chúng ta có thể chuyển đổi trở lại một mảng bằng cách sử dụng new Set[[]]
1 hoặc, cách khác, toán tử trải rộng new Set[[]]
2 với dấu ngoặc vuông new Set[[]]
3. Cái sau còn được gọi là sử dụng cú pháp trải rộng new Set[[]]
4 với “ký hiệu theo nghĩa đen của mảng. ”
Đặt cả hai lại với nhau, chúng ta có thể nhận được các giá trị duy nhất từ mảng bằng một lớp lót. new Set[[]]
5. Mã tương đương sử dụng cú pháp trải rộng new Set[[]]
4 là. new Set[[]]
7
Lưu ý rằng việc sử dụng new Set[[]]
8 với các đối tượng JavaScript hoạt động hơi khác một chút, tùy thuộc vào việc bạn cần các tham chiếu đối tượng duy nhất hay để so sánh nội dung của các đối tượng đó
Hành vi mặc định sử dụng các tham chiếu đối tượng duy nhất, chẳng hạn như Set
sẽ xóa mọi bản sao của các đối tượng được tìm thấy nhiều lần. Bạn phải thực hiện một cách tiếp cận khác để so sánh nội dung của các đối tượng
Để biết thêm thông tin về cách tiếp cận này để tìm các giá trị duy nhất, vui lòng đọc hướng dẫn đầy đủ của tôi về cách sử dụng Set
trong JavaScript
Cách sử dụng Đặt để lọc các mục duy nhất trong JavaScript ES6
Cần các giá trị duy nhất trong JavaScript? . Đây là cách sử dụng Đặt để lọc danh sách…
trung bình. com
Tôi hy vọng bài viết này đã giúp bạn hiểu tại sao Set
là công cụ để sử dụng khi bạn cần lấy các giá trị duy nhất từ một mảng
Mã hóa vui vẻ. 🎭👔🎠🎄🎁
Tiến sĩ. Derek Austin là tác giả của Lập trình nghề nghiệp. Làm thế nào bạn có thể trở thành một lập trình viên có thân hình 6 con số thành công trong 6 tháng, hiện đã có trên Amazon
Bạn đã bao giờ muốn lấy các phần tử riêng biệt từ một mảng chưa?
hình ảnh từ pexels Các phần tử riêng biệt của một mảng các giá trị nguyên thủy
là các giá trị bất biến trong tất cả các loại ngoại trừ các đối tượng. Các loại giá trị nguyên thủy bao gồm Boolean, Null, Undefined, Number, String và Symbol. Mảng giá trị nguyên thủy thường được sử dụng làm tùy chọn chọn và chúng tôi không muốn các giá trị tùy chọn trùng lặp. Ví dụ: chúng tôi có một mảng số đại diện cho năm tài chính [2016, 2017, 2017, 2016, 2019, 2018, 2019]
và chúng tôi muốn hiển thị tất cả các năm tài chính có sẵn [[2016, 2017, 2018, 2019]
] để người dùng có thể chọn một giá trị để lọc dữ liệu. Trong kịch bản này, chúng ta cần lấy các phần tử riêng biệt từ mảng ban đầu
có một câu trả lời có giá trị. Có hai cách phổ biến [tương ứng trong ES5 và ES6] để nhận các giá trị duy nhất trong các mảng giá trị nguyên thủy của JavaScript. Về cơ bản, trong ES5, trước tiên bạn xác định một hàm gọi lại distinct
để kiểm tra xem giá trị có xuất hiện lần đầu trong mảng ban đầu hay không, sau đó lọc mảng ban đầu để chỉ các phần tử xuất hiện đầu tiên được giữ lại
Trong ES6, mã đơn giản hơn nhiều. Đoạn mã bên dưới sử dụng đối tượng Set để lưu trữ một tập hợp các giá trị duy nhất, sau đó sử dụng toán tử trải rộng để tạo một mảng mới
Tuy nhiên, chúng ta cần hết sức cẩn thận rằng giải pháp trên chỉ hoạt động đối với các giá trị nguyên thủy. Nếu bạn có một mảng ngày, thì bạn cần một số phương thức tùy chỉnh hơn. Ảnh chụp màn hình bên dưới cho thấy rằng Set
có thể không hoạt động như bạn mong đợi, vì Set
so sánh các đối tượng theo tham chiếu
Các giá trị thuộc tính riêng biệt của một mảng các đối tượng
Rất thường xuyên, mảng mà chúng ta đang xử lý bao gồm các đối tượng JSON được lấy từ phía máy chủ. Bây giờ, chúng tôi muốn lấy các giá trị riêng biệt của một thuộc tính nhất định từ mảng đối tượng. Ví dụ: mảng là [ {"name":"Joe", "age":17}, {"name":"Bob", "age":17}, {"name":"Tom", "age":35} ]
và chúng tôi muốn lấy các độ tuổi khác nhau từ mảng
Giải pháp thực sự rất dễ dàng. Trước tiên, chúng tôi ánh xạ mảng thành một mảng mới chỉ chứa các giá trị nguyên thủy, sau đó chúng tôi có thể sử dụng các giải pháp trên. Ảnh chụp màn hình bên dưới hiển thị một ví dụ
Các đối tượng khác biệt theo giá trị thuộc tính từ một mảng các đối tượng
Đôi khi chúng ta muốn lấy một mảng các đối tượng riêng biệt theo giá trị thuộc tính từ mảng ban đầu. Ví dụ chúng ta có một mảng đối tượng như bên dưới. Đối với mỗi đối tượng, các thuộc tính id
và name
nằm trong 1. 1 mối quan hệ
[
{ id: 3, name: 'Central Microscopy', fiscalYear: 2018 },
{ id: 5, name: 'Crystallography Facility', fiscalYear: 2018 },
{ id: 3, name: 'Central Microscopy', fiscalYear: 2017 },
{ id: 5, name: 'Crystallography Facility', fiscalYear: 2017 }
]
Chúng tôi muốn có được một mảng các đối tượng có cả thuộc tính id
và name
bởi vì các tùy chọn được chọn hiển thị tốt hơn ở định dạng
const array = [
{ id: 3, name: 'Central Microscopy', fiscalYear: 2018 },
{ id: 5, name: 'Crystallography Facility', fiscalYear: 2018 },
{ id: 3, name: 'Central Microscopy', fiscalYear: 2017 },
{ id: 5, name: 'Crystallography Facility', fiscalYear: 2017 }
];
const result = [];
const map = new Map[];
for [const item of array] {
if[!map.has[item.id]]{
map.set[item.id, true]; // set any value to Map
result.push[{
id: item.id,
name: item.name
}];
}
}
console.log[result]
2 so với chỉ ở định dạng id
hoặc name
Điều này có thể được thực hiện trong hai bước. đầu tiên, chúng tôi tạo ra một mảng gồm các id
riêng biệt; . Đoạn mã như sau
Tuy nhiên, phương pháp trên không hiệu quả nếu bạn có một mảng lớn? . Ví dụ,
const array = [
{ id: 3, name: 'Central Microscopy', fiscalYear: 2018 },
{ id: 5, name: 'Crystallography Facility', fiscalYear: 2018 },
{ id: 3, name: 'Central Microscopy', fiscalYear: 2017 },
{ id: 5, name: 'Crystallography Facility', fiscalYear: 2017 }
];
const result = [];
const map = new Map[];
for [const item of array] {
if[!map.has[item.id]]{
map.set[item.id, true]; // set any value to Map
result.push[{
id: item.id,
name: item.name
}];
}
}
console.log[result]
Hi vọng điêu nay co ich. Cảm ơn vì đã đọc
✉️ Đăng ký Email Blast hàng tuần một lần của CodeBurst, 🐦 Theo dõi CodeBurst trên Twitter, xem 🗺️ Lộ trình dành cho nhà phát triển web năm 2018 và 🕸️ Tìm hiểu về phát triển web Full Stack
Làm cách nào để lấy dữ liệu duy nhất trong js?
Để nhận các giá trị duy nhất từ một mảng, bạn có thể sử dụng vòng lặp “for”, hàm tạo “Set[]” và “Array. phương pháp lọc[]” . Vòng lặp for là phương pháp được sử dụng phổ biến nhất để lấy các phần tử duy nhất bằng cách lặp lại mảng.Giá trị duy nhất trong một mảng là gì?
Bạn có thể tìm các giá trị riêng biệt trong một mảng bằng hàm Distinct. Hàm Distinct lấy mảng làm tham số đầu vào và trả về một mảng khác chỉ bao gồm các phần tử duy nhất hoặc không trùng lặp . Ví dụ sau đây cho thấy cách tìm các giá trị riêng biệt trong một mảng.Được đặt JavaScript duy nhất?
Đối tượng tập hợp là tập hợp các giá trị. Một giá trị trong Tập hợp chỉ có thể xảy ra một lần; . it is unique in the Set 's collection.Làm cách nào để tạo một mảng duy nhất trong JavaScript?
Với JavaScript 1. 6/ ECMAScript 5, bạn có thể sử dụng phương thức lọc gốc của Mảng theo cách sau để lấy một mảng có các giá trị duy nhất. .hàm onlyUnique[value, index, self] { return self. .// ví dụ sử dụng. var myArray = ['a', 1, 'a', 2, '1'];