So sánh xem có map với nhau năm 2024

Một trong những tính năng đáng giá trên VietmapLive so với các loại bản đồ trực tuyến khác nằm ở khả năng hiển thị tốc độ tối đa cho phép ở mọi tuyến đường tại Việt Nam, tính năng này rất quan trọng với hầu hết lái xe, nhất là khi di chuyển trên những con đường tỉnh lộ. Ngoài ra, bản đồ này còn thông báo tốc độ giới hạn tiếp theo, đoạn đường cấm vượt, khu dân cư, camera phạt nguội...

Chưa dừng lại ở đó, trong tháng 6.2023, đơn vị thành công áp dụng tính năng cảnh báo đoạn đường cấm dừng đỗ, cấm rẽ theo từng khung giờ, cấm ô tô đậu theo ngày chẵn/lẻ nhằm hỗ trợ người điều khiển xe luôn tuân thủ đúng luật giao thông và lái xe an toàn, chủ động. Đây là những tính năng có tính thực tiễn cao khi lái xe trong đô thị đông đúc.

Thông tin tốc độ giới hạn, biển báo cấm dừng, đậu, camera phạt nguội hiển thị trên bản đồ VietmapLive

Bản đồ này còn có thêm tính năng cập nhật tình trạng giao thông ở các đoạn đường, thông tin hợp tác cùng Sở GTVT TP.HCM hiển thị các điểm "nóng" kẹt xe, tai nạn mới nhất và giờ cao điểm, sẽ có thông báo về người dùng và hiển thị hình ảnh trên bản đồ.

Với những người thường xuyên lái xe đường dài, bản đồ này còn có chức năng tính toán toàn bộ chi phí qua trạm thu phí BOT trên toàn bộ lộ trình, để người dùng biết được trong thẻ có đủ số tiền để qua hết các trạm trên lộ trình hay không. Ngoài ra, VietmapLive còn hiển thị khoảng cách đến các trạm dừng chân trên đường đi để người lái chủ động giảm tốc độ.

VietmapLive còn có thể kết nối với màn hình hiển thị kính lái thông tin HUD (trang bị mua thêm) để sử dụng dẫn đường, cảnh báo biển báo giao thông và hiển thị thông số xe, giúp người lái quan sát tốt hơn.

VietmapLive có nhiều tính năng hữu ích phù hợp với nhu cầu người dùng trong nước

Điểm còn hạn chế của VietmapLive khi hiện tại chưa dự báo được chính xác thời gian di chuyển đến địa điểm mong muốn như Google Maps. Ngoài ra, người dùng sẽ phải chi trả một khoản phí hàng năm để sử dụng. Tuy nhiên, đây chỉ là điểm yếu nhỏ so với một loạt ưu điểm của bản đồ đã được "Việt hóa" và bổ sung các tính năng đáp ứng tốt nhu cầu của người dùng trong nước.

Có thể bạn đã quen với việc sử dụng Object trong JavaScript. Trong khi đó, Map là một kiểu dữ liệu mới xuất hiện trong ES6. Map có những đặc điểm giống và khác so với Object. Cụ thể là như thế nào? Sau đây, mình sẽ so sánh Map với Object trong JavaScript.

Nhắc lại khái niệm Map và Object

► Object là một khái niệm trừu tượng dùng để biểu diễn một vật thể (cụ thể). Trong đó, các thuộc tính dùng để miêu tả đặc điểm, tính chất của đối tượng. Và các phương thức dùng để chỉ các hoạt động của đối tượng.

► Map là một cấu trúc dữ liệu cho phép lưu trữ dữ liệu theo kiểu key-value, tương tự như object.

Sau đây là một số đặc điểm giống nhau và khác nhau giữa Map và Object.

Giống nhau

• Đều cho phép lưu trữ dữ liệu theo kiểu key-value.
• Đều cho phép lấy dữ liệu theo key, xoá key, kiểm tra xem 1 key đã tồn tại hay chưa.

Khác nhau

Trước khi Map xuất hiện, người ta vẫn thường sử dụng Object cho việc lưu trữ dữ liệu dạng key-value.

Tuy nhiên, khái niệm Object lại quá rộng, mọi thứ đều có thể là Object. Còn Map thì hướng nhiều hơn đến việc lưu trữ dữ liệu.

Vậy Map khác Object như thế nào?

Kiểu dữ liệu của key

Object chỉ cho phép kiểu dữ liệu của key là String hoặc Symbol.

const symbol1 = Symbol(1);
const obj = {
  x: 1,
  "a b": 2,
  symbol1: 3,
};
console.log(obj);
// {x: 1, a b: 2, symbol1: 3}

Ngược lại, Map cho phép mọi kiểu dữ liệu có thể làm key, kể cả number,

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

0, function, object,...

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

Thứ tự của key

Map duy trì thứ tự của key giống như khi chúng được thêm vào.

const map = new Map();
map.set("xyz", 1);
map.set("b", 2);
map.set("1", 4);
for (const key of map.keys()) {
  console.log(key);
}
/*
xyz
b
1
 */
`

Object thì không đảm bảo thứ tự các key.

• 1
• xyz
• b

  */

  `

Xác định kích thước

Bạn có thể lấy kích thước của Map thông qua thuộc tính

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

1.

const map = new Map();
map.set("xyz", 1);
map.set("b", 2);
map.set("1", 4);
console.log(map.size);
// 3

Đối với Object, bạn phải đếm số lượng các thuộc tính thủ công. Hoặc bạn tính số lượng này một cách gián tiếp, thông qua phương thức Object.keys().

Bởi lẽ, phương thức

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

2 trả về một mảng chứa các key của Object. Lúc này, bạn chỉ cần sử dụng thuộc tính

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

3 của array là được.

const obj = { xyz: 1 };
obj.b = 2;
obj["1"] = 4;
// sử dụng vòng lặp for...in
let size = 0;
for (const key in obj) size++;
console.log(size);
// 3
// sử dụng Object.keys
console.log(Object.keys(obj).length);
// 3

Kiểm tra tính tồn tại của key

Để kiểm tra xem một key tồn tại trong Map hay chưa, bạn có thể dùng phương thức

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

4.

const map = new Map([
  ["a", 1],
  ["b", 2],
]);
console.log(map.has("a")); // true
console.log(map.has("c")); // false

Đối với Object, bạn sử dụng gián tiếp thông qua phương thức

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

2 như trên.

const obj = { a: 1, b: 2 };
const hasKey = (obj, key) => Object.keys(obj).indexOf(key) !== -1;
console.log(hasKey(obj, "a")); // true
console.log(hasKey(obj, "c")); // false

Trong đó,

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

6 là hàm tự định nghĩa. Và bạn thấy là

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

7 trả về một mảng chứa các key của

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

8.

Tiếp theo, mình sử dụng phương thức arr.indexOf() để kiểm tra xem key đã tồn tại trong mảng hay chưa.

Phương thức

const fun = function () {};
const map = new Map();
map.set(NaN, 1).set(1, 2).set("a", 3).set([2], 4).set({ x: 3 }, 5).set(fun, 6);
// Map(7) {
//  NaN => 1, 1 => 2, "a" => 3, [2] => 4, {x:3} => 5, function() {} => 6
// }

9 trả về giá trị index đầu tiên thoả mãn, ngược lại thì trả về

const map = new Map();
map.set("xyz", 1);
map.set("b", 2);
map.set("1", 4);
for (const key of map.keys()) {
  console.log(key);
}
/*
xyz
b
1
 */
`

0\. Nói cách khác, nếu index tìm được mà khác 

• xyz
• b
• 1

  */

  `

0 thì key đang tìm tồn tại trong Object.

Duyệt qua các phần tử

Bạn có thể duyệt qua các phần tử của Map (để lấy

const map = new Map();
map.set("xyz", 1);
map.set("b", 2);
map.set("1", 4);
for (const key of map.keys()) {
  console.log(key);
}
/*
xyz
b
1
 */
`

2, 

• xyz
• b
• 1

  */

  `

3 hoặc

const map = new Map();
map.set("xyz", 1);
map.set("b", 2);
map.set("1", 4);
for (const key of map.keys()) {
  console.log(key);
}
/*
xyz
b
1
 */
`

một cách trực tiếp thông qua 

• xyz
• b
• 1

  */

  `

5.

const map = new Map([
  ["a", 1],
  ["b", 2],
]);
// duyệt các keys
for (const key of map.keys()) {
  console.log(key);
}
/*
a
b
 /
// duyệt các values
for (const value of map.values()) {
  console.log(value);
}
/
1
2
 /
// duyệt các cặp [key, value]
for (const [key, value] of map) {
  console.log(key, value);
}
/
a 1
b 2
 */
`

Với Object, bạn chỉ có thể duyệt qua các 

• xyz
• b
• 1

  */

  `

2, sau đó lấy

const map = new Map();
map.set("xyz", 1);
map.set("b", 2);
map.set("1", 4);
for (const key of map.keys()) {
  console.log(key);
}
/*
xyz
b
1
 */
`

3 thông qua 

• xyz
• b
• 1

  */

  `

2 (vì object mặc định không phải iterable nên không dùng được với

const map = new Map();
map.set("xyz", 1);
map.set("b", 2);
map.set("1", 4);
for (const key of map.keys()) {
  console.log(key);
}
/*
xyz
b
1
 */
`

5).

• a 1
• b 2

  */

  `

Lời kết

Như vậy là mình đã so sánh Map với Object. Qua đây, mình thấy rằng Map đúng là rất phù hợp với các yêu cầu liên quan đến lưu trữ dữ liệu.

Vì nó hỗ trợ sẵn các phương thức liên quan đến việc thêm, sửa, xoá dữ liệu dựa theo key. Còn đối với các yêu cầu khác thì mình vẫn phải/nên sử dụng Object.

Các bạn thấy Map và Object giống và khác nhau ở những điểm nào nữa không? Nếu biết thì chia sẻ trong phần bình luận nhé!

Tham khảo:

• Map - JavaScript
• Object - JavaScript
• Out Of Order Keys in ES6 Objects

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé: