title

 

Mảng và Đối Tượng trong JavaScript giống như Sách và Báo

Bạn có thể hiểu được sự khác biệt giữa mảng và đối tượng trong JavaScript, nếu như bạn đã từng xem qua sách và báo.

Những người mới học JavaScript sẽ gặp nhiều khó khăn trong việc tìm ra cách tốt nhất để sắp xếp và lưu trữ dữ liệu.

Chắc bạn đã từng làm quen với mảng thông qua việc học vòng lặp “for”. Tuy nhiên, sai lầm của những người mới học là họ thường nghĩ đưa càng nhiều dữ liệu vào mảng càng tốt. Việc này sẽ tạo nên một mớ hỗn độn gây rất nhiều khó khăn trong việc sửa và xem lại code của mình.

Việc lựa chọn mảng hay đối tượng sẽ trở nên dễ dàng hơn khi bạn có thể xác định được mục đích của mỗi cấu trúc. Cách lưu trữ thông tin của mảng tương tự như sách còn của đối tượng giống như báo.

Giờ hãy tìm hiểu kỹ hơn về điều này nào!

 

Mảng: Thứ Tự Dữ Liệu là Quan Trọng Nhất

Dưới đây là các phần của một cuốn sách rất ngắn ở dạng mảng.

var book = ['foreword', 'boyWhoLived', 'vanishingGlass', 'lettersFromNoOne', 'afterword']; 

 

Đó là 3 chương đầu của cuốn sách Harry Potter tập một. Dưới đây là mảng ở dạng trực quan.

 

Bạn sẽ muốn sử dụng mảng khi thứ tự là yếu tố quan trọng nhất để sắp xếp thông tin. Không ai nhìn vào các tiêu đề chương của cuốn sách Harry Potter mà lại thốt lên rằng: “Hmmm, chương này có vẻ thú vị đây, hãy đọc nó ngay nào!” Thứ tự của các chương cho bạn biết bạn sẽ đọc chương nào tiếp theo.

Khi bạn lấy thông tin từ mảng, bạn sẽ sử dụng chỉ mục của mỗi phần tử. Mảng được lập chỉ mục 0, nghĩa là mảng này bắt đầu đếm từ 0 chứ không phải 1.

Điều này có nghĩa là nếu bạn muốn truy cập chỉ mục 0 của mảng books, bạn sẽ sử dụng:

book[0];

 

Và kết quả trả về là:

'foreword'

 

Nếu bạn muốn tìm ra tên chương thứ ba của cuốn sách, bạn sẽ sử dụng:

books[2];

 

Bạn chọn đọc chương tiếp theo dựa trên thứ tự chương trong cuốn sách chứ không dựa trên tiêu đề của chương.

 

Đối Tượng: Tên Dữ Liệu là Quan Trọng Nhất

Đây là cách tờ báo hiển thị dưới dạng một đối tượng.

var newspaper= {
  sports: 'ARod Hits Home Run',
  business: 'GE Stock Dips Again',
  movies: 'Superman Is A Flop'
}

 

Dưới đây là đối tượng newspaper hiện thị ở dạng trực quan.

 

Sử dụng đối tượng là cách tốt nhất khi bạn muốn sắp xếp dựa trên tên của dữ liệu. Khi bạn đọc một tờ báo, bạn có thể sẽ không đọc lần lượt từng mặt hay từng trang một, mà bạn sẽ đọc bất kỳ phần nào bạn thích dựa trên tiêu đề tên của phần đó. Không vấn đề gì, miễn là phần đó nằm trong tờ báo thì bạn có thể đọc và hiểu nó ngay lập tức. Ngược lại, vị trí của các chương/phần lại rất quan trọng đối với những quyển sách.

Đối tượng sắp xếp thông tin thông qua các cặp từ khóa/giá trị. Cú pháp như sau:

key: value

 

Nếu bạn muốn truy cập phần Business của tờ báo, bạn sẽ sử dụng cú pháp sau:

newspaper[‘business’]

 

Hoặc:

newspaper.business

 

Cách này sẽ trả về giá trị là ‘GE Stock Dips Again’. Cách dễ nhất để truy cập dữ liệu dựa trên một tên (từ khóa) là lưu trữ nó trong một đối tượng.

 

Kết hợp Đối Tượng và Mảng

Hiện nay, mảng và đối tượng đã có thể lưu trữ được các loại dữ liệu cơ bản như chuỗi, số hoặc booleans. Mở rộng hơn thì bạn có thể lưu trữ:

  1. Mảng trong các đối tượng
  2. Các đối tượng trong mảng.
  3. Mảng trong mảng
  4. Đối tượng trong đối tượng

Điều này sẽ làm cho chương trình trở nên phức tạp hơn. Tuy nhiên, bạn cần sự kết hợp của cả hai để lưu trữ dữ liệu nếu bạn muốn cải tiến chương trình về sau. Bạn muốn hiểu code của mình khi bạn xem lại nó vào một tuần sau đó.

Hãy xem lại ví dụ về cuốn sách. Điều gì sẽ xảy ra nếu ta muốn lưu trữ số trang trong mỗi chương? Lựa chọn tốt nhất là thêm vào mảng books các đối tượng như sau:

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}
]; 

 

Ta vẫn duy trì thứ tự của các chương, và bây giờ ta còn có thể đặt tên các thuộc tính cụ thể cho từng chương. Vì vậy, nếu chúng ta muốn biết số trang của chương thứ hai, chúng ta sẽ sử dụng:

book[1][‘pageCount’]

 

Giá trị trả về là 18.

Nếu bạn muốn xem một bảng xếp hạng các nhà báo hàng đầu ở mỗi lĩnh vực trong một tờ báo địa phương và sắp xếp theo thâm niên của họ. Bạn có thể thêm một mảng vào trong đối tượng newspaper như sau:

var newspaper= {
  sports: 'ARod Hits Home Run',
  sportsWriters: ['Miramon Nuevo', 'Rick Reilly', 'Woddy Paige'],
  business: 'GE Stock Dips Again',
  businessWriters: ['Adam Smith', 'Albert Humphrey', 'Charles Handy'],
  movies: 'Superman Is A Flop',
  moviesWriters: ['Rogert Ebert', 'Andrew Sarris', 'Wesley Morris']
}

 

Lưu trữ thông tin của nhà báo trong mảng là cách tốt nhất bởi vì thứ tự xếp hạng nhà báo là quan trọng. Nhìn vào mỗi mảng bạn có thể biết nhà báo đứng trước được xếp hạng cao hơn nhà báo đứng sau trong mỗi lĩnh vực. Nhà báo ở chỉ số 0 là nhà báo đứng đầu.

Theo cách khác, bạn cũng có thể tối ưu hóa đối tượng này bằng cách tạo thêm một đối tượng con bên trong đối tượng newspaper. Ví dụ, một đối tượng sports với một tiêu đề và danh sách các nhà báo trong lĩnh vực đó.

 

Một vài thử thách nhỏ dành cho bạn

  1. Giả sử ứng dụng web của bạn có phần bài kiểm tra, nơi người dùng trả lời một số câu hỏi và sau đó nhận điểm ở cuối bài. Bạn muốn lưu trữ câu trả lời của người dùng để sau đó kiểm tra kết quả ở cuối. 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 bạn kiểm tra? Tại sao?
  2. Giả sử bạn cho phép người dùng tạo hồ sơ mới trên trang web của bạn với tên, họ, email và mật khẩu. Bạn muốn lưu trữ dữ liệu đó trước khi gửi nó đến back-end. Bạn sẽ sử dụng cấu trúc nào để lưu trữ tất cả thông tin của người dùng mới? Tại sao?
  3. Giả sử bạn đang xây dựng trang web diễn đàn, nơi bạn cần xếp hạng nhận xét dựa trên số đánh giá. Bạn sẽ sử dụng cấu trúc nào để lưu trữ cả nhận xét và số đánh giá. Gợi ý: combo của hai loại nào đó bạn đã biết.

Bởi Ngô Trung Nhất