Giới thiệu tới các thành viên website serries bài học javascript từ trung tâm đào tạo Vietpro : Bài 13: Array trong Javascript

Chỉ cần sử dụng một vài thuộc tính và phương thức của đối tượng JavaScript phổ biến đã mở mắt của bạn với những điều tuyệt vời mà hướng đối tượng Lập trình khi [URL='http://hocthietkeweb.net.vn/khoa-hoc-lap-trinh-web-php-va-mysql.html']học php[/URL] cho phép bạn thực hiện với một vài dòng mã. Trong bài học này, bạn sẽ học cách sử dụng một đối tượng rất mạnh mẽ trong hầu hết các ngôn ngữ lập trình, gồm JavaScript của khóa học là gì: các đối tượng Array.

Đặc biệt, trong bài học này bạn sẽ học:

– những đối tượng Array là for;
– làm thế nào để tạo ra các mảng;
– làm thế nào để truy cập, sắp xếp, thêm và loại bỏ các dữ liệu bên trong một mảng.

Trong quá trình này, bạn sẽ tìm hiểu làm thế nào để sử dụng for … loop vòng lặp để truy cập dữ liệu bên trong một mảng.

1. Các đối tượng Array là gì?

Công việc của một đối tượng là lưu trữ và cho phép thao tác dễ dàng dữ liệu. Chúng tôi có thể nói rằng các đối tượng Array thực hiện cả hai nhiệm vụ tuyệt vời.

Từ quan điểm của lưu trữ dữ liệu, một mảng hoạt động giống như một biến. Trung tâm đào tạo học [URL='http://hocthietkeweb.net.vn/khoa-hoc-lap-trinh-game-android-co-ban.html']lập trình android[/URL] với đội ngũ giáo viên nhiệt tình, Sự khác biệt là bạn không giới hạn tới một phần dữ liệu, vì nó là trường hợp với các biến thông thường. Bạn có thể nhét một số mặt hàng cùng một lúc trong một mảng và lấy bất cứ gì bạn cần vào đúng thời điểm trong chương trình của bạn.

Hãy tưởng tượng nếu bạn đã có một nơi lưu trữ cho mỗi đôi vớ. Đây sẽ là một cơn ác mộng! Có một ngăn kéo để lưu trữ tất cả vớ của bạn ở một nơi có ý nghĩa nhiều hơn nữa. Ở khía cạnh này, mảng là một chút như ngăn kéo, nhưng mạnh mẽ hơn nhiều.

Từ điểm nhìn của các thao tác dữ liệu, đối tượng Array cung cấp một sự giàu có của các thuộc tính và phương pháp, một số trong đó bạn sẽ xem xét trong bài học này.

2. Làm thế nào để bạn tạo ra một đối tượng Array?

Bạn tạo một mảng trong 1 của 3 cách:

– sử dụng new Array()

Đây là phương pháp tiết nhất. Nó hoạt động như sau:
varcolors=newArray();
colors[0]="green";
colors[1]="red";
– Sử dụng new Array(item0, item1, item2,…)

varcolors=newArray("green","red");
– Sử dụng phương pháp đen

varcolors=["green","red"];
3 .Làm thế nào để truy cập dữ liệu trong đối tượng Array?

Mảng là tuyệt vời để lưu trữ nhiều giá trị chỉ sử dụng 1 biến. Tuy nhiên, họ sẽ không được như vậy tuyệt vời nếu bạn có thể không còn truy cập các giá trị đó một cách nhanh chóng và dễ dàng. Dưới đây là làm thế nào nó được thực hiện:
//"green" is at index position 0, "red" is at index position 1, etc.
vrcolors=["green","red","yellow","orange","blue"];
varred=colors[1];
document.write(red);
-Truy cập tất cả item trong mảng với một vòng lặp
//use the array from the previous example
varcolors=["green","red","yellow","orange","blue"];
//use a for loop to access each item in colors
//The array object has a length property
//that contains the size of the array: you can use it in the for loop
for(vari=0;i<colors.length;i++)
{
//You use the counter i to access the index position
document.write(colors+"<br />");
}
Lưu file và xem lại trên trình duyệt. Bạn nên xem màu hiển thị.

//use the array from the previous example
varcolors=["green","red","yellow","orange","blue"];
for(color incolors)
{
//color is the variable that marks the index position
document.write(colors[color]+"<br />");
}
Chạy các tài liệu HTML có chứa các đoạn mã trên bên trong thẻ <script> trong trình duyệt. Các chuyên nghiệp và [URL='http://hocthietkeweb.net.vn/khoa-hoc-photoshop-can-ban.html']học photoshop[/URL] cơ bản nâng cao tại VietPro! trang web nên nhìn giống như nó đã làm trong ví dụ trước.

Khi bạn truy cập một giá trị bên trong một mảng bạn chỉ đơn giản là có thể lấy nó, như bạn đã làm trong ví dụ trước, hoặc bạn có thể sửa đổi nó, như sau:

varcolors=["green","red","yellow","orange","blue"];
colors[2]="pink";
//Now you've replaced the item at index position 2,
//the third item called "yellow",
//with "pink"
document.write(colors);
//The code should print:
//green,red,pink,orange,blue ("pink" has replaced "yellow")
*) Có thể sắp xếp các mục mảng?
Bạn có thể làm công cụ tuyệt vời với các giá trị được lưu trữ bên trong một mảng. Ví dụ, bạn có thể sắp xếp các mục theo thứ tự abc, giảm dần hoặc tăng dần theo thứ tự, hoặc số lượng. Hãy xem cách này được thực hiện.

Bạn sắp xếp các phần tử mảng với một phương pháp tuyệt vời nhất một cách thích hợp được gọi là sort(). Dưới đây là trong hành động:
//sort the colors array alphabetically and ascending:
varcolors=["green","red","yellow","orange","blue"];
varascendingColors=colors.sort();
//display each value
document.write(ascendingColors);
//This should print:
//blue, green, orange, red, yellow
Nếu bạn muốn sắp xếp các giá trị số trong một mảng, hoặc là tăng dần hoặc giảm dần, bạn cần xây dựng một chức năng tùy chỉnh đơn giản và thông qua chức năng này như là đối số để phương pháp sort(). Nghe có vẻ hơi khó hơn nó thực sự là. Dưới đây là làm thế nào nó được thực hiện:

//build a new array containing number values
varmyNumbers=[4,2,10,6,9];
//build your custom function: this is a simple formula
functionsortAscending(a,b)
{
//the formula return a - b sorts the numbers
//from the smaller to the bigger,
//the formula return b - a sorts numbers in descending order,
//that is, from the bigger to the smaller number
returna-b;
}
//pass the sortAscending function as argument to sort()
varsortedAscending=myNumbers.sort(sortAscending);
//print result on the page
document.write(sortedAscending);
//This should print:
//2,4,6,9,10 . Now try sorting in descending order on your own.
4. Làm thế nào để thêm dữ liệu trong dữ liệu Array ?

Thêm các mục vào cuối mảng với push (). Những gì cảm thấy giống như quy luật tự nhiên của sự vật, đó là, thêm một mục vào cuối mảng, có thể dễ dàng đạt được bằng cách sử dụng phương pháp push().

Đây là cách nó hoạt động:

//use our old colors array

varcolors=["green","red","yellow","orange","blue"];

//use push() to add the color "pink" at the end

colors.push("pink");

//print the enlarged array

document.write(colors);

//This should print:

//green,red,yellow,orange,blue,pink

– Thêm danh mục bắt đầu một mảng với unshift()

Sử dụng unshift() để thêm một danh mục mới để bắt đầu một vị trí index trong mảng.

Làm thế nào để chyển dữ liệu từ đối tượng Array?
Nếu bạn muốn di dời danh mục cuối, bạn sr dụng Post(). Nếu bạn muốn dời thứ tự mảng sử dụng shift().

varcolors=["green","red","yellow","orange","blue"];
//remove "blue" from colors
colors.pop();
document.write(colors);
//This prints: green,red,yellow,orange
//remo
colors.shift();
document.write("<br />"+colors);
//This prints: red,yellow,orange
//on a new line break
Ví dụ: Đăng ký tài khoản

File HTML;

<!DOCTYPE html>
<html>
<head>
<title>Lesson13:JavaScriptObjects-Arrays</title>
<script type="text/javascript"src="lesson13_tryout.js"></script>
</head>
<body>
<h1>Lesson13:Register with us</h1>
<p>RegisteraUsername:<input type="text"id="txtName"/></p>
<p><input type="button"id="btnSubmit"value="Register"/></p>
<pid="result"></p>
</body>
</html>
file JavaScript: lesson13_tryout.js
Chương trình của bạn có chứa:
– một mảng toàn cầu được gọi tên người dùng được sử dụng để lưu trữ Tên người dùng;
– một chức năng gọi là init() được sử dụng để ràng buộc các chức năng chính cho sự kiện onclick của nút;
– và một chức năng gọi là registerName () mà thực hiện tất cả các nhiệm vụ chính của chương trình.
if(success)
{
userNames.push(newName);
}
//display Usernames sorted alphabetically on a new line
result.innerHTML+="<br />"+userNames.sort();
}
Nguồn: [URL='http://hocthietkeweb.net.vn/bai-13-array-trong-javascript.html']Bài 13: Array trong Javascript[/URL]