Arrays of Objects (Video Version)

Chúng ta cùng tiếp tục khám phá

công dụng của đối tượng.

Ta sẽ quay lại với chương trình đã sử dụng

trong bài hướng dẫn về các hàm.

Chương trình này chứa hàm drawWinston

có khả năng vẽ Winston,

và chứa một cặp x và y nhất định.

Ở dưới đây, ta gọi hàm drawWinston 4 lần.

Mỗi lần gọi với một cặp tọa độ x và y khác nhau.

Các bạn biết tôi mà.

Khi tôi nhìn vào 4 lần gọi drawWinston

gần giống hệt nhau này,

tất cả những gì tôi có thể nghĩ ra là sẽ tốt hơn bao nhiêu

nếu ta sử dụng vòng lặp

và chỉ cần gọi một lần trong vòng lặp,

thay đổi x và y cho mỗi lần lặp.

Để làm được điều đó, ta phải tìm cách

lưu trữ các tọa độ x và y này trong một mảng

để có thể lặp được.

Vậy với bộ giá trị này,

ta có thể tạo 2 mảng:

một mảng cho x, và một mảng cho y.

Như vậy xPostitions, ta có thể có 99, 294,

101, và 294.

Còn yPositions, ta sẽ có 117, 117,

316, 316.

Được rồi, bây giờ ta có thể lặp qua những tọa độ đó

với vòng lặp for, var i = 0,

i < xPositions.length, i++.

Như vậy ta sẽ lặp qua từng phần tử trong xPositions,

và ta nhập drawWinston,

xPositions[i]s,

và yPositions[i].

Được rồi.

Ta thử xóa xem có được không nhé.

Vậy là được rồi.

Bây giờ ta có thể gọi được,

chỉ với một dòng mã

chạy hàm drawWinston, nhưng mỗi lần chạy

với một vị trí khác nhau trong mảng xPositions.

Ta có thể tiếp tục thêm vào

bằng cách nhập 10 rồi cộng thêm 1,

rồi lại cộng thêm 1 và cộng thêm 1,

sau đó là 100 và 1.

Trông bắt đầu lộn xộn rồi,

tôi chẳng thích tí nào vì rất khó có thể

thấy x nào liên quan tới y nào.

Tôi muốn chỉ cần liếc qua

cũng biết mình đang nhìn vào cặp x, y nào.

Thay vì phải đảm bảo

sắp xếp chúng một cách hoàn hảo

như thế này.

Tôi muốn tìm cách khác để lưu trữ những tọa độ này.

Ta có thể lưu trữ chúng dưới dạng đối tượng

vì thử nghĩ mà xem, mỗi vị trí

lại chứa 2 thông tin cơ bản, x và y.

Vì vậy ta có thể có 2 đối tượng mang thuộc tính x và y.

Sau đó ta có thể tạo một mảng đối tượng

với những vị trí x, y này.

Ta cùng làm nhé.

Ta nhập var positions =,

đây cũng sẽ là một mảng,

nhưng mỗi phần tử, thay vì là một số,

sẽ là một đối tượng.

Ta có ngoặc nhọn,

sau đó ta sẽ nhập x 99,

y 117.

Được rồi, bây giờ ta đã có một trong các vị trí ở đây,

ta sẽ thêm một vị trí nữa,

và thêm một vị trí nữa.

Như vậy, x sẽ là 294, 117.

Xong, vị trí thứ ba sẽ là 101, 316.

Và cuối cùng là 294

và 316.

Được rồi, bây giờ ta đã có một mảng đối tượng

trong đó mỗi đối tượng đều chứa thuộc tính x và y.

Ở dưới đây trong vòng lặp for,

ta sẽ chỉ thay đổi cái này để lặp qua positions.length,

sau đó ta sẽ đưa vào đối tượng.

Hiện tại, ta đang đưa vào toàn bộ đối tượng,

nhưng ta chỉ cần đưa vào x và y thôi,

vì vậy ta cần có positions[i].x và positions[i].y.

Ta-dah!

Bây giờ ta có thể xóa chỗ mảng cũ này rồi.

Tuyệt vời!

Tôi thấy đẹp hơn nhiều rồi đấy,

mã dễ đọc hơn nhiều nữa,

cứ có mã dễ đọc hơn là tốt rồi.

Và ta cũng có thể thêm thắt dễ dàng hơn nữa,

nếu tôi muốn thêm,

tôi sẽ thêm luôn một cặp vào đây,

ta có thể nhập x 200, y 200,

cho một Winston nho nhỏ vào giữa đây.

Xong.

Bây giờ tôi muốn cho các bạn xem một thứ còn hay ho hơn nữa.

Hãy chú ý cách hàm của chúng ta tiếp nhận

rồi sử dụng 2 số.

Ta có thể thay đổi hàm

để nó tiếp nhận đối tượng,

rồi ta lấy x và y từ đối tượng đó.

Điều đó có nghĩa là ta có thể đưa vào đối tượng ở dưới đây.

Ta cùng thử nhé.

Ta đưa vào một đối tượng, nó hỏng rồi.

Đó là bởi hàm của ta cần 2 đối tượng,

mà ta lại chỉ đưa vào 1.

Vì thế ta sẽ đổi thành facePosition.

Bây giờ ta lại nhận được một lỗi có nội dung faceX is not defined

vì trước đó, ta đưa vào faceX dưới dạng đối số

nhưng lúc này nó không tồn tại.

Ta chỉ đang đưa vào một đối tượng, vì vậy ta có thể

lưu vị trí x

từ một đối tượng trong biến faceX,

và ta nghĩ, “Được rồi, mình có đối tượng này.

Mình biết đối tượng này có thuộc tính x,

vì vậy mình sẽ lưu nó vào biến faceX.”

Sau đó ta có thể thực hiện tương tự với y,

như vậy faceY = facePosition.y.

Ta-dah!

Và cuối cùng là phần còn lại của hàm sử dụng faceX và faceY.

Bây giờ ta phải đảm bảo đã nhập đúng chính tả.

Nếu nhập xx, chương trình sẽ không hoạt động

vì đó không phải thứ trong mảng đối tượng

mà ta đã đưa vào,

vì vậy ta phải nhập thật chính xác.

NBây giờ khá gọn gàng rồi đấy,

ta có thể có mảng đối tượng,

có các hàm nhận đối tượng,

và các bạn sẽ thấy rằng chương trình của chúng ta

sẽ rất hiệu quả với lối

cấu trúc dữ liệu này.

Ngoài ra vì ta thường muốn

ghép cặp x và y với nhau, tôi nghĩ các bạn sẽ thấy

chúng đặc biệt hữu ích cho tất cả

những chương trình liên quan đến vẽ và hoạt họa.

Chúc các bạn vui vẻ.