Trong JavaScript, objects được sử dụng để lưu trữ nhiều giá trị dưới dạng cấu trúc dữ liệu phức tạp.
Một đối tượng được tạo bằng dấu ngoặc nhọn {…} và một danh sách các thuộc tính. Một thuộc tính là một cặp khóa-giá trị trong đó key phải là một chuỗi và value có thể thuộc bất kỳ loại nào.
Mặt khác, arrays là một bộ sưu tập được sắp xếp có thể chứa dữ liệu thuộc bất kỳ loại nào. Trong JavaScript, mảng được tạo bằng dấu ngoặc vuông [...] và cho phép các yếu tố trùng lặp.
Cho đến ES6 (ECMAScript 2015), JavaScript objects và arrays là những cấu trúc dữ liệu quan trọng nhất để xử lý các bộ sưu tập dữ liệu. Cộng đồng nhà phát triển không có nhiều lựa chọn ngoài điều đó. Mặc dù vậy, sự kết hợp giữa các đối tượng và mảng có thể xử lý dữ liệu trong nhiều tình huống.
Tuy nhiên, có một vài thiếu sót,
- Khóa đối tượng chỉ có thể thuộc loại
string. - Các đối tượng không duy trì thứ tự của các phần tử được chèn vào chúng.
- Các đối tượng thiếu một số phương thức hữu ích, khiến chúng khó sử dụng trong một số tình huống. Ví dụ: bạn không thể tính kích thước (
length) của một đối tượng một cách dễ dàng. Ngoài ra, liệt kê một đối tượng không phải là đơn giản. - Mảng là tập hợp các phần tử cho phép trùng lặp. Việc hỗ trợ các mảng chỉ có các phần tử riêng biệt yêu cầu thêm logic và mã.
Với việc giới thiệu ES6, chúng tôi có hai cấu trúc dữ liệu mới giải quyết những thiếu sót đã đề cập ở trên: Map và Set. Trong bài viết này, chúng ta sẽ xem xét kỹ lưỡng cả hai và hiểu cách sử dụng chúng trong các tình huống khác nhau.
Bản đồ trong JavaScript
Map là tập hợp các cặp khóa-giá trị trong đó khóa có thể thuộc bất kỳ loại nào. Map ghi nhớ thứ tự ban đầu mà các phần tử được thêm vào nó, có nghĩa là dữ liệu có thể được truy xuất theo cùng thứ tự mà nó được chèn vào.
Nói cách khác, Map có đặc điểm của cả hai Object và Array:
- Giống như một đối tượng, nó hỗ trợ cấu trúc cặp khóa-giá trị.
- Giống như một mảng, nó ghi nhớ thứ tự chèn.
Cách tạo và khởi tạo bản đồ trong JavaScript
một cái mới Map có thể được tạo ra như thế này:
const map = new Map();Cái nào trả về một khoảng trống Map:
Map(0) {}Một cách khác để tạo một Map là với các giá trị ban đầu. Đây là cách tạo một Map với ba cặp khóa-giá trị:
const freeCodeCampBlog = new Map([
['name', 'freeCodeCamp'],
['type', 'blog'],
['writer', 'Tapas Adhikary'],
]);Trả về một Map với ba yếu tố:
Map(3) {"name" => "freeCodeCamp", "type" => "blog", "writer" => "Tapas Adhikary"}Cách thêm giá trị vào Bản đồ trong JavaScript
Để thêm giá trị vào Bản đồ, hãy sử dụng set(key, value) phương pháp.
Các set(key, value) phương thức nhận hai tham số, key và valuetrong đó khóa và giá trị có thể thuộc bất kỳ loại nào, nguyên thủy (boolean, string, numberv.v.) hoặc một đối tượng:
// create a map
const map = new Map();
// Add values to the map
map.set('name', 'freeCodeCamp');
map.set('type', 'blog');
map.set('writer', 'Tapas Adhikary');Đầu ra:
Map(3) {"name" => "freeCodeCamp", "type" => "blog", "writer" => "Tapas Adhikary"}Xin lưu ý, nếu bạn sử dụng cùng một khóa để thêm giá trị vào Map nhiều lần, nó sẽ luôn thay thế giá trị trước đó:
// Add a different writer
map.set('writer', 'Someone else!');Vì vậy, đầu ra sẽ là:
Map(3)
{"name" => "freeCodeCamp", "type" => "blog", "writer" => "Someone else!"}Cách lấy giá trị từ Bản đồ trong JavaScript
Để có được một giá trị từ một Mapsử dụng get(key) phương pháp:
map.get('name'); // returns freeCodeCampTất cả thông tin về khóa bản đồ trong JavaScript
Map các khóa có thể thuộc bất kỳ loại nào, nguyên thủy hoặc đối tượng. Đây là một trong những khác biệt lớn giữa Map và các đối tượng JavaScript thông thường trong đó khóa chỉ có thể là một chuỗi:
// create a Map
const funMap = new Map();
funMap.set(360, 'My House Number'); // number as key
funMap.set(true, 'I write blogs!'); // boolean as key
let obj = {'name': 'tapas'}
funMap.set(obj, true); // object as key
console.log(funMap);Đây là đầu ra:
Map(3)
{
360 => "My House Number",
true => "I write blogs!",
{…} => true
}Một đối tượng JavaScript thông thường luôn coi khóa là một chuỗi. Ngay cả khi bạn truyền cho nó một nguyên hàm hoặc đối tượng, thì bên trong nó sẽ chuyển đổi khóa thành một chuỗi:
// Create an empty object
const funObj = {};
// add a property. Note, passing the key as a number.
funObj[360] = 'My House Number';
// It returns true because the number 360 got converted into the string '360' internally!
console.log(funObj[360] === funObj['360']);Thuộc tính và phương thức bản đồ trong JavaScript
JavaScript Map có các thuộc tính và phương thức dựng sẵn giúp dễ sử dụng. Dưới đây là một số trong những cái phổ biến:
- Sử dụng
sizethuộc tính để biết có bao nhiêu phần tử trong mộtMap: - Tìm kiếm một phần tử với
has(key)phương pháp: - Xóa một phần tử bằng
delete(key)phương pháp: - Sử dụng
clear()phương pháp để loại bỏ tất cả các phần tử từMapmột lần:
console.log('size of the map is', map.size);// returns true, if map has an element with the key, 'John'
console.log(map.has('John'));
// returns false, if map doesn't have an element with the key, 'Tapas'
console.log(map.has('Tapas')); map.delete('Sam'); // removes the element with key, 'Sam'.// Clear the map by removing all the elements
map.clear();
map.size // It will return, 0
MapIterator: khóa(), giá trị() và mục nhập() trong JavaScript
Các phương pháp keys(), values() và entries() các phương thức trả về một MapIteratorđiều này thật tuyệt vì bạn có thể sử dụng một for-of hoặc forEach vòng trực tiếp trên nó.
Đầu tiên, tạo một đơn giản Map:
const ageMap = new Map([
['Jack', 20],
['Alan', 34],
['Bill', 10],
['Sam', 9]
]);- Nhận tất cả các phím:
- Nhận tất cả các giá trị:
- Nhận tất cả các mục (cặp khóa-giá trị):
console.log(ageMap.keys());
// Output:
// MapIterator {"Jack", "Alan", "Bill", "Sam"}console.log(ageMap.values());
// Output
// MapIterator {20, 34, 10, 9}console.log(ageMap.entries());
// Output
// MapIterator {"Jack" => 20, "Alan" => 34, "Bill" => 10, "Sam" => 9}Cách lặp lại bản đồ trong JavaScript
Bạn có thể sử dụng một trong hai forEach hoặc for-of vòng lặp để lặp qua một Map:
// with forEach
ageMap.forEach((value, key) => {
console.log(`${key} is ${value} years old!`);
});
// with for-of
for(const [key, value] of ageMap) {
console.log(`${key} is ${value} years old!`);
}Đầu ra sẽ giống nhau trong cả hai trường hợp:
Jack is 20 years old!
Alan is 34 years old!
Bill is 10 years old!
Sam is 9 years old!Cách chuyển đổi một đối tượng thành bản đồ trong JavaScript
Bạn có thể gặp phải tình huống cần chuyển đổi một object đến một Map-giống cấu trúc. Bạn có thể sử dụng phương pháp entries của Object Để làm việc đó:
const address = {
'Tapas': 'Bangalore',
'James': 'Huston',
'Selva': 'Srilanka'
};
const addressMap = new Map(Object.entries(address));Cách chuyển đổi bản đồ thành đối tượng trong JavaScript
Nếu bạn muốn làm ngược lại, bạn có thể sử dụng fromEntries phương pháp:
Object.fromEntries(map)Cách chuyển đổi bản đồ thành một mảng trong JavaScript
Có một số cách để chuyển đổi bản đồ thành một mảng:
- sử dụng
Array.from(map): - Sử dụng toán tử trải rộng:
const map = new Map();
map.set('milk', 200);
map.set("tea", 300);
map.set('coffee', 500);
console.log(Array.from(map));console.log([...map]);Bản đồ so với đối tượng: Khi nào bạn nên sử dụng chúng?
Map có đặc điểm của cả hai object và array. Tuy nhiên, Map giống như một object hơn array do bản chất của việc lưu trữ dữ liệu trong key-value định dạng.
Tuy nhiên, sự giống nhau với các đối tượng kết thúc ở đây. Như bạn đã thấy, Map là khác nhau trong rất nhiều cách. Vì vậy, cái nào bạn nên sử dụng, và khi nào? Làm thế nào để bạn quyết định?
Sử dụng Map khi nào:
- Nhu cầu của bạn không đơn giản như vậy. Bạn có thể muốn tạo các khóa không phải là chuỗi. Lưu trữ một đối tượng làm khóa là một cách tiếp cận rất hiệu quả.
Mapcung cấp cho bạn khả năng này theo mặc định. - Bạn cần một cấu trúc dữ liệu nơi các phần tử có thể được sắp xếp. Các đối tượng thông thường không duy trì thứ tự các mục nhập của chúng.
- Bạn đang tìm kiếm sự linh hoạt mà không cần dựa vào thư viện bên ngoài như lodash. Cuối cùng, bạn có thể sử dụng một thư viện như lodash vì chúng tôi không tìm thấy các phương thức như has(), values(), delete() hoặc một thuộc tính như size với một đối tượng thông thường. Bản đồ giúp bạn thực hiện việc này dễ dàng bằng cách cung cấp tất cả các phương pháp này theo mặc định.
Sử dụng một đối tượng khi:
- Bạn không có bất kỳ nhu cầu nào được liệt kê ở trên.
- bạn dựa vào
JSON.parse()như mộtMapkhông thể được phân tích cú pháp với nó.
Đặt trong JavaScript
Một Set là một tập hợp các phần tử duy nhất có thể thuộc bất kỳ loại nào. Set cũng là một tập hợp các phần tử được sắp xếp theo thứ tự, có nghĩa là các phần tử sẽ được truy xuất theo cùng thứ tự mà chúng được chèn vào.
Một Set trong JavaScript hoạt động giống như một tập hợp toán học.
Cách tạo và khởi tạo Set trong JavaScript
một cái mới Set có thể được tạo ra như thế này:
const set = new Set();
console.log(set);Và đầu ra sẽ trống Set:
Set(0) {}Đây là cách tạo một Set với một số giá trị ban đầu:
const fruteSet = new Set(['🍉', '🍎', '🍈', '🍏']);
console.log(fruteSet);Đầu ra:
Set(4) {"🍉", "🍎", "🍈", "🍏"}Đặt thuộc tính và phương thức trong JavaScript
Set có các phương thức để thêm một phần tử vào nó, xóa các phần tử khỏi nó, kiểm tra xem một phần tử có tồn tại trong nó không và để xóa nó hoàn toàn:
- Sử dụng
sizetài sản để biết kích thước củaSet. Nó trả về số phần tử trong đó: - Sử dụng
add(element)Phương thức thêm một phần tử vàoSet:
set.size// Create a set - saladSet
const saladSet = new Set();
// Add some vegetables to it
saladSet.add('🍅'); // tomato
saladSet.add('🥑'); // avocado
saladSet.add('🥕'); // carrot
saladSet.add('🥒'); // cucumber
console.log(saladSet);
// Output
// Set(4) {"🍅", "🥑", "🥕", "🥒"}Tôi yêu dưa chuột! Làm thế nào về việc thêm một cái nữa?
Ồ không, tôi không thể – Set là một bộ sưu tập của duy nhất yếu tố:
saladSet.add('🥒');
console.log(saladSet);Đầu ra giống như trước đây – không có gì được thêm vào saladSet.
- Sử dụng
has(element)phương pháp tìm kiếm xem chúng ta có cà rốt (🥕) hay bông cải xanh (🥦) trongSet: - Sử dụng
delete(element)phương pháp loại bỏ quả bơ (🥑) khỏiSet:
// The salad has a🥕, so returns true
console.log('Does the salad have a carrot?', saladSet.has('🥕'));
// The salad doesn't have a🥦, so returns false
console.log('Does the salad have broccoli?', saladSet.has('🥦'));saladSet.delete('🥑');
console.log('I do not like 🥑, remove from the salad:', saladSet);Bây giờ món salad của chúng tôi Set là như sau:
Set(3) {"🍅", "🥕", "🥒"}- Sử dụng
clear()phương pháp để loại bỏ tất cả các phần tử từ mộtSet:
saladSet.clear();Cách lặp lại một tập hợp trong JavaScript
Set có một phương pháp gọi là values() trả về một SetIterator để có được tất cả các giá trị của nó:
// Create a Set
const houseNos = new Set([360, 567, 101]);
// Get the SetIterator using the `values()` method
console.log(houseNos.values());Đầu ra:
SetIterator {360, 567, 101}Chúng ta có thể sử dụng một forEach hoặc for-of lặp lại điều này để lấy các giá trị.
Thật thú vị, JavaScript cố gắng tạo ra Set tương thích với Map. Đó là lý do tại sao chúng tôi tìm thấy hai phương pháp giống như Map, keys() và entries().
Như Set không có chìa khóa, keys() phương thức trả về một SetIterator để lấy các giá trị của nó:
console.log(houseNos.keys());
// Output
// console.log(houseNos.keys());Với Mapcác entries() phương thức trả về một trình vòng lặp để truy xuất các cặp khóa-giá trị. Một lần nữa không có chìa khóa trong một SetVì thế entries() trả về một SetIterator để lấy các cặp giá trị-giá trị:
console.log(houseNos.entries());
// Output
// SetIterator {360 => 360, 567 => 567, 101 => 101}Cách liệt kê một tập hợp trong JavaScript
Chúng ta có thể liệt kê một Tập hợp bằng cách sử dụng forEach và for-of vòng lặp:
// with forEach
houseNos.forEach((value) => {
console.log(value);
});
// with for-of
for(const value of houseNos) {
console.log(value);
}Đầu ra của cả hai là:
360
567
101Tập hợp và Mảng trong JavaScript
Một mảng, giống như một Set, cho phép bạn thêm và xóa các phần tử. Nhưng mà Set hoàn toàn khác và không có nghĩa là để thay thế các mảng.
Sự khác biệt chính giữa một mảng và một Set là các mảng cho phép bạn có các phần tử trùng lặp. Ngoài ra, một số Set hoạt động như delete() nhanh hơn các hoạt động mảng như shift() hoặc splice().
nghĩ về Set như một phần mở rộng của một mảng thông thường, chỉ với nhiều cơ hơn. Các Set cấu trúc dữ liệu không phải là sự thay thế của array. Cả hai đều có thể giải quyết các vấn đề thú vị.
Cách chuyển đổi một Tập hợp thành một mảng trong JavaScript
chuyển đổi một Set thành một mảng rất đơn giản:
const arr = [...houseNos];
console.log(arr);Các giá trị duy nhất từ một mảng sử dụng Set trong JavaScript
Tạo ra một Set là một cách thực sự dễ dàng để loại bỏ các giá trị trùng lặp khỏi một mảng:
// Create a mixedFruit array with a few duplicate fruits
const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈'];
// Pass the array to create a set of unique fruits
const mixedFruitSet = new Set(mixedFruit);
console.log(mixedFruitSet);Đầu ra:
Set(4) {"🍉", "🍎", "🍈", "🍏"}Đặt và đối tượng trong JavaScript
Một Set có thể có các phần tử thuộc bất kỳ loại nào, kể cả các đối tượng:
// Create a person object
const person = {
'name': 'Alex',
'age': 32
};
// Create a set and add the object to it
const pSet = new Set();
pSet.add(person);
console.log(pSet);Đầu ra:
Không có gì ngạc nhiên ở đây – Set chứa một phần tử là một đối tượng.
Hãy thay đổi một thuộc tính của đối tượng và thêm nó vào tập hợp một lần nữa:
// Change the name of the person
person.name="Bob";
// Add the person object to the set again
pSet.add(person);
console.log(pSet);Bạn nghĩ đầu ra sẽ là gì? Hai person đối tượng hay chỉ một?
Đây là đầu ra:
Set là một tập hợp các yếu tố độc đáo. Bằng cách thay đổi thuộc tính của đối tượng, chúng tôi đã không thay đổi chính đối tượng đó. Vì thế Set sẽ không cho phép các yếu tố trùng lặp.
Set là một cấu trúc dữ liệu tuyệt vời để sử dụng ngoài các mảng JavaScript. Tuy nhiên, nó không có lợi thế lớn so với các mảng thông thường.
Sử dụng Set khi bạn cần duy trì một bộ dữ liệu riêng biệt để thực hiện các thao tác đã đặt trên like union, intersection, differencevà như thế.
Tóm tắt
Đây là kho lưu trữ GitHub để tìm tất cả mã nguồn được sử dụng trong bài viết này. Nếu bạn thấy nó hữu ích, vui lòng thể hiện sự ủng hộ của bạn bằng cách cho nó một ngôi sao: https://github.com/atapas/js-collections-map-set
Bạn cũng có thể thích một số bài viết khác của tôi:
Nếu bài viết này hữu ích, hãy chia sẻ nó để những người khác cũng có thể đọc nó. Bạn có thể @ tôi trên Twitter (@tapasadhikary) với các bình luận, hoặc thoải mái theo dõi tôi.
