< Return to Video

Arrays of Objects (Video Version)

  • 0:01 - 0:02
    Chúng ta cùng tiếp tục khám phá
  • 0:02 - 0:04
    công dụng của đối tượng.
  • 0:04 - 0:06
    Ta sẽ quay lại với chương trình đã sử dụng
  • 0:06 - 0:08
    trong bài hướng dẫn về các hàm.
  • 0:08 - 0:11
    Chương trình này chứa hàm drawWinston
  • 0:11 - 0:12
    có khả năng vẽ Winston,
  • 0:12 - 0:15
    và chứa một cặp x và y nhất định.
  • 0:15 - 0:18
    Ở dưới đây, ta gọi hàm drawWinston 4 lần.
  • 0:18 - 0:21
    Mỗi lần gọi với một cặp tọa độ x và y khác nhau.
  • 0:21 - 0:23
    Các bạn biết tôi mà.
  • 0:23 - 0:25
    Khi tôi nhìn vào 4 lần gọi drawWinston
  • 0:25 - 0:28
    gần giống hệt nhau này,
  • 0:28 - 0:31
    tất cả những gì tôi có thể nghĩ ra là sẽ tốt hơn bao nhiêu
  • 0:31 - 0:32
    nếu ta sử dụng vòng lặp
  • 0:32 - 0:36
    và chỉ cần gọi một lần trong vòng lặp,
  • 0:36 - 0:39
    thay đổi x và y cho mỗi lần lặp.
  • 0:39 - 0:42
    Để làm được điều đó, ta phải tìm cách
  • 0:42 - 0:45
    lưu trữ các tọa độ x và y này trong một mảng
  • 0:45 - 0:47
    để có thể lặp được.
  • 0:47 - 0:49
    Vậy với bộ giá trị này,
  • 0:49 - 0:52
    ta có thể tạo 2 mảng:
  • 0:52 - 0:56
    một mảng cho x, và một mảng cho y.
  • 0:56 - 1:00
    Như vậy xPostitions, ta có thể có 99, 294,
  • 1:00 - 1:02
    101, và 294.
  • 1:02 - 1:07
    Còn yPositions, ta sẽ có 117, 117,
  • 1:07 - 1:09
    316, 316.
  • 1:09 - 1:11
    Được rồi, bây giờ ta có thể lặp qua những tọa độ đó
  • 1:11 - 1:14
    với vòng lặp for, var i = 0,
  • 1:14 - 1:18
    i < xPositions.length, i++.
  • 1:18 - 1:21
    Như vậy ta sẽ lặp qua từng phần tử trong xPositions,
  • 1:21 - 1:23
    và ta nhập drawWinston,
  • 1:23 - 1:26
    xPositions[i]s,
  • 1:26 - 1:29
    và yPositions[i].
  • 1:31 - 1:32
    Được rồi.
  • 1:32 - 1:34
    Ta thử xóa xem có được không nhé.
  • 1:34 - 1:35
    Vậy là được rồi.
  • 1:35 - 1:38
    Bây giờ ta có thể gọi được,
  • 1:38 - 1:40
    chỉ với một dòng mã
  • 1:40 - 1:41
    chạy hàm drawWinston, nhưng mỗi lần chạy
  • 1:41 - 1:44
    với một vị trí khác nhau trong mảng xPositions.
  • 1:44 - 1:47
    Ta có thể tiếp tục thêm vào
  • 1:47 - 1:50
    bằng cách nhập 10 rồi cộng thêm 1,
  • 1:50 - 1:53
    rồi lại cộng thêm 1 và cộng thêm 1,
  • 1:53 - 1:57
    sau đó là 100 và 1.
  • 1:58 - 2:01
    Trông bắt đầu lộn xộn rồi,
  • 2:01 - 2:05
    tôi chẳng thích tí nào vì rất khó có thể
  • 2:05 - 2:08
    thấy x nào liên quan tới y nào.
  • 2:09 - 2:13
    Tôi muốn chỉ cần liếc qua
  • 2:13 - 2:15
    cũng biết mình đang nhìn vào cặp x, y nào.
  • 2:15 - 2:16
    Thay vì phải đảm bảo
  • 2:16 - 2:19
    sắp xếp chúng một cách hoàn hảo
  • 2:19 - 2:21
    như thế này.
  • 2:22 - 2:26
    Tôi muốn tìm cách khác để lưu trữ những tọa độ này.
  • 2:26 - 2:30
    Ta có thể lưu trữ chúng dưới dạng đối tượng
  • 2:30 - 2:33
    vì thử nghĩ mà xem, mỗi vị trí
  • 2:33 - 2:36
    lại chứa 2 thông tin cơ bản, x và y.
  • 2:36 - 2:39
    Vì vậy ta có thể có 2 đối tượng mang thuộc tính x và y.
  • 2:39 - 2:42
    Sau đó ta có thể tạo một mảng đối tượng
  • 2:42 - 2:44
    với những vị trí x, y này.
  • 2:44 - 2:46
    Ta cùng làm nhé.
  • 2:46 - 2:49
    Ta nhập var positions =,
  • 2:49 - 2:51
    đây cũng sẽ là một mảng,
  • 2:51 - 2:54
    nhưng mỗi phần tử, thay vì là một số,
  • 2:54 - 2:56
    sẽ là một đối tượng.
  • 2:56 - 2:59
    Ta có ngoặc nhọn,
  • 2:59 - 3:02
    sau đó ta sẽ nhập x 99,
  • 3:02 - 3:05
    y 117.
  • 3:05 - 3:08
    Được rồi, bây giờ ta đã có một trong các vị trí ở đây,
  • 3:08 - 3:11
    ta sẽ thêm một vị trí nữa,
  • 3:11 - 3:14
    và thêm một vị trí nữa.
  • 3:14 - 3:19
    Như vậy, x sẽ là 294, 117.
  • 3:19 - 3:24
    Xong, vị trí thứ ba sẽ là 101, 316.
  • 3:25 - 3:29
    Và cuối cùng là 294
  • 3:29 - 3:31
    và 316.
  • 3:31 - 3:35
    Được rồi, bây giờ ta đã có một mảng đối tượng
  • 3:35 - 3:38
    trong đó mỗi đối tượng đều chứa thuộc tính x và y.
  • 3:39 - 3:41
    Ở dưới đây trong vòng lặp for,
  • 3:41 - 3:44
    ta sẽ chỉ thay đổi cái này để lặp qua positions.length,
  • 3:44 - 3:48
    sau đó ta sẽ đưa vào đối tượng.
  • 3:48 - 3:52
    Hiện tại, ta đang đưa vào toàn bộ đối tượng,
  • 3:52 - 3:54
    nhưng ta chỉ cần đưa vào x và y thôi,
  • 3:54 - 3:59
    vì vậy ta cần có positions[i].x và positions[i].y.
  • 3:59 - 4:01
    Ta-dah!
  • 4:01 - 4:04
    Bây giờ ta có thể xóa chỗ mảng cũ này rồi.
  • 4:05 - 4:06
    Tuyệt vời!
  • 4:06 - 4:08
    Tôi thấy đẹp hơn nhiều rồi đấy,
  • 4:08 - 4:10
    mã dễ đọc hơn nhiều nữa,
  • 4:10 - 4:12
    cứ có mã dễ đọc hơn là tốt rồi.
  • 4:12 - 4:15
    Và ta cũng có thể thêm thắt dễ dàng hơn nữa,
  • 4:15 - 4:16
    nếu tôi muốn thêm,
  • 4:16 - 4:19
    tôi sẽ thêm luôn một cặp vào đây,
  • 4:19 - 4:23
    ta có thể nhập x 200, y 200,
  • 4:23 - 4:25
    cho một Winston nho nhỏ vào giữa đây.
  • 4:27 - 4:27
    Xong.
  • 4:27 - 4:31
    Bây giờ tôi muốn cho các bạn xem một thứ còn hay ho hơn nữa.
  • 4:31 - 4:34
    Hãy chú ý cách hàm của chúng ta tiếp nhận
  • 4:34 - 4:39
    rồi sử dụng 2 số.
  • 4:39 - 4:40
    Ta có thể thay đổi hàm
  • 4:40 - 4:42
    để nó tiếp nhận đối tượng,
  • 4:42 - 4:45
    rồi ta lấy x và y từ đối tượng đó.
  • 4:45 - 4:49
    Điều đó có nghĩa là ta có thể đưa vào đối tượng ở dưới đây.
  • 4:49 - 4:50
    Ta cùng thử nhé.
  • 4:50 - 4:54
    Ta đưa vào một đối tượng, nó hỏng rồi.
  • 4:54 - 4:57
    Đó là bởi hàm của ta cần 2 đối tượng,
  • 4:57 - 4:59
    mà ta lại chỉ đưa vào 1.
  • 4:59 - 5:02
    Vì thế ta sẽ đổi thành facePosition.
  • 5:02 - 5:06
    Bây giờ ta lại nhận được một lỗi có nội dung faceX is not defined
  • 5:06 - 5:10
    vì trước đó, ta đưa vào faceX dưới dạng đối số
  • 5:10 - 5:12
    nhưng lúc này nó không tồn tại.
  • 5:12 - 5:14
    Ta chỉ đang đưa vào một đối tượng, vì vậy ta có thể
  • 5:14 - 5:18
    lưu vị trí x
  • 5:18 - 5:21
    từ một đối tượng trong biến faceX,
  • 5:21 - 5:23
    và ta nghĩ, “Được rồi, mình có đối tượng này.
  • 5:23 - 5:25
    Mình biết đối tượng này có thuộc tính x,
  • 5:25 - 5:28
    vì vậy mình sẽ lưu nó vào biến faceX.”
  • 5:28 - 5:30
    Sau đó ta có thể thực hiện tương tự với y,
  • 5:30 - 5:33
    như vậy faceY = facePosition.y.
  • 5:33 - 5:34
    Ta-dah!
  • 5:34 - 5:38
    Và cuối cùng là phần còn lại của hàm sử dụng faceX và faceY.
  • 5:38 - 5:40
    Bây giờ ta phải đảm bảo đã nhập đúng chính tả.
  • 5:40 - 5:42
    Nếu nhập xx, chương trình sẽ không hoạt động
  • 5:42 - 5:44
    vì đó không phải thứ trong mảng đối tượng
  • 5:44 - 5:46
    mà ta đã đưa vào,
  • 5:46 - 5:48
    vì vậy ta phải nhập thật chính xác.
  • 5:48 - 5:50
    NBây giờ khá gọn gàng rồi đấy,
  • 5:50 - 5:52
    ta có thể có mảng đối tượng,
  • 5:52 - 5:54
    có các hàm nhận đối tượng,
  • 5:54 - 5:57
    và các bạn sẽ thấy rằng chương trình của chúng ta
  • 5:57 - 5:59
    sẽ rất hiệu quả với lối
  • 5:59 - 6:00
    cấu trúc dữ liệu này.
  • 6:00 - 6:02
    Ngoài ra vì ta thường muốn
  • 6:02 - 6:05
    ghép cặp x và y với nhau, tôi nghĩ các bạn sẽ thấy
  • 6:05 - 6:07
    chúng đặc biệt hữu ích cho tất cả
  • 6:07 - 6:09
    những chương trình liên quan đến vẽ và hoạt họa.
  • 6:09 - 0:00
    Chúc các bạn vui vẻ.
Title:
Arrays of Objects (Video Version)
Description:

more » « less
Video Language:
English
Duration:
06:12

Vietnamese subtitles

Incomplete

Revisions