Hướng dẫn sử dụng Macromedia Flash mx

Bài 28: Vui đùa với dãy

Bạn hãy mở tập tin mới trong Flash và viết đoạn mã như sau trong bảng Actions - Frame:

arr = ["mãng cầu", "dừa", "đu đủ", "xoài"];

trace(arr);

subarr = arr.slice(0,1); trace(subarr);

subarr = arr.slice(2,3); trace(subarr);

subarr = arr.slice(2); trace(subarr);

Đoạn mã vừa nêu giúp bạn biết một cách mới để tạo ra dãy với các phần tử sắp sẵn và làm quen với hàm slice của dãy. Phần tử đầu tiên là "mãng cầu". Các phần tử kế tiếp là "dừa", "đu đủ", "xoài" (tức là... "cầu vừa đủ xài"). Sau khi tạo ra dãy arr, ta dùng câu lệnh trace(arr); để in dãy arr ra bảng Output, xem thử dãy arr có chứa các thứ mà ta đặt vào hay chưa. Hàm slice giúp bạn cắt lấy một phần của dãy, tạo ra dãy mới. Dãy bị cắt thực ra vẫn còn nguyên, không bị mất tí tẹo nào. "Dãy con" thu được chứa đựng một số phần tử của "dãy gốc". Nói rõ hơn, dãy con dùng chung một số phần tử với dãy gốc. Khi viết arr.slice(0, 1), bạn "xắn" vào dãy arr, "trước mặt" phần tử thứ nhất ở vị trí 0 và "trước mặt" phần tử thứ hai ở vị trí 1. Lát cắt được lấy ra chỉ chứa phần tử thứ nhất, tức "mãng cầu". Ta đặt tên cho dãy con thu được từ hàm slice là subarr và dùng hàm trace kiểm tra ngay nội dung của dãy con subarr. Khi viết arr.slice(2, 3), ta có lát cắt từ vị trí 2 (phần tử "đu đủ") đến vị trí 3 (phần tử "xoài"). Dãy con thu được chỉ gồm phần tử "đu đủ", không có phần tử "xoài". Nói chung, bạn cần nhớ rằng phần tử ứng với đối mục thứ nhất của hàm slice có mặt trong kết quả của hàm slice nhưng phần tử ứng với đối mục thứ hai thì không. Khi viết arr.slice(2), bạn gọi hàm slice nhưng chỉ cung cấp một đối mục. Flash tự hiểu rằng bạn muốn cắt từ vị trí 2 (phần tử "đu đủ") đến hết dãy arr. Dãy con thu được gồm có "đu đủ" và "xoài". Chạy thử chương trình và nhìn vào bảng Output, bạn thấy rõ nội dung của dãy gốc và các dãy con do hàm slice tạo ra:

mãng cầu,dừa,đu đủ,xoài

mãng cầu

đu đủ,xoài

Bạn hãy viết thêm các câu lệnh gọi hàm slice "ly kỳ" hơn:

subarr = arr.slice(); trace(subarr);

subarr = arr.slice(-2); trace(subarr);

subarr = arr.slice(-3,-2); trace(subarr);

subarr = arr.slice(-3,3); trace(subarr);

Khi bạn gọi hàm slice của dãy arr mà không cung cấp đối mục nào, Flash hoan hỉ cho bạn toàn bộ dãy arr. Nếu đối mục của hàm slice là chỉ số âm, Flash không hề bối rối và tự hiểu rằng đó là chỉ số tính từ đuôi dãy, chứ không phải tính từ đầu dãy như bình thường. Vị trí cuối dãy có chỉ số là -1, vị trí áp cuối có chỉ số là -2,... Khi viết arr.slice(-2), bạn thu được dãy con của arr, từ với vị trí áp cuối ("đu đủ") đến hết dãy arr. Khi viết arr.slice(-3, -2), bạn thu được dãy con từ vị trí -3 ("dừa") đến vị trí -2 ("đu đủ"). Dãy con như vậy chỉ có "dừa", không có "đu đủ". Bạn có thể dùng đồng thời chỉ số âm và chỉ số dương khi gọi hàm slice. Khi bạn viết arr.slice(-3, 3), Flash dư sức hiểu rằng dãy con được lấy từ vị trí -3 ("dừa") đến vị trí 3 ("xoài"). Nhìn vào kết quả của chương trình (hình 1), bạn có thể kiểm tra xem Flash "suy nghĩ" có giống mình hay không.

Cần nhắc lại rằng hàm slice không làm "sứt mẻ" dãy arr. Ở cuối đoạn mã đã có, bạn có thể thử ghép dãy arr với dãy con subarr bằng một hàm có tên là concat và in ra kết quả: trace(arr.concat(subarr));. Nhờ hàm concat của arr, bạn thu được... "dãy gộc" dài hơn arr, bao gồm các phần tử của arr và subarr. Bạn thử ngay xem sao. Nếu muốn "xắn" vào dãy arr và làm dãy arr mất đi lát cắt, bạn phải dùng hàm khác, gọi là splice. Bạn hãy xóa đoạn mã hiện có và viết đoạn mã mới như sau:

arr = ["mãng cầu", "dừa", "đu đủ", "xoài"];

trace(arr);

arr.splice(1,1); trace(arr);

arr.splice(1,0,"cam"); trace(arr);

arr.splice(0,2,"bưởi"); trace(arr);

arr.splice(-1,1); trace(arr);

