0:00:01.135,0:00:01.773
Chúng ta cùng tiếp tục khám phá

0:00:01.773,0:00:04.094
công dụng của đối tượng.

0:00:04.094,0:00:05.997
Ta sẽ quay lại với chương trình đã sử dụng

0:00:05.997,0:00:07.785
trong bài hướng dẫn về các hàm.

0:00:07.785,0:00:10.610
Chương trình này chứa hàm drawWinston

0:00:10.610,0:00:12.215
có khả năng vẽ Winston,

0:00:12.215,0:00:14.610
và chứa một cặp x và y nhất định.

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

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

0:00:20.734,0:00:22.827
Các bạn biết tôi mà.

0:00:22.827,0:00:25.489
Khi tôi nhìn vào 4 lần gọi drawWinston

0:00:25.489,0:00:27.540
gần giống hệt nhau này,

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

0:00:30.791,0:00:32.356
nếu ta sử dụng vòng lặp

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

0:00:35.627,0:00:39.324
thay đổi x và y cho mỗi lần lặp.

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

0:00:41.701,0:00:45.054
lưu trữ các tọa độ x và y này trong một mảng

0:00:45.054,0:00:47.066
để có thể lặp được.

0:00:47.066,0:00:49.097
Vậy với bộ giá trị này,

0:00:49.097,0:00:51.617
ta có thể tạo 2 mảng:

0:00:52.497,0:00:55.876
một mảng cho x, và một mảng cho y.

0:00:55.876,0:00:59.586
Như vậy xPostitions, ta có thể có 99, 294,

0:00:59.586,0:01:01.903
101, và 294.

0:01:01.903,0:01:06.903
Còn yPositions, ta sẽ có 117, 117,

0:01:07.045,0:01:08.992
316, 316.

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

0:01:11.430,0:01:14.030
với vòng lặp for, var i = 0,

0:01:14.030,0:01:18.196
i < xPositions.length, i++.

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

0:01:20.653,0:01:22.990
và ta nhập drawWinston,

0:01:22.990,0:01:26.344
xPositions[i]s,

0:01:26.344,0:01:29.391
và yPositions[i].

0:01:30.511,0:01:32.041
Được rồi.

0:01:32.041,0:01:33.835
Ta thử xóa xem có được không nhé.

0:01:33.835,0:01:35.481
Vậy là được rồi.

0:01:35.481,0:01:38.487
Bây giờ ta có thể gọi được,

0:01:38.487,0:01:40.135
chỉ với một dòng mã

0:01:40.135,0:01:41.369
chạy hàm drawWinston, nhưng mỗi lần chạy

0:01:41.369,0:01:44.478
với một vị trí khác nhau trong mảng xPositions.

0:01:44.478,0:01:46.958
Ta có thể tiếp tục thêm vào

0:01:46.958,0:01:49.847
bằng cách nhập 10 rồi cộng thêm 1,

0:01:49.847,0:01:52.632
rồi lại cộng thêm 1 và cộng thêm 1,

0:01:52.632,0:01:57.427
sau đó là 100 và 1.

0:01:58.397,0:02:01.421
Trông bắt đầu lộn xộn rồi,

0:02:01.421,0:02:04.547
tôi chẳng thích tí nào vì rất khó có thể

0:02:04.547,0:02:07.818
thấy x nào liên quan tới y nào.

0:02:08.937,0:02:12.515
Tôi muốn chỉ cần liếc qua

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

0:02:14.566,0:02:16.212
Thay vì phải đảm bảo

0:02:16.212,0:02:18.528
sắp xếp chúng một cách hoàn hảo

0:02:18.528,0:02:20.554
như thế này.

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

0:02:26.357,0:02:30.400
Ta có thể lưu trữ chúng dưới dạng đối tượng

0:02:30.400,0:02:33.401
vì thử nghĩ mà xem, mỗi vị trí

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

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

0:02:39.108,0:02:41.628
Sau đó ta có thể tạo một mảng đối tượng

0:02:41.628,0:02:44.147
với những vị trí x, y này.

0:02:44.147,0:02:45.651
Ta cùng làm nhé.

0:02:45.651,0:02:48.821
Ta nhập var positions =,

0:02:48.821,0:02:51.260
đây cũng sẽ là một mảng,

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

0:02:54.023,0:02:55.749
sẽ là một đối tượng.

0:02:55.749,0:02:58.675
Ta có ngoặc nhọn,

0:02:58.675,0:03:01.915
sau đó ta sẽ nhập x 99,

0:03:01.915,0:03:04.517
y 117.

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

0:03:08.499,0:03:10.998
ta sẽ thêm một vị trí nữa,

0:03:10.998,0:03:13.842
và thêm một vị trí nữa.

0:03:13.842,0:03:18.600
Như vậy, x sẽ là 294, 117.

0:03:18.600,0:03:23.600
Xong, vị trí thứ ba sẽ là 101, 316.

0:03:25.285,0:03:29.178
Và cuối cùng là 294

0:03:29.178,0:03:31.084
và 316.

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

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

0:03:38.908,0:03:40.865
Ở dưới đây trong vòng lặp for,

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

0:03:44.036,0:03:48.262
sau đó ta sẽ đưa vào đối tượng.

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

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

0:03:53.686,0:03:58.686
vì vậy ta cần có positions[i].x và positions[i].y.

0:03:59.050,0:04:00.512
Ta-dah!

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

0:04:04.635,0:04:05.508
Tuyệt vời!

0:04:05.508,0:04:07.501
Tôi thấy đẹp hơn nhiều rồi đấy,

0:04:07.501,0:04:09.614
mã dễ đọc hơn nhiều nữa,

0:04:09.614,0:04:12.498
cứ có mã dễ đọc hơn là tốt rồi.

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

0:04:14.631,0:04:16.095
nếu tôi muốn thêm,

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

0:04:18.512,0:04:22.820
ta có thể nhập x 200, y 200,

0:04:22.820,0:04:24.832
cho một Winston nho nhỏ vào giữa đây.

0:04:26.612,0:04:27.240
Xong.

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

0:04:30.869,0:04:34.254
Hãy chú ý cách hàm của chúng ta tiếp nhận

0:04:34.254,0:04:38.561
rồi sử dụng 2 số.

0:04:38.561,0:04:40.016
Ta có thể thay đổi hàm

0:04:40.016,0:04:42.129
để nó tiếp nhận đối tượng,

0:04:42.129,0:04:44.727
rồi ta lấy x và y từ đối tượng đó.

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

0:04:49.095,0:04:50.477
Ta cùng thử nhé.

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

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

0:04:57.405,0:04:58.624
mà ta lại chỉ đưa vào 1.

0:04:58.624,0:05:01.692
Vì thế ta sẽ đổi thành facePosition.

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

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

0:05:10.083,0:05:11.585
nhưng lúc này nó không tồn tại.

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

0:05:13.760,0:05:18.339
lưu vị trí x

0:05:18.339,0:05:21.179
từ một đối tượng trong biến faceX,

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

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

0:05:24.536,0:05:27.645
vì vậy mình sẽ lưu nó vào biến faceX.”

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

0:05:30.103,0:05:33.490
như vậy faceY = facePosition.y.

0:05:33.490,0:05:34.285
Ta-dah!

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

0:05:37.841,0:05:39.807
Bây giờ ta phải đảm bảo đã nhập đúng chính tả.

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

0:05:41.737,0:05:44.033
vì đó không phải thứ trong mảng đối tượng

0:05:44.033,0:05:46.207
mà ta đã đưa vào,

0:05:46.207,0:05:48.056
vì vậy ta phải nhập thật chính xác.

0:05:48.056,0:05:50.088
NBây giờ khá gọn gàng rồi đấy,

0:05:50.088,0:05:51.774
ta có thể có mảng đối tượng,

0:05:51.774,0:05:53.623
có các hàm nhận đối tượng,

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

0:05:56.630,0:05:58.621
sẽ rất hiệu quả với lối

0:05:58.621,0:06:00.267
cấu trúc dữ liệu này.

0:06:00.267,0:06:02.014
Ngoài ra vì ta thường muốn

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

0:06:04.818,0:06:07.216
chúng đặc biệt hữu ích cho tất cả

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

0:06:08.861,0:00:00.000
Chúc các bạn vui vẻ.