tclt

Array trong Javascript

Có lẽ các bạn đã quen thuộc với Javascript qua loạt bài Javascript và lập trình hướng đối tượng. Bài viết này tác giả Nguyễn Hiển sẽ giới thiệu một đối tượng quan trọng trong Javascript: Array.

Array có mặt trong hầu hết các ngôn ngữ lập trình, là một cấu trúc dữ liệu cho phép lưu trữ và truy xuất các phần tử ngẫu nhiên dựa trên vị trí. Trong Javascript, Array có gì khác?

Một lớp

Và do đó, chúng ta có thể tạo một đối tượng Array để lưu trữ các phần tử. Có 2 cách thường dùng để khởi tạo 1 đối tượng Array:

var arr = new Array("Bob", "Jobs", "Bill");

hoặc:

var arr = ["Bob", "Jobs", "Bill"];

sẽ khởi tạo 1 đối tượng mảng arr chứa các phần tử “Bob”, “Jobs” “Bill”.

No-type

Như bạn đã biết, trong Javascript, nói chung các biến không cần chỉ định rõ kiểu. Do đó, chúng ta có thể chứa những phần tử có kiểu khác nhau trong cùng 1 mảng như:

var arr = new Array("Bobs", "has", "$", 1000);

Điều này rất khác so với những ngôn ngữ như C++, Java… khi khai báo mảng với int arr[10]; sẽ giới hạn mảng arr chỉ chứa các số kiểu int.

Mutable

Điều gì xảy ra nếu chúng ta thực hiện đoạn mã sau?

var arr = new Array(3);
for (i = 0; i < 10; i++) {
     arr[i] = i;
}

Sẽ chẳng có lỗi OutOfRange nào như chúng ta mong đợi. Đơn giản vì Javascript tự điều chỉnh kích thước của mảng cho phù hợp, hay khả năng “co giãn”, còn gọi là mutable. Có lẽ Array mang hình ảnh của List?

Và..

Ngoài việc lưu trữ những phần tử có kiểu khác nhau, đối tượng Array còn cho phép dùng nhiều kiểu dữ liệu khác nhau làm “key”.

Hãy thử đoạn mã sau:

var arr = new Array("Bob", "Jobs", "Bill");
arr[1] = 1;
arr['hello'] = "World";
for (i in arr) {
     document.write(i + ': ' + arr[i]);
}

Đến đây chắc bạn cũng nhận ra, đối tượng Array không giống như mảng thông thường, chỉ cho phép truy xuất qua chỉ số là số nguyên, mà còn cho phép truy xuất qua chỉ số là một đối tượng bất kỳ. Thực ra, Javascript lưu trữ các đối tượng dưới dạng key-value-based, tức là mỗi đối tượng key (khoá) sẽ tương ứng (ánh xạ) với một đối tượng value (giá trị) theo cặp. Cấu trúc dữ liệu nào lưu trữ dưới dạng key-value-based? Có lẽ là Map.

Ngoài ra..

Hãy để ý các phương thức có sẵn của đối tượng Array, có lẽ bạn sẽ ấn tượng với 2 phương thức hay được sử dụng nhất: pop()push().

Cấu trúc dữ liệu nào sở hữu những phương thức này? Stack và Queue. Vậy đối tuợng Array mang hình ảnh của Stack hay Queue? Cách kiểm chứng đơn giản nhất là dựa trên cơ chế của 2 kiểu cấu trúc dữ liệu này: Stack hoạt động theo phương thức LIFO (Last In First Out – Vào sau ra trước), Queue thì ngược lại LILO (Last In Last Out – Vào sau ra sau) (Có người thích gọi cơ chế hoạt động của Stack là: FILO và Queue là: FIFO). Hãy đưa một phần tử vào một Array đã có dữ liệu qua phương thức push(), tiếp đó, lấy phần tử trong Array qua phương thức pop(). Nếu hai phần tử này giống nhau, chắc chắn Array hoạt động theo phương thức LIFO tức là Stack, ngược lại Array hoạt động theo phương thức LILO hay Queue.

OK, hãy thử đoạn mã sau:

var arr = new Array("Bob", "Jobs", "Bill");
arr.push('new item');
item = arr.pop();
alert(item);

Chắc bạn đã có câu trả lời.

Tiếp theo…

Làm sao có thể biến cấu trúc dữ liệu của đối tượng Array từ Stack sang Queue và ngược lại? Hãy thử sức.

Gợi ý: Sử dụng phương thức reverse() cho phép đảo ngược các phần tử trong đối tượng Array hoặc phương thức shift() cho phép lấy ra khỏi mảng phần tử đứng đầu.

Lời kết

Giờ đây chắc bạn đã thấy sức mạnh của đối tượng Array trong Javascript, nó có thể biến đổi uyển chuyển giữa những cấu trúc dữ liệu phức tạp khác nhau như List, Map, Stack hay Queue.

Một thông tin đáng mừng là Javascript chỉ là một đại diện cho một lớp những scripting language (ngôn ngữ kịch bản, như PHP, Python…), trong đó đối tượng Array được sử dụng như cấu trúc dữ liệu chính và thể hiện rất nhiều hình ảnh khác nhau như trong Javascript.

Hãy tiếp tục tìm hiểu xem Array có thể mô tả cấu trúc dữ liệu nào khác và cùng update vào bài viết.

Nguyễn Hiển – FPT University

Xin cảm ơn tác giả đã cung cấp cho bạn đọc của TCLT một bài viết thú vị về Javascript.

7 comments on “Array trong Javascript

  1. Pingback: Javascript – Chàng hiệp sĩ toàn năng | Tạp chí Lập trình

  2. Toi cung muon hoc tap chut it va javascript de nang cao hieu biet va ung dung vao cong viec cua minh cho vui… Gia roi hoc hoi kho… Nhung truoc mat cam on cac ban rat nhieu…

  3. Pingback: Javascript – Chàng hiệp sĩ toàn năng | My Blog

  4. Pingback: Javascript – Chàng hiệp sĩ toàn năng | LvDuit Developer

  5. Pingback: Js chàng hiệp sĩ toàn năng | Blog Trần Quốc BN – Webmaster - Blog chuyên update về lĩnh vực IT cho các wedmaster

  6. Pingback: Blog Trần Quốc BN – Webmaster - Blog chuyên update về lĩnh vực IT cho các wedmaster

Leave a Reply

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