Trong đoạn mã nêu trên, ta gọi hàm splice của arr, rồi in ra ngay nội dung của arr để thấy rõ rằng dãy arr bị "xà xẻo" ra sao. Đối mục thứ nhất của hàm splice là vị trí cắt thứ nhất. Nhưng khác với hàm slice, đối mục thứ hai của hàm splice cho biết phải lấy bao nhiêu phần tử từ vị trí cắt. Nếu bạn ghi đối mục thứ hai là 0 thì Flash không cắt gì hết! Hàm splice còn có thể có đối mục thứ ba, thứ tư,... để giúp bạn liệt kê các phần tử mà bạn muốn đưa vào dãy, thay thế cho lát cắt. Thử chạy chương trình và nghiền ngẫm kết quả (hình 2), bạn sẽ hiểu rõ ý nghĩa của từng câu lệnh.

Bài 29: Dãy nhiều chiều

arr = new Array();

for(i = 0; i < 3; i++) {

  arr[i] = ["mãng cầu", "dừa", "đu đủ", "xoài"];

}

Trong đoạn mã trên, ta tạo ra một dãy mang tên arr, rồi dùng vòng lặp for để tạo ra từng phần tử của dãy arr. Nhìn kỹ, bạn thấy rằng với cách dùng vòng lặp như vậy, dãy arr sẽ có ba phần tử (chiều dài của dãy là 3) và mỗi phần tử lại là một dãy khác, chứa 4 phần tử ("mãng cầu", "dừa", "đu đủ", "xoài"). Để in ra bảng Output từng phần tử của dãy arr, bạn viết thêm đoạn mã sau:

  for(j = 0; j < arr[i].length; j++)

    trace(arr[i][j]);

}

Trong đó, ta dùng hai vòng lặp for. Vòng lặp for bên ngoài for(i = 0; i < arr.length; i++) giúp bạn xem xét từng phần tử arr[i] của dãy arr. Bạn chú ý: arr.length là chiều dài của dãy arr. Trong trường hợp đang xét, arr.length có trị là 3. Tuy nhiên, bạn nên viết arr.length, đừng viết 3. Nhờ vậy, khi muốn sửa đổi chiều dài của dãy, chẳng hạn sửa 3 thành 5, bạn chỉ cần sửa ở vòng lặp for đầu tiên for(i = 0; i < 3; i++), và không cần sửa thêm ở chỗ nào khác. Vì mỗi phần tử arr[i] lại là một dãy, vòng lặp for bên trong for(j = 0; j < arr[i].length; j++) giúp bạn in ra từng phần tử của dãy đó. Để chỉ phần tử thứ j của dãy arr[i], bạn viết một cách tự nhiên: arr[i][j]. Ấn Ctrl+Enter để chạy chương trình, bạn thấy tên bốn loại trái cây được lặp lại ba lần. Để mỗi "dãy con" arr[i] được in ra trên cùng một hàng, cho dễ phân biệt với "dãy cha" arr, bạn sửa lại đoạn mã in dãy arr như sau:

  trace(arr[i].join("|"));

}

Thay vì in từng phần tử của dãy arr[i], ta gọi hàm join của dãy arr[i] để nối mọi phần tử của dãy arr[i] thành một chuỗi duy nhất. Dấu vạch đứng được dùng làm "mối nối" giữa hai phần tử. Nhờ có hàm join, bạn thu được kết quả như hình 1, cho thấy rõ ràng dãy arr có ba phần tử và mỗi phần tử lại là một dãy. Kết quả in giúp bạn hình dung dãy hai chiều như một bảng, trong đó chỉ số i của "dãy cha" là chỉ số hàng và chỉ số j của "dãy con" là chỉ số cột.

Trong ví dụ vừa xét, các dãy con giống hệt nhau. Để thấy rằng các dãy con có thể khác nhau, bạn xóa đoạn mã hiện có, viết đoạn mã thử nghiệm khác như sau:

arr = new Array();

for(i = 0; i < 5; i++) {

  arr[i] = new Array();

  for(j = 0; j < 6; j++) {

    arr[i][j] = "[" + i + j + "]";

  }

for(i = 0; i < arr.length; i++) {

  trace(arr[i].join(" ");

}

Nhìn vào đoạn mã vừa viết, bạn hiểu ngay: dãy arr có năm phần tử và mỗi phần tử arr[i] lại là một dãy có sáu phần tử. Mỗi phần tử trong dãy con arr[i] có dạng "[" + i + j + "]", nghĩa là gồm hai chỉ số hàng và cột ghép lại, đặt trong cặp dấu ngoặc vuông. Để in từng phần tử arr[i], bạn viết tương tự như ví dụ trước: gọi hàm join của dãy arr[i] để nối các phần tử của dãy thành một chuỗi duy nhất. Lần này ta làm khác một chút: dùng ký tự trắng " " làm mối nối. Thử chạy chương trình, bạn có kết quả như hình 2, cho thấy rõ dãy hai chiều của ta là một bảng gồm 5 hàng, 6 cột. Có một chuyện nhỏ nhưng cũng đáng để ý: nếu bạn viết câu lệnh: arr[i][j] = i + j; để tạo phần tử của bảng, Flash sẽ lấy i cộng với j và cho kết quả là một số, chứ không phải một chuỗi. Cách viết "[" + i + j + "]" giúp Flash hiểu rằng phải chuyển i và j thành chuỗi để ghép với dấu ngoặc mở và dấu ngoặc đóng.

Trong ví dụ vừa xét, các dãy con arr[i] có chiều dài như nhau (6). Thực ra, các dãy con hoàn toàn có thể có chiều dài khác nhau. Nếu mỗi phần tử của dãy con arr[i][j] lại là một dãy, bạn sẽ có dãy ba chiều (3D array). Để diễn đạt một phần tử của "dãy cháu" arr[i][j], bạn phải dùng ba chỉ số, chẳng hạn: arr[i][j][k]. Cứ thế, bạn có thể có dãy nhiều chiều hơn nữa (khiếp!). Bạn yên tâm, dãy hai chiều đủ sức đáp ứng phần lớn nhu cầu thực tế.