Nếu bạn đã từng đọc sách và báo, bạn có thể hiểu được sự khác biệt giữa mảng (arrays) và đối tượng (objects) trong JavaScript.
Khi mới bắt đầu với JavaScript, bạn rất dễ bị nhầm về việc lựa chọn cách tốt nhất để sắp xếp và lưu trữ dữ liệu.
Ở một mức độ nào đó, có lẽ bạn đã quen với mảng từ khi bắt đầu học về vòng lặp “for”. Tuy nhiên, khi có quá nhiều dữ liệu được đưa vào mảng, bạn sẽ phải đối mặt với một mớ hỗn độn khó có thể theo dõi và hiểu khi xem lại code của chính mình.
Việc lựa chọn giữa mảng và đối tượng sẽ trở nên dễ dàng hơn nhiều khi bạn nhanh chóng xác định mục tiêu của từng loại. Mảng gần giống với cách cuốn sách lưu trữ thông tin, trong khi đối tượng tương tự một tờ báo lưu trữ thông tin. Hãy cùng Quản Trị Mạng xem xét từng loại trong bài viết này nhé!
Mảng (Arrays): Thứ tự dữ liệu là quan trọng nhất.
Dưới đây là từng chương của một cuốn truyện ngắn trình bày theo dạng mảng.
var book = ['foreword', 'boyWhoLived', 'vanishingGlass', 'lettersFromNoOne', 'afterword'];
Cuốn truyện của chúng ta gồm 3 chương đầu tiên trong cuốn Harry Potter. Mảng này hiển thị theo dạng hình ảnh.
Bạn muốn sử dụng mảng khi thứ tự là điều quan trọng nhất trong việc sắp xếp dữ liệu thông tin. Tôi hy vọng không có ai đọc tiêu đề chương trong cuốn truyện Harry Potter và nghĩ: "Hmmm, phần này trông có vẻ hay đấy, hãy bỏ qua đoạn trước và đọc đoạn này!". Thứ tự các chương trong truyện thông báo cho bạn nên đọc cái nào trước, cái nào sau.
Khi lấy thông tin từ một mảng, bạn sử dụng index của từng thành phần trong mảng. Mảng trong JavaScript là 0-indexed, nghĩa là các phần tử trong mảng được đánh dấu từ 0 thay vì 1.
Điều đó có nghĩa là khi bạn muốn lấy dữ liệu ở index 0 của cuốn sách, bạn nên sử dụng câu lệnh:
book[0]
Kết quả trả về:
‘foreword’
Nếu muốn lấy tên chương thứ ba trong cuốn truyện, bạn sử dụng:
book[2]
Bạn chọn chương nào để đọc dựa theo thứ tự sắp xếp trong mục lục, chứ không dựa vào tiêu đề của chương.
Đối Tượng (Objects): Tiêu đề thông tin (Data Label) là quan trọng nhất.
Dưới đây là một tờ báo trình bày theo dạng đối tượng:
var newspaper= {
sports: 'ARod Hits Home Run',
business: 'GE Stock Dips Again',
movies: 'Superman Is A Flop'
}
Đây cùng là một dữ liệu nhưng tờ báo được trình bày ở dạng hình ảnh:
Đối tượng (objects) phù hợp với dữ liệu được sắp xếp dựa theo tiêu đề. Khi đọc một tờ báo, bạn thường không đọc lần lượt từ trang đầu đến trang cuối. Bạn dễ dàng nhảy giữa các phần hay chuyển đến một vài phần nhất định mà bạn quan tâm. Không quan trọng mục đấy nằm ở đâu, người đọc nhanh chóng lật được phần này và đọc thông tin cần thiết. Đây là sự khác biệt giữa một tờ báo và cuốn truyện, mạch truyện và thứ tự các chương rất quan trọng.
Đối tượng lưu trữ thông tin theo từng cặp thuộc tính/ giá trị (key/value pairs).
key: value
Nếu muốn lật xem thông tin trong mục Business của tờ báo trên, bạn sẽ sử dụng thuộc tính là "business" để xem giá trị:
newspaper[‘business’]
hoặc
newspaper.business
Câu lệnh trên trả về cho ta thông tin giá trị chứa trong thuộc tính này ''GE Stock Díps Again”. Vì vậy, cách lấy dữ liệu dễ nhất là dựa vào tiêu đề (hay thuộc tính), bạn nên lưu dữ liệu theo dạng đối tượng.
Kết hợp mảng và đối tượng
Ở phần trước, chúng ta nói về việc lưu thông tin trong mảng hoặc đối tượng. Ngoài ra, bạn cũng có thể lưu trữ các loại dữ liệu cơ bản khác như số và các đối tượng booleans theo các cách dưới đây:
- Mảng trong đối tượng;
- Đối tượng trong mảng;
- Mảng trong mảng;
- Đối tượng trong đối tượng;
Việc này có thể trở nên hơi phức tạp. Tuy nhiên, gần như chắc chắn bạn sẽ cần sự kết hợp này để lưu dữ liệu nhằm giúp ích cho việc mở rộng dữ liệu sau này. Chắc chắn bạn sẽ muốn lưu trữ theo cách mà chính bạn có thể hiểu được đoạn code của mình vào một tuần sau đó.
Hãy xem lại ví dụ về cuốn truyện lúc trước. Ví dụ nếu chúng ta cần lưu số trang của từng chương. Chúng ta có thể lưu theo các cách dưới đây:
var book =[
[‘foreword’, 14],
[‘boywholived’, 18]
]
var book = [
{name:'foreword', pageCount: 14},
{name:'boyWhoLived', pageCount: 18},
{name:'vanishingGlass', pageCount: 13},
{name:'lettersFromNoOne', pageCount: 17},
{name:'afterword', pageCount: 19}
];
Chúng tôi đã duy trì thứ tự của các chương và giờ chúng tôi có khả năng đặt tên đặc tính cụ thể của từng chương. Do vậy, nếu muốn biết số trang của chương thứ hai, chúng ta có thể sử dụng:
book[1][‘pageCount’]
Kết quả trả về giá trị 18.
Bây giờ hãy nói rằng bạn muốn xem bảng xếp hạng các nhà văn hàng đầu cho từng phần trong tờ báo, dựa theo thời gian làm việc. Bạn có thể thể hiện điều đó trong một mảng được dùng trong đối tượng tờ báo như:
var newspaper= {
sports: 'ARod Hits Home Run',
sportsWriters: ['Miramon Nuevo', 'Rick Reilly', 'Woddy Paige'], //nhà báo mục thể thao
business: 'GE Stock Dips Again',
businessWriters: ['Adam Smith', 'Albert Humphrey', 'Charles Handy'],
movies: 'Superman Is A Flop',
moviesWriters: ['Rogert Ebert', 'Andrew Sarris', 'Wesley Morris']
}
Mảng là lựa chọn thích hợp để lưu tên các nhà báo vì ta cần sắp xếp theo thứ tự (kinh nghiệm làm việc). Nhìn vào bạn có thể hiểu rằng nhà báo đứng trước có kinh nghiệm làm việc lâu năm hơn nhà báo phía sau trong mỗi mảng. Nhà báo được sắp xếp từ index 0 là nhà báo lâu năm nhất.
Ngoài ra, bạn cũng có thể tối ưu tờ báo ở trên bằng cách tạo đối tượng bên trong đối tượng tờ báo. Ví dụ, thuộc tính "sports" lúc này có giá trị là một đối tượng, bên trong đối tượng "sports" có hai thuộc tính "title" lưu đầu đề của "sports" và thuộc tính "writers" lưu mảng chứa các nhà báo của mục "sports".
Dưới đây là một vài thử thách nhỏ dành cho bạn:
- Giả sử ứng dụng web của bạn có phần đố vui, nơi người dùng điền vào một số câu hỏi và sau đó nhận được điểm sau khi hoàn thành. Bạn muốn lưu tất cả câu trả lời của người dùng để sau đó kiểm tra lại chúng một cách hiệu quả. Bạn sẽ sử dụng cấu trúc nào để lưu trữ tất cả câu trả lời của người dùng trước khi kiểm tra? Tại sao?
- Giả sử người dùng tạo hồ sơ mới trên trang của bạn với tên riêng, họ, email và mật khẩu. Bạn muốn lưu trữ thông tin này lại trước khi gửi về backend. Cấu trúc nào bạn sẽ dùng để lưu trữ tất cả thông tin của người dùng mới? Tại sao?
- Giả sử bạn đang xây dựng trang diễn đàn, nơi bạn cần xếp hạng nhận xét dựa trên số phiếu bầu (lượt votes). Cấu trúc dữ liệu nào phù hợp nếu bạn cần theo dõi nội dung nhận xét và số lượng votes của từng nhận xét? Gợi ý: kết hợp 2 dạng.
Tác giả: Kevin Kononenko
Tham khảo thêm một số bài viết:
Chúc các bạn vui vẻ!
Source: https://quantrimang.com/cong-nghe/mang-va-doi-tuong-trong-javascript-giong-nhu-cuon-truyen-va-to-bao-146054