WEBVTT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

00:00:45.054 --> 00:00:47.066
để có thể lặp được.

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

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

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

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

00:00:59.586 --> 00:01:01.903
101, và 294.

00:01:01.903 --> 00:01:06.903
Còn yPositions, ta sẽ có 117, 117,

00:01:07.045 --> 00:01:08.992
316, 316.

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

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

00:01:14.030 --> 00:01:18.196
i < xPositions.length, i++.

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

00:01:20.653 --> 00:01:22.990
và ta nhập drawWinston,

00:01:22.990 --> 00:01:26.344
xPositions[i]s,

00:01:26.344 --> 00:01:29.391
và yPositions[i].

00:01:30.511 --> 00:01:32.041
Được rồi.

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

00:01:33.835 --> 00:01:35.481
Vậy là được rồi.

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

00:01:38.487 --> 00:01:40.135
chỉ với một dòng mã

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

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

00:01:44.478 --> 00:01:46.958
Ta có thể tiếp tục thêm vào

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

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

00:01:52.632 --> 00:01:57.427
sau đó là 100 và 1.

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

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

00:02:04.547 --> 00:02:07.818
thấy x nào liên quan tới y nào.

00:02:08.937 --> 00:02:12.515
Tôi muốn chỉ cần liếc qua

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

00:02:14.566 --> 00:02:16.212
Thay vì phải đảm bảo

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

00:02:18.528 --> 00:02:20.554
như thế này.

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

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

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

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

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

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

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

00:02:44.147 --> 00:02:45.651
Ta cùng làm nhé.

00:02:45.651 --> 00:02:48.821
Ta nhập var positions =,

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

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

00:02:54.023 --> 00:02:55.749
sẽ là một đối tượng.

00:02:55.749 --> 00:02:58.675
Ta có ngoặc nhọn,

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

00:03:01.915 --> 00:03:04.517
y 117.

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

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

00:03:10.998 --> 00:03:13.842
và thêm một vị trí nữa.

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

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

00:03:25.285 --> 00:03:29.178
Và cuối cùng là 294

00:03:29.178 --> 00:03:31.084
và 316.

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

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

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

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

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

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

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

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

00:03:59.050 --> 00:04:00.512
Ta-dah!

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

00:04:04.635 --> 00:04:05.508
Tuyệt vời!

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

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

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

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

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

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

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

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

00:04:26.612 --> 00:04:27.240
Xong.

00:04:27.240 --> 00: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.

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

00:04:34.254 --> 00:04:38.561
rồi sử dụng 2 số.

00:04:38.561 --> 00:04:40.016
Ta có thể thay đổi hàm

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

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

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

00:04:49.095 --> 00:04:50.477
Ta cùng thử nhé.

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

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

00:04:57.405 --> 00:04:58.624
mà ta lại chỉ đưa vào 1.

00:04:58.624 --> 00:05:01.692
Vì thế ta sẽ đổi thành facePosition.

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

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

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

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

00:05:13.760 --> 00:05:18.339
lưu vị trí x

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

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

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

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

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

00:05:30.103 --> 00:05:33.490
như vậy faceY = facePosition.y.

00:05:33.490 --> 00:05:34.285
Ta-dah!

00:05:34.285 --> 00: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.

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

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

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

00:05:44.033 --> 00:05:46.207
mà ta đã đưa vào,

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

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

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

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

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

00:05:56.630 --> 00:05:58.621
sẽ rất hiệu quả với lối

00:05:58.621 --> 00:06:00.267
cấu trúc dữ liệu này.

00:06:00.267 --> 00:06:02.014
Ngoài ra vì ta thường muốn

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

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

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

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