Lưu trữ các cặp khóa và giá trị là một việc phổ biến mà chúng ta phải đối phó trong JavaScriptCách tiếp cận cơ bản nhất là sử dụng một đối tượng:

				
					const person = {};
person.name = 'Foo';
person.age = 20;

// Or
const person = {
    name: 'Foo',
    age: 20,
};
				
			

Được giới thiệu từ ES6, Map cấu trúc dữ liệu cung cấp khả năng tương tự. Mã mẫu ở trên có thể được viết lại Map như sau:

				
					const person = new Map();
person.set('name', 'Foo');
person.set('age', 20);
				
			

Sự khác biệt

  1. Object chỉ chấp nhận các khóa chuỗi và ký hiệu. Các loại khác sẽ được chuyển đổi tự động thành chuỗi. Map mặt khác chấp nhận bất kỳ loại khóa nào.

  2. Chúng ta có thể lặp lại các thuộc tính của một câu lệnh Map sử dụng trực tiếp forEach hoặc for ... of:

				
					const styles = new Map();
styles.set('color', 'blue');
styles.set('fontSize', '12px');

styles.forEach((value, key) => console.log(key, '=', value));

// Output:
// color = blue
// fontSize = 12px
				
			

Các đối tượng không thể lặp lại trực tiếp. Để lặp qua các thuộc tính của một đối tượng, chúng ta phải sử dụng Object.keys hoặc Object.values để Object.entries nhận danh sách các khóa, giá trị hoặc các cặp khóa và giá trị.

				
					styles = {
    color: 'blue',
    fontSize: '12px',
};

Object.keys(styles).forEach((key) => console.log(key, '=', styles[key]));

// Output:
// color = blue
// fontSize = 12px
				
			

3. Object có các thuộc tính đặc biệt, chẳng hạn như constructor__proto__v.v.

				
					let person = {};
person['constructor']; // ƒ Object() { [native code] }
				
			

Trong khi Map chỉ bao gồm những gì chúng tôi xác định:

				
					let person = new Map();
person.get('constructor'); // undefined
				
			

4. JSON hỗ trợ Object:

				
					const person = {};
person.name = 'Foo';
person.age = 20;

JSON.stringify(person); // "{"name":"Foo","age":20}"
				
			

Với Map, không thể lấy dữ liệu thích hợp khi được tuần tự hóa với JSON:

				
					const person = new Map();
person.set('name', 'Foo');
person.set('age', 20);

JSON.stringify(person); // "{}"
				
			

Tốt để biết

Map giữ thứ tự của các mục. Nó có nghĩa là khi bạn lặp lại các phím của Map , chúng ta sẽ thấy thứ tự tương tự như khi chúng được chèn vào Map .

Nó đúng với các đối tượng chỉ bao gồm các phím chuỗi và ký hiệu. Thứ tự các khóa của đối tượng không được giữ nếu có một khóa cần được chuyển đổi thành chuỗi.

				
					let codes = { A: 65, B: 66, C: 67, 0: 48 };
codes; // {0: 0, A: 65, B: 66, C: 67}
Object.keys(codes); // ["0", "A", "B", "C"]
				
			

Chúc bạn luyện tập tốt

Nếu chúng ta muốn lưu trữ các cặp khóa / giá trị mà không cần quan tâm đến việc tuần tự hóa chúng trong JSON, thì hãy sử dụng Map. Lặp lại và lấy kích thước của bản đồ thoải mái hơn so với làm với một đối tượng.

Object nên được sử dụng nếu chúng ta muốn chuyển đổi qua lại giữa dữ liệu thô và JSON hoặc bao gồm một logic nghiệp vụ cụ thể:

				
					const person = {
    firstName: 'Foo',
    lastName: 'Bar',
    getFullName: <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> () {
        return `\${<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.firstName} \${this.lastName}`;
    },
};
				
			

Leave a Reply

Your email address will not be published. Required fields are marked *