Trong hướng dẫn này, bạn sẽ tìm hiểu về JavaScript Maps và WeakMaps với sự trợ giúp của các ví dụ.
JavaScript ES6 đã giới thiệu hai cấu trúc dữ liệu mới, tức là Mapvà WeakMap.
Bản đồ tương tự như các đối tượng trong JavaScript cho phép chúng ta lưu trữ các phần tử trong một cặp khóa / giá trị .
Các phần tử trong Bản đồ được chèn theo thứ tự chèn. Tuy nhiên, không giống như một đối tượng, một bản đồ có thể chứa các đối tượng, chức năng và các kiểu dữ liệu khác làm khóa.
Tạo bản đồ JavaScript
Để tạo một Map, chúng tôi sử dụng hàm new Map()tạo. Ví dụ,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Chèn mục vào bản đồ
Sau khi bạn tạo một bản đồ, bạn có thể sử dụng set()phương pháp để chèn các phần tử vào nó. Ví dụ,
// create a set let map1 = new Map(); // insert key-value pair map1.set('info', (name: 'Jack', age: 26)); console.log(map1); // Map ("info" => (name: "Jack", age: 26))
Bạn cũng có thể sử dụng các đối tượng hoặc chức năng làm phím. Ví dụ,
// Map with object key let map2 = new Map(); let obj = (); map2.set(obj, (name: 'Jack', age: "26")); console.log(map2); // Map (() => (name: "Jack", age: "26"))
Truy cập các phần tử bản đồ
Bạn có thể truy cập Mapcác phần tử bằng get()phương pháp này. Ví dụ,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // access the elements of a Map console.log(map1.get('info')); // (name: "Jack", age: "26")
Kiểm tra các yếu tố bản đồ
Bạn có thể sử dụng has()phương pháp này để kiểm tra xem phần tử có trong Bản đồ hay không. Ví dụ,
const set1 = new Set((1, 2, 3)); let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // check if an element is in Set console.log(map1.has('info')); // true
Loại bỏ các phần tử
Bạn có thể sử dụng clear()và delete()phương pháp để xóa các phần tử khỏi Bản đồ.
Các delete()trở về phương pháp truenếu một cặp khóa / giá trị quy định tồn tại và đã bị xóa hoặc lợi nhuận khác false. Ví dụ,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing a particular element map1.delete('address'); // false console.log(map1); // Map ("info" => (name: "Jack", age: "26")) map1.delete('info'); // true console.log(map1); // Map ()
Các clear()phương pháp loại bỏ tất cả các cặp khóa / giá trị từ một đối tượng bản đồ. Ví dụ,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
Kích thước bản đồ JavaScript
Bạn có thể lấy số phần tử trong Bản đồ bằng thuộc sizetính. Ví dụ,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Lặp lại qua bản đồ
Bạn có thể lặp qua các phần tử Bản đồ bằng cách sử dụng vòng lặp for… of hoặc phương thức forEach (). Các phần tử được truy cập theo thứ tự chèn. Ví dụ,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map for (let (key, value) of map1) ( console.log(key + '- ' + value); )
Đầu ra
tên- Jack tuổi- 27
Bạn cũng có thể nhận được kết quả tương tự như chương trình trên bằng forEach()phương pháp này. Ví dụ,
// using forEach method() let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map map1.forEach(function(value, key) ( console.log(key + '- ' + value) ))
Lặp lại các khóa bản đồ
Bạn có thể lặp lại Bản đồ và lấy khóa bằng keys()phương pháp này. Ví dụ,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let key of map1.keys()) ( console.log(key) )
Đầu ra
tên tuổi
Lặp lại các giá trị bản đồ
Bạn có thể lặp lại Bản đồ và nhận các giá trị bằng values()phương pháp này. Ví dụ,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let values of map1.values()) ( console.log(values); )
Đầu ra
Jack 27
Nhận Khóa / Giá trị của Bản đồ
Bạn có thể lặp lại Bản đồ và lấy khóa / giá trị của Bản đồ bằng entries()phương pháp này. Ví dụ,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let elem of map1.entries()) ( console.log(`$(elem(0)): $(elem(1))`); )
Đầu ra
Tên: Jack tuổi: 27
Bản đồ JavaScript so với Đối tượng
| Bản đồ | Vật |
|---|---|
| Maps can contain objects and other data types as keys. | Objects can only contain strings and symbols as keys. |
| Maps can be directly iterated and their value can be accessed. | Objects can be iterated by accessing its keys. |
The number of elements of a Map can be determined by size property. | The number of elements of an object needs to be determined manually. |
| Map performs better for programs that require the addition or removal of elements frequently. | Object does not perform well if the program requires the addition or removal of elements frequently. |
JavaScript WeakMap
The WeakMap is similar to a Map. However, WeakMap can only contain objects as keys. For example,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello")
When you try to add other data types besides objects, WeakMap throws an error. For example,
const weakMap = new WeakMap(); // adding string as a key to WeakMap weakMap.set('obj', 'hello');
// throws error // TypeError: Attempted to set a non-object key in a WeakMap
WeakMap Methods
WeakMaps có phương pháp get(), set(), delete(), và has(). Ví dụ,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello") // get the element of a WeakMap console.log(weakMap.get(obj)); // hello // check if an element is present in WeakMap console.log(weakMap.has(obj)); // true // delete the element of WeakMap console.log(weakMap.delete(obj)); // true console.log(weakMap); // WeakMap ()
Bản đồ yếu không thể lặp lại
Không giống như Maps, WeakMaps không thể lặp lại. Ví dụ,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); // looping through WeakMap for (let i of weakMap) ( console.log(i); // TypeError )
JavaScript Mapvà WeakMapđược giới thiệu trong ES6 . Một số trình duyệt có thể không hỗ trợ việc sử dụng chúng. Để tìm hiểu thêm, hãy truy cập hỗ trợ JavaScript Map và hỗ trợ JavaScript WeakMap.
