JavaScript: Đối tượng Array
Một mảng là một tập hợp của các phần tử chứa các giá trị theo một chủ đề nào đó, ví dụ như mảng màu, mảng ảnh. Mỗi phần tử của mảng được truy cập thông qua chỉ số của phần tử đó, chỉ số này nằm trong cặp ngoặc vuông. Chỉ số còn được gọi là subscript. có hai kiểu chỉ số áp dụng được cho mảng trong JavaScript là chỉ số dang số nguyên không âm và chỉ số dạng chuỗi. Mảng với các chỉ số ở dạng chuỗi được gọi là mảng liên quan. Trong JavaScript thì mảng là đối tượng được xây dựng sẵn và có sẵn các thuộc tính và phương thức để thao tác mảng. Lưu ý là một biến thông thường trong JavaScript cũng có thể trở thành mảng, ở những ví dụ trong các bài viết sau sẽ minh họa điều này.
Mảng đa chiều không được JavaScript hỗ trợ.
Khai báo một mảng
Giống như biến thì mảng phải được khai báo trước khi sử dụng. Từ khóa new sẽ được dùng để tạo một đối tượng Array động. Từ khóa new sẽ gọi tới hàm tạo Array() của đối tượng Array. Kích thước của mảng có thể được truyền dưới dạng đối số tới hàm tạo (điều này không cần thiết). Các giá trị cũng có thể được gán cho mảng khi nó đã được tạo, tất nhiên điều này không bắt buộc.
Ví dụ dưới đây tạo một mảng có tên array_name và không khởi tạo kích thước.
var array_name = new Array();
Ở ví dụ sau sẽ tạo một mảng có kích thước là 100 phần tử.
var array_name = new Array(100);
Còn ví dụ này tạo một mảng trong đó các phần tử được khởi các giá trị:
var array_name = new Array("red", "green", "yellow", 1 ,2, 3);
Nhắc lại rằng mặc dù bạn có thể xác định kích thước mảng khi khai báo nó, nhưng điều này không bắt buộc. JavaScript sẽ cấp phát vùng nhớ khi cần thiết để cho phép mảng tăng giảm kích thước một cách động và lúc này mỗi phần tử mảng sẽ được gán một giá trị mặc định nào đó. JavaScript cho phép mỗi phần tử mảng có thể lưu trữ bất kỳ giá trị có kiểu gì.
Sử dụng hàm tạo
Dưới đây là một ví dụ thể hiện việc tạo một mảng mới thông qua hàm tạo.
<html>
<head><title>The Array Object</title>
<h2>An Array of Books</h2>
<script language="JavaScript">
1 var book = new Array(6); // Tạo một đối tượng mảng
2 book[0] = "War and Peace"; // Gán giá trị cho các phần tử
book[1] = "Huckleberry Finn";
book[2] = "The Return of the Native";
book[3] = "A Christmas Carol";
book[4] = "The Yearling";
book[5] = "Exodus";
</script>
</head>
<body bgcolor="lightblue">
<script language="JavaScript">
document.write("<h3>");
3 for(var i in book){
4 document.write("book[" + i + "] "+ book[i] + "<br>");
}
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo một mảng tên book chứa 6 phần tử.
2. Phần tử đầu tiên có chỉ số 0 và được một chuỗi.
3. Vòng lặp for-in dùng để lấy chỉ số của từng phần tử mảng.
4. Hiển thị giá trị của từng phần tử mảng ra trình duyệt.
Gán giá trị dùng vòng lặp for
Để thao tác với một mảng thì vòng lặp for được coi là tiện nhất, từ việc khởi tạo mảng đến truy xuất mảng thì vòng lặp for đều thực hiện được. Ví dụ:
<html><head><title>The Array Object</title><body>
<body>
<h2>An Array of Numbers</h2>
<script language="JavaScript">
1 var years = new Array(10);
2 for(var i=0; i < years.length; i++ ){
3 years[i]=i + 2000;
4 document.write("years[" + i + "] = "+ years[i] + "<br>");
}
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo một mảng tên years gồm 10 phần tử.
2. Sử dụng vòng lặp for để thao tác với mảng.
3. Gán giá trị cho mỗi phần tử mảng.
4. Hiển thị ra trình duyệt.
Tạo đồng thời gán giá trị cho mảng
Ví dụ dưới đây minh họa cách tạo đồng thời gán giá trị cho các phần tử mảng thông qua hàm tạo Array().
<html><head><title>The Array Object</title></head>
<body>
<h2>An Array of Colored Strings</h2>
<script language="JavaScript">
1 var colors = new Array("red", "green", "blue", "purple");
2 for(var i in colors){
3 document.write("<font color='"+colors[i]+"'>");
4 document.write("colors[" + i + "] = "+ colors[i]
+ "<br>");
}
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo mảng tên colors đồng thời gán các giá trị cho các phần tử mảng.
2. Dùng vòng lặp for-in để lấy từng chỉ số của mảng.
3. Tạo thẻ mở <font> với thuộc tính color được gán giá trị màu của phần tử tương ứng.
4. HIển thị giá trị màu tương ứng.
Mảng liên kết
Đây là loại mảng trong đó chỉ số của mỗi phần tử mảng không phải là một số mà là một chuỗi. Có một mỗi liên kết giữa chỉ số của mảng với giá trị lưu trữ tương ứng, trong đó chỉ số thường được gọi là key giá trị phần tử gọi là value. Các cặp key/value là cách thức phổ biến để lưu trữ và truy cập dữ liệu. Ví dụ dưới đây tạo một mảng có tên states và có mối liên hệ giữa chỉ số và giá trị của từng phần tử mảng, ví dụ như CA/California. Trong trường hợp này thì ta sẽ sử dụng vòng lặp for-in thao tác với mảng liên hợp.
<html><head><title>Associative Arrays</title></head>
<body>
<h2>An Array Indexed by Strings</h2>
<script language="JavaScript">
1 var states = new Array();
2 states["CA"] = "California";
states["ME"] = "Maine";
states["MT"] = "Montana";
3 for( var i in states ){
document.write("The index is:<em> "+ i );
document.write(".</em> The value is: <em>" + states[i]
+ ".</em><br>");
}
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo một mảng tên states.
2. Thiết lập các cặp key/value.
3. Dùng vòng lặp for-in để thao tác mảng.
Do mỗi mảng là một đối tượng trong JavaScript nên mảng được quyền sử dụng những thuộc tính và phương thức của đối tượng Array.
Các thuộc tính của mảng
Mỗi một đối tượng Array sẽ có ba thuộc tính như được thể hiện ở dưới đây, trong đó thuộc tính được sử dụng phổ biến nhất là length dùng để xác định kích thước mảng.
|
Thuộc tính |
Mô tả |
|---|---|
|
constructor |
Tham chiếu tới hàm tạo của đối tượng. |
|
length |
Dùng để lấy kích thước mảng. |
|
prototype |
Mở rộng định nghĩa mảng bằng cách thêm các thuộc tính và phương thức. |
Ví dụ
<html>
<head>
<title>Array Properties</title>
<h2>Array Properties</h2>
<script language="JavaScript">
1 var book = new Array(6); // Create an Array object
book[0] = "War and Peace"; // Assign values to elements
book[1] = "Huckleberry Finn";
book[2] = "The Return of the Native";
book[3] = "A Christmas Carol";
book[4] = "The Yearling";
book[5] = "Exodus";
</script>
</head>
<body bgcolor="lightblue">
<script language="JavaScript">
document.write("<h3>");
2 document.write("The book array has " + book.length + " elements<br>");
</script>
</body>
</html>
Hiển thị ngoài trình duyệt:
The book array has 6 elements.
Các phương thức của mảng
Bảng dưới đây trình bày các phương thức của đối tượng Array, các phương thức của mảng giúp ta dễ dàng hơn trong việc thao tác mảng.
|
Phương thức |
Mô tả |
|---|---|
|
concat() |
Ghép các phần tử của hai mảng |
|
join() |
Nối các phần tử mảng thành một chuỗi |
|
pop() |
Xóa phần tử cuối của mảng |
|
push() |
Thêm các phần tử mới vào cuối mảng |
|
reverse() |
Đảo ngược trật tự mảng |
|
shift() |
Xóa phần tử đầu của mảng |
|
slice() |
Tạo một mảng mới tử các phần tử của mảng hiện thời |
|
sort() |
Sắp xếp mảng theo trật tự tăng dần của bảng chữ cái hoặc theo số |
|
splice() |
Xóa và/hoặc thay thế các phần tử của mảng |
|
toLocaleString() |
Trả về một chuỗi thể hiện mảng ở dạng local |
|
toString() |
Trả về một chuỗi thể hiện mảng |
|
unshift() |
Thêm các phần tử vào đầu mảng |
Phương thức concat()
Phương thức này dùng để ghép các phần tử của hai hay nhiều mảng lại với nhau và trả về một mảng chứa tất cả các phần tử sau khi ghép.
Cú pháp
var mảng_mới = mảng1.concat(các_phần_tử, mảng2, mảng 3, ...);
Ví dụ:
<html>
<head><title>Array concat() methods</title>
</head>
<body>
<script language="JavaScript">
1 var names1=new Array("Dan", "Liz", "Jody" );
2 var names2=new Array("Tom", "Suzanne");
document.write("<b>First array: "+ names1 + "<br>");
document.write("<b>Second array: "+ names2 + "<br>");
document.write("<b>After the concatenation <br>");
3 names1 = names1.concat( names2);
document.write(names1);
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo mảng tên names1.
2. Tạo mảng tên names2.
3. Ghép hai mảng name1 và name2 lại rồi gán cho mảng name1.
Phương thức pop()
pop() dùng để xóa phần tử cuối của mảng và trả về giá trị của phần tử bị xoa đó.
Cú pháp
var return_value=Arrayname.pop();
Ví dụ:
<html>
<head><title>Array pop() method</title>
</head>
<body>
<script language="JavaScript">
1 var names=new Array("Tom", "Dan", "Liz", "Jody");
2 document.write("<b>Original array: "+ names +"<br>");
3 var newstring=names.pop(); // Pop off last element of array
4 document.write("Element popped: "+ newstring);
5 document.write("<br>New array: "+ names + "</b>");
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo mảng có tên names và khởi tạo giá trị cho các phần tử (4 phần tử).
2. Hiển thị mảng ban đầu.
3. Xóa phần tử cuối và lưu nó vào biến newstring.
4. Hiển thị giá trị của phần tử cuối.
5. Hiển thị mảng sau khi xóa.
Phương thức push()
push() dùng để thêm các phần tử vào cuối mảng. JavaScript sẽ cấp phát vùng nhớ cho mảng để đảm bảo thực hiện được thao tác của phương thức này.
Cú pháp
Arrayname.push(các phần tử lớp);
Ví dụ:
<html>
<head><title>Array push() method</title>
</head>
<body>
<script language="JavaScript">
1 var names=new Array("Tom", "Dan", "Liz", "Jody");
2 document.write("<b>Original array: "+ names + "<br>");
3 names.push("Daniel","Christian");
4 document.write("New array: "+ names + "</b>");
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo mảng có tên names.
2. Hiển thị mảng gốc.
3. Thêm các phần tử cho mảng.
4. Hiển thị mảng sau khi thêm.
shift() và unshift()
Phương thức shift() dùng để xóa phần tử đầu tiên của mảng va trả về giá trị của phần tử bị xóa, còn phương thức unshift() sẽ thêm các phần tử vào đầu mảng. Hai phương thức này giống với hai phương thức pop() và push(), khác ở chỗ là chúng thao tác ở đầu mảng.
Cú pháp
var return_value=Arrayname.shift();
Arrayname.shift(các phần tử mới);
Ví dụ:
<html>
<head><title>Array shift() and unshift() methods</title>
</head>
<body>
<script language="JavaScript">
1 var names=new Array("Dan", "Liz", "Jody" );
document.write("<b>Original array: "+ names + "<br>");
2 names.shift();
document.write("New array after the shift: " + names);
3 names.unshift("Nicky","Lucy");
// Add new elements to the beginning of the array
document.write("<br>New array after the unshift: " + names);
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo mảng tên names.
2. Xóa phần tử đầu tiên của mảng.
3. Thêm vào đầu mảng hai phần tử mới.
Phương thức slice()
slice() dùng để copy các phần tử của một mảng vào mảng mới. Phương thức này có hai đối số, đối số thứ nhất là chỉ số của phần tử nơi bắt đầu copy, đối số thứ hai là chỉ số của phần tử mà slice() sẽ copy đến. Lưu ý là mảng gốc không hề bị thay đổi sau khi copy trừ khi bạn gán kết quả copy ngược trở lại mảng gốc.
Cú pháp
var newArray = Arrayname.slice(first element, last element);
Ví dụ:
<html>
<head><title>Array slice() method</title>
</head>
<body>
<script language="JavaScript">
1 var names=new Array("Dan", "Liz", "Jody", "Christian",
"William");
document.write("<b>Original array: "+ names + "<br>");
2 var sliceArray=names.slice(2, 4);
document.write("New array after the slice: ");
3 document.write(sliceArray);
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo mảng tên names.
2. Copy các phần tử từ chỉ số 2 đến 4 của mảng names rồi gán cho mảng sliceArray.
3. In ra mảng sliceArray.
Phương thức splice()
splice() dùng để xóa các phần tử bắt đầu từ vị trí chỉ số được chỉ ra và cho phép thay thế bằng các phần tử mới.
Cú pháp
Arrayname.splice(vị trí chỉ số, số lượng phần tử muốn xóa);
Hoặc:
Arrayname.splice(vị trí chỉ số, số lượng phần tử muốn xóa, các phần tử thay thế);
Ví dụ:
<html>
<head><title>Array splice() method</title>
</head>
<body>
<script language="JavaScript">
// splice(starting_pos, number_to_delete, new_values)
1 var names=new Array("Tom","Dan", "Liz", "Jody");
document.write("<b>Original array: "+ names + "<br>");
2 names.splice(1, 2, "Peter","Paul","Mary");
3 document.write("New array: "+ names + "</b>");
</script>
</body>
</html>
GIẢI THÍCH
1. Tạo mảng tên names và khởi tạo các giá trị cho các phần tử mảng.
2. Xóa 2 phần tử bắt đầu từ vị trí chỉ số 1 và thay thế bằng ba phần tử mới.
3. Hiển thị mảng sau khi thao tác.