1
00:00:01,135 --> 00:00:01,773
Chúng ta cùng tiếp tục khám phá

2
00:00:01,773 --> 00:00:04,094
công dụng của đối tượng.

3
00:00:04,094 --> 00:00:05,997
Ta sẽ quay lại với chương trình đã sử dụng

4
00:00:05,997 --> 00:00:07,785
trong bài hướng dẫn về các hàm.

5
00:00:07,785 --> 00:00:10,610
Chương trình này chứa hàm drawWinston

6
00:00:10,610 --> 00:00:12,215
có khả năng vẽ Winston,

7
00:00:12,215 --> 00:00:14,610
và chứa một cặp x và y nhất định.

8
00:00:14,610 --> 00:00:17,545
Ở dưới đây, ta gọi hàm drawWinston 4 lần.

9
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.

10
00:00:20,734 --> 00:00:22,827
Các bạn biết tôi mà.

11
00:00:22,827 --> 00:00:25,489
Khi tôi nhìn vào 4 lần gọi drawWinston

12
00:00:25,489 --> 00:00:27,540
gần giống hệt nhau này,

13
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

14
00:00:30,791 --> 00:00:32,356
nếu ta sử dụng vòng lặp

15
00:00:32,356 --> 00:00:35,627
và chỉ cần gọi một lần trong vòng lặp,

16
00:00:35,627 --> 00:00:39,324
thay đổi x và y cho mỗi lần lặp.

17
00:00:39,324 --> 00:00:41,701
Để làm được điều đó, ta phải tìm cách

18
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

19
00:00:45,054 --> 00:00:47,066
để có thể lặp được.

20
00:00:47,066 --> 00:00:49,097
Vậy với bộ giá trị này,

21
00:00:49,097 --> 00:00:51,617
ta có thể tạo 2 mảng:

22
00:00:52,497 --> 00:00:55,876
một mảng cho x, và một mảng cho y.

23
00:00:55,876 --> 00:00:59,586
Như vậy xPostitions, ta có thể có 99, 294,

24
00:00:59,586 --> 00:01:01,903
101, và 294.

25
00:01:01,903 --> 00:01:06,903
Còn yPositions, ta sẽ có 117, 117,

26
00:01:07,045 --> 00:01:08,992
316, 316.

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

28
00:01:11,430 --> 00:01:14,030
với vòng lặp for, var i = 0,

29
00:01:14,030 --> 00:01:18,196
i < xPositions.length, i++.

30
00:01:18,196 --> 00:01:20,653
Như vậy ta sẽ lặp qua từng phần tử trong xPositions,

31
00:01:20,653 --> 00:01:22,990
và ta nhập drawWinston,

32
00:01:22,990 --> 00:01:26,344
xPositions[i]s,

33
00:01:26,344 --> 00:01:29,391
và yPositions[i].

34
00:01:30,511 --> 00:01:32,041
Được rồi.

35
00:01:32,041 --> 00:01:33,835
Ta thử xóa xem có được không nhé.

36
00:01:33,835 --> 00:01:35,481
Vậy là được rồi.

37
00:01:35,481 --> 00:01:38,487
Bây giờ ta có thể gọi được,

38
00:01:38,487 --> 00:01:40,135
chỉ với một dòng mã

39
00:01:40,135 --> 00:01:41,369
chạy hàm drawWinston, nhưng mỗi lần chạy

40
00:01:41,369 --> 00:01:44,478
với một vị trí khác nhau trong mảng xPositions.

41
00:01:44,478 --> 00:01:46,958
Ta có thể tiếp tục thêm vào

42
00:01:46,958 --> 00:01:49,847
bằng cách nhập 10 rồi cộng thêm 1,

43
00:01:49,847 --> 00:01:52,632
rồi lại cộng thêm 1 và cộng thêm 1,

44
00:01:52,632 --> 00:01:57,427
sau đó là 100 và 1.

45
00:01:58,397 --> 00:02:01,421
Trông bắt đầu lộn xộn rồi,

46
00:02:01,421 --> 00:02:04,547
tôi chẳng thích tí nào vì rất khó có thể

47
00:02:04,547 --> 00:02:07,818
thấy x nào liên quan tới y nào.

48
00:02:08,937 --> 00:02:12,515
Tôi muốn chỉ cần liếc qua

49
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.

50
00:02:14,566 --> 00:02:16,212
Thay vì phải đảm bảo

51
00:02:16,212 --> 00:02:18,528
sắp xếp chúng một cách hoàn hảo

52
00:02:18,528 --> 00:02:20,554
như thế này.

53
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.

54
00:02:26,357 --> 00:02:30,400
Ta có thể lưu trữ chúng dưới dạng đối tượng

55
00:02:30,400 --> 00:02:33,401
vì thử nghĩ mà xem, mỗi vị trí

56
00:02:33,401 --> 00:02:35,837
lại chứa 2 thông tin cơ bản, x và y.

57
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.

58
00:02:39,108 --> 00:02:41,628
Sau đó ta có thể tạo một mảng đối tượng

59
00:02:41,628 --> 00:02:44,147
với những vị trí x, y này.

60
00:02:44,147 --> 00:02:45,651
Ta cùng làm nhé.

61
00:02:45,651 --> 00:02:48,821
Ta nhập var positions =,

62
00:02:48,821 --> 00:02:51,260
đây cũng sẽ là một mảng,

63
00:02:51,260 --> 00:02:54,023
nhưng mỗi phần tử, thay vì là một số,

64
00:02:54,023 --> 00:02:55,749
sẽ là một đối tượng.

65
00:02:55,749 --> 00:02:58,675
Ta có ngoặc nhọn,

66
00:02:58,675 --> 00:03:01,915
sau đó ta sẽ nhập x 99,

67
00:03:01,915 --> 00:03:04,517
y 117.

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

69
00:03:08,499 --> 00:03:10,998
ta sẽ thêm một vị trí nữa,

70
00:03:10,998 --> 00:03:13,842
và thêm một vị trí nữa.

71
00:03:13,842 --> 00:03:18,600
Như vậy, x sẽ là 294, 117.

72
00:03:18,600 --> 00:03:23,600
Xong, vị trí thứ ba sẽ là 101, 316.

73
00:03:25,285 --> 00:03:29,178
Và cuối cùng là 294

74
00:03:29,178 --> 00:03:31,084
và 316.

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

76
00:03:34,744 --> 00:03:37,508
trong đó mỗi đối tượng đều chứa thuộc tính x và y.

77
00:03:38,908 --> 00:03:40,865
Ở dưới đây trong vòng lặp for,

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

79
00:03:44,036 --> 00:03:48,262
sau đó ta sẽ đưa vào đối tượng.

80
00:03:48,262 --> 00:03:51,756
Hiện tại, ta đang đưa vào toàn bộ đối tượng,

81
00:03:51,756 --> 00:03:53,686
nhưng ta chỉ cần đưa vào x và y thôi,

82
00:03:53,686 --> 00:03:58,686
vì vậy ta cần có positions[i].x và positions[i].y.

83
00:03:59,050 --> 00:04:00,512
Ta-dah!

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

85
00:04:04,635 --> 00:04:05,508
Tuyệt vời!

86
00:04:05,508 --> 00:04:07,501
Tôi thấy đẹp hơn nhiều rồi đấy,

87
00:04:07,501 --> 00:04:09,614
mã dễ đọc hơn nhiều nữa,

88
00:04:09,614 --> 00:04:12,498
cứ có mã dễ đọc hơn là tốt rồi.

89
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,

90
00:04:14,631 --> 00:04:16,095
nếu tôi muốn thêm,

91
00:04:16,095 --> 00:04:18,512
tôi sẽ thêm luôn một cặp vào đây,

92
00:04:18,512 --> 00:04:22,820
ta có thể nhập x 200, y 200,

93
00:04:22,820 --> 00:04:24,832
cho một Winston nho nhỏ vào giữa đây.

94
00:04:26,612 --> 00:04:27,240
Xong.

95
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.

96
00:04:30,869 --> 00:04:34,254
Hãy chú ý cách hàm của chúng ta tiếp nhận

97
00:04:34,254 --> 00:04:38,561
rồi sử dụng 2 số.

98
00:04:38,561 --> 00:04:40,016
Ta có thể thay đổi hàm

99
00:04:40,016 --> 00:04:42,129
để nó tiếp nhận đối tượng,

100
00:04:42,129 --> 00:04:44,727
rồi ta lấy x và y từ đối tượng đó.

101
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.

102
00:04:49,095 --> 00:04:50,477
Ta cùng thử nhé.

103
00:04:50,477 --> 00:04:53,503
Ta đưa vào một đối tượng, nó hỏng rồi.

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

105
00:04:57,405 --> 00:04:58,624
mà ta lại chỉ đưa vào 1.

106
00:04:58,624 --> 00:05:01,692
Vì thế ta sẽ đổi thành facePosition.

107
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

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

109
00:05:10,083 --> 00:05:11,585
nhưng lúc này nó không tồn tại.

110
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ể

111
00:05:13,760 --> 00:05:18,339
lưu vị trí x

112
00:05:18,339 --> 00:05:21,179
từ một đối tượng trong biến faceX,

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

114
00:05:22,525 --> 00:05:24,536
Mình biết đối tượng này có thuộc tính x,

115
00:05:24,536 --> 00:05:27,645
vì vậy mình sẽ lưu nó vào biến faceX.”

116
00:05:27,645 --> 00:05:30,103
Sau đó ta có thể thực hiện tương tự với y,

117
00:05:30,103 --> 00:05:33,490
như vậy faceY = facePosition.y.

118
00:05:33,490 --> 00:05:34,285
Ta-dah!

119
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.

120
00:05:37,841 --> 00:05:39,807
Bây giờ ta phải đảm bảo đã nhập đúng chính tả.

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

122
00:05:41,737 --> 00:05:44,033
vì đó không phải thứ trong mảng đối tượng

123
00:05:44,033 --> 00:05:46,207
mà ta đã đưa vào,

124
00:05:46,207 --> 00:05:48,056
vì vậy ta phải nhập thật chính xác.

125
00:05:48,056 --> 00:05:50,088
NBây giờ khá gọn gàng rồi đấy,

126
00:05:50,088 --> 00:05:51,774
ta có thể có mảng đối tượng,

127
00:05:51,774 --> 00:05:53,623
có các hàm nhận đối tượng,

128
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

129
00:05:56,630 --> 00:05:58,621
sẽ rất hiệu quả với lối

130
00:05:58,621 --> 00:06:00,267
cấu trúc dữ liệu này.

131
00:06:00,267 --> 00:06:02,014
Ngoài ra vì ta thường muốn

132
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

133
00:06:04,818 --> 00:06:07,216
chúng đặc biệt hữu ích cho tất cả

134
00:06:07,216 --> 00:06:08,861
những chương trình liên quan đến vẽ và hoạt họa.

135
00:06:08,861 --> 00:00:00,000
Chúc các bạn vui vẻ.