Tại đây, bạn sẽ nhận được tài liệu cho các khóa học và hướng dẫn liên quan đến CNTT và ngôn ngữ JavaScript trên máy tính. Các tài liệu mà bạn sẽ nhận được các tệp PDF, DOC, PPT, RAR và ZIP là JavaScript, nút. js, jquery, angularjs và nhiều thứ khác. Vì những hướng dẫn này được bao gồm trong nhiều lịch trình học tập, bạn sẽ cần có thông tin chi tiết về chúng. Vì bạn không thể duyệt web cho mọi chủ đề nhỏ, bạn có thể tải xuống các tệp PDF để dễ dàng truy cập thông tin. Ngoài ra, các hướng dẫn, bài tập đã sửa và công việc thực tế sẽ giúp bạn dễ dàng hiểu rõ mọi chủ đề
Về cơ bản nó có thể làm bất cứ điều gì. Nó phổ biến đến mức mọi thứ mới xuất hiện sẽ có một số loại tích hợp JavaScript vào một lúc nào đó
JavaScript là một ngôn ngữ lập trình được
- trình độ cao. nó cung cấp các bản tóm tắt cho phép bạn bỏ qua các chi tiết của máy nơi nó đang chạy. Nó tự động quản lý bộ nhớ bằng trình thu gom rác, vì vậy bạn có thể tập trung vào mã thay vì quản lý bộ nhớ như các ngôn ngữ khác như C sẽ cần và cung cấp nhiều cấu trúc cho phép bạn xử lý các biến và đối tượng mạnh mẽ
- năng động. trái ngược với các ngôn ngữ lập trình tĩnh, một ngôn ngữ động thực thi trong thời gian chạy nhiều thứ mà một ngôn ngữ tĩnh thực hiện tại thời điểm biên dịch. Điều này có ưu và nhược điểm, và nó cung cấp cho chúng tôi các tính năng mạnh mẽ như gõ động, liên kết trễ, phản chiếu, lập trình chức năng, thay đổi thời gian chạy đối tượng, bao đóng và hơn thế nữa. Đừng lo lắng nếu bạn không biết những điều đó - bạn sẽ biết tất cả chúng vào cuối khóa học
- gõ động. một biến không thực thi một loại. Bạn có thể gán lại bất kỳ loại nào cho một biến, chẳng hạn như gán một số nguyên cho một biến chứa chuỗi
- đánh máy lỏng lẻo. trái ngược với kiểu gõ mạnh, các ngôn ngữ được gõ lỏng lẻo [hoặc yếu] không thực thi loại đối tượng, cho phép linh hoạt hơn nhưng từ chối chúng tôi kiểm tra loại an toàn và loại [thứ mà TypeScript - được xây dựng trên JavaScript - cung cấp]
- thông dịch. nó thường được biết đến như một ngôn ngữ thông dịch, có nghĩa là nó không cần giai đoạn biên dịch trước khi chương trình có thể chạy, trái ngược với C, Java hoặc Go chẳng hạn. Trên thực tế, các trình duyệt biên dịch JavaScript trước khi thực thi nó, vì lý do hiệu suất, nhưng điều này là rõ ràng đối với bạn - không có bước bổ sung nào liên quan
- đa mô hình. ngôn ngữ không thực thi bất kỳ mô hình lập trình cụ thể nào, không giống như Java chẳng hạn, buộc phải sử dụng lập trình hướng đối tượng hoặc C buộc phải lập trình bắt buộc. Bạn có thể viết JavaScript bằng mô hình hướng đối tượng, sử dụng nguyên mẫu và cú pháp lớp mới [kể từ ES6]. Bạn có thể viết JavaScript theo kiểu lập trình chức năng, với các hàm hạng nhất hoặc thậm chí theo kiểu mệnh lệnh [giống như C]
Trong trường hợp bạn đang thắc mắc, JavaScript không liên quan gì đến Java, đó là một lựa chọn tên tồi nhưng chúng ta phải chung sống với nó
Tóm tắt sổ tay
- Một chút lịch sử
- Chỉ JavaScript
- Giới thiệu ngắn gọn về cú pháp của JavaScript
- dấu chấm phẩy
- giá trị
- Biến
- các loại
- Biểu thức
- nhà điều hành
- quy tắc ưu tiên
- Toán tử so sánh
- điều kiện
- Mảng
- Dây
- vòng lặp
- Chức năng
- chức năng mũi tên
- Các đối tượng
- Thuộc tính đối tượng
- phương pháp đối tượng
- Các lớp học
- Di sản
- Lập trình và gọi lại không đồng bộ
- lời hứa
- Không đồng bộ và đang chờ
- Phạm vi biến đổi
- Phần kết luận
Cập nhật. Giờ đây, bạn có thể nhận phiên bản PDF và ePub của Sổ tay JavaScript dành cho người mới bắt đầu này
Một chút lịch sử
Được tạo ra vào năm 1995, JavaScript đã trải qua một chặng đường rất dài kể từ những khởi đầu khiêm tốn của nó
Đó là ngôn ngữ kịch bản đầu tiên được các trình duyệt web hỗ trợ nguyên bản và nhờ đó, nó đã đạt được lợi thế cạnh tranh so với bất kỳ ngôn ngữ nào khác và ngày nay nó vẫn là ngôn ngữ kịch bản duy nhất mà chúng ta có thể sử dụng để xây dựng các Ứng dụng Web
Các ngôn ngữ khác tồn tại, nhưng tất cả đều phải biên dịch thành JavaScript - hoặc gần đây là WebAssembly, nhưng đây là một câu chuyện khác
Ban đầu, JavaScript không mạnh như ngày nay và nó chủ yếu được sử dụng cho các hình ảnh động lạ mắt và điều kỳ diệu vào thời điểm đó được gọi là Dynamic HTML
Với nhu cầu ngày càng tăng mà nền tảng web yêu cầu [và tiếp tục yêu cầu], JavaScript cũng có trách nhiệm phát triển, để đáp ứng nhu cầu của một trong những hệ sinh thái được sử dụng rộng rãi nhất trên thế giới
JavaScript hiện cũng được sử dụng rộng rãi bên ngoài trình duyệt. Sự trỗi dậy của Node. js trong vài năm qua đã mở khóa phát triển phụ trợ, từng là miền của Java, Ruby, Python, PHP và các ngôn ngữ phía máy chủ truyền thống hơn
JavaScript hiện cũng là ngôn ngữ cung cấp năng lượng cho cơ sở dữ liệu và nhiều ứng dụng khác, thậm chí có thể phát triển các ứng dụng nhúng, ứng dụng dành cho thiết bị di động, ứng dụng TV, v.v. Khởi đầu là một ngôn ngữ nhỏ bên trong trình duyệt hiện là ngôn ngữ phổ biến nhất trên thế giới
Chỉ JavaScript
Đôi khi thật khó để tách JavaScript khỏi các tính năng của môi trường mà nó được sử dụng
Ví dụ: dòng
Test
test
TEST
_test
Test1
$test
55 mà bạn có thể tìm thấy trong nhiều ví dụ về mã không phải là JavaScript. Thay vào đó, nó là một phần của thư viện API rộng lớn được cung cấp cho chúng tôi trong trình duyệtTheo cách tương tự, trên máy chủ, đôi khi khó có thể tách các tính năng của ngôn ngữ JavaScript khỏi các API do Node cung cấp. js
Là một tính năng cụ thể được cung cấp bởi React hoặc Vue?
Trong cuốn sách này tôi nói về JavaScript, ngôn ngữ
Không làm phức tạp quá trình học tập của bạn với những thứ bên ngoài nó và được cung cấp bởi các hệ sinh thái bên ngoài
Giới thiệu ngắn gọn về cú pháp của JavaScript
Trong phần giới thiệu nhỏ này, tôi muốn nói với bạn về 5 khái niệm
- khoảng trắng
- phân biệt chữ hoa chữ thường
- nghĩa đen
- định danh
- bình luận
khoảng trắng
JavaScript không coi khoảng trắng là có ý nghĩa. Khoảng cách và ngắt dòng có thể được thêm vào theo bất kỳ cách nào bạn muốn, ít nhất là trên lý thuyết
Trên thực tế, rất có thể bạn sẽ giữ một phong cách được xác định rõ ràng và tuân thủ những gì mọi người thường sử dụng, đồng thời thực thi điều này bằng cách sử dụng công cụ tạo kiểu tóc hoặc công cụ tạo kiểu chẳng hạn như Prettier
Ví dụ: tôi luôn sử dụng 2 ký tự khoảng trắng cho mỗi lần thụt đầu dòng
Trường hợp nhạy cảm
JavaScript phân biệt chữ hoa chữ thường. Một biến có tên
Test
test
TEST
_test
Test1
$test
56 khác với biến Test
test
TEST
_test
Test1
$test
57Điều tương tự cũng xảy ra với bất kỳ số nhận dạng nào
chữ
Chúng tôi xác định nghĩa đen là một giá trị được viết trong mã nguồn, ví dụ: một số, một chuỗi, một boolean hoặc các cấu trúc nâng cao hơn, như Object Literals hoặc Array Literals
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
định danh
Mã định danh là một chuỗi các ký tự có thể được sử dụng để xác định một biến, một hàm hoặc một đối tượng. Nó có thể bắt đầu bằng một chữ cái, ký hiệu đô la
Test
test
TEST
_test
Test1
$test
58 hoặc dấu gạch dưới Test
test
TEST
_test
Test1
$test
59 và có thể chứa các chữ số. Sử dụng Unicode, một chữ cái có thể là bất kỳ ký tự được phép nào, chẳng hạn như biểu tượng cảm xúc ?Test
test
TEST
_test
Test1
$test
Ký hiệu đô la thường được sử dụng để tham chiếu các phần tử DOM
Một số tên được dành riêng cho sử dụng nội bộ JavaScript và chúng tôi không thể sử dụng chúng làm số nhận dạng
Bình luận
Nhận xét là một trong những phần quan trọng nhất của bất kỳ chương trình nào, trong bất kỳ ngôn ngữ lập trình nào. Chúng quan trọng vì chúng cho phép chúng ta chú thích mã và thêm thông tin quan trọng mà người khác [hoặc chính chúng ta] đọc mã sẽ không có sẵn
Trong JavaScript, chúng ta có thể viết nhận xét trên một dòng bằng cách sử dụng
Test
test
TEST
_test
Test1
$test
60. Mọi thứ sau Test
test
TEST
_test
Test1
$test
60 không được trình thông dịch JavaScript coi là mãNhư thế này
// a comment
true //another comment
Một loại bình luận khác là bình luận nhiều dòng. Nó bắt đầu bằng
Test
test
TEST
_test
Test1
$test
62 và kết thúc bằng Test
test
TEST
_test
Test1
$test
63Mọi thứ ở giữa không được coi là mã
Test
test
TEST
_test
Test1
$test
2dấu chấm phẩy
Mỗi dòng trong chương trình JavaScript được kết thúc tùy chọn bằng dấu chấm phẩy
Tôi nói không bắt buộc, vì trình thông dịch JavaScript đủ thông minh để giới thiệu dấu chấm phẩy cho bạn
Trong hầu hết các trường hợp, bạn có thể bỏ hoàn toàn dấu chấm phẩy khỏi chương trình của mình mà không cần suy nghĩ về điều đó
Thực tế này là rất gây tranh cãi. Một số nhà phát triển sẽ luôn sử dụng dấu chấm phẩy, một số khác sẽ không bao giờ sử dụng dấu chấm phẩy và bạn sẽ luôn tìm thấy mã sử dụng dấu chấm phẩy và mã không
Sở thích cá nhân của tôi là tránh dấu chấm phẩy, vì vậy các ví dụ của tôi trong cuốn sách sẽ không bao gồm chúng
giá trị
Một chuỗi
Test
test
TEST
_test
Test1
$test
64 là một giá trị. Một số như
Test
test
TEST
_test
Test1
$test
65 là một giá trị. Test
test
TEST
_test
Test1
$test
64 và Test
test
TEST
_test
Test1
$test
65 là các giá trị. Test
test
TEST
_test
Test1
$test
68 và Test
test
TEST
_test
Test1
$test
69 là các loại giá trị đóLoại là loại giá trị, danh mục của nó. Chúng tôi có nhiều loại khác nhau trong JavaScript và chúng tôi sẽ nói chi tiết về chúng sau. Mỗi loại có đặc điểm riêng
Khi cần tham chiếu đến một giá trị, chúng ta gán giá trị đó cho một biến.
Biến có thể có tên và giá trị là những gì được lưu trữ trong biến, vì vậy sau này chúng ta có thể truy cập giá trị đó thông qua tên biến.
Biến
Biến là một giá trị được gán cho một định danh, vì vậy bạn có thể tham khảo và sử dụng nó sau này trong chương trình
Điều này là do JavaScript được gõ lỏng lẻo, một khái niệm mà bạn thường nghe nói đến
Một biến phải được khai báo trước khi bạn có thể sử dụng nó
Chúng ta có 2 cách chính để khai báo biến. Đầu tiên là sử dụng
Test
test
TEST
_test
Test1
$test
70Test
test
TEST
_test
Test1
$test
0Cách thứ hai là sử dụng
Test
test
TEST
_test
Test1
$test
71Test
test
TEST
_test
Test1
$test
2Có gì khác biệt?
Test
test
TEST
_test
Test1
$test
70 định nghĩa một hằng số tham chiếu đến một giá trị. Điều này có nghĩa là tham chiếu không thể thay đổi. Bạn không thể gán lại một giá trị mới cho nóSử dụng
Test
test
TEST
_test
Test1
$test
71 bạn có thể gán giá trị mới cho nóVí dụ, bạn không thể làm điều này
Test
test
TEST
_test
Test1
$test
5Bởi vì bạn sẽ gặp lỗi.
Test
test
TEST
_test
Test1
$test
74Mặt khác, bạn có thể làm điều đó bằng cách sử dụng
Test
test
TEST
_test
Test1
$test
71Test
test
TEST
_test
Test1
$test
8Test
test
TEST
_test
Test1
$test
70 không có nghĩa là "hằng số" theo cách mà một số ngôn ngữ khác như C có nghĩa là. Cụ thể, điều đó không có nghĩa là giá trị không thể thay đổi - điều đó có nghĩa là nó không thể được chỉ định lại. Nếu biến trỏ đến một đối tượng hoặc mảng [chúng ta sẽ tìm hiểu thêm về đối tượng và mảng sau] thì nội dung của đối tượng hoặc mảng có thể tự do thay đổiBiến
Test
test
TEST
_test
Test1
$test
70 phải được khởi tạo tại thời điểm khai báoTest
test
TEST
_test
Test1
$test
0nhưng các giá trị
Test
test
TEST
_test
Test1
$test
71 có thể được khởi tạo sau5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
3Có thể khai báo nhiều biến cùng lúc trong cùng một câu lệnh
Test
test
TEST
_test
Test1
$test
0Nhưng bạn không thể khai báo lại cùng một biến nhiều lần
Test
test
TEST
_test
Test1
$test
1hoặc bạn sẽ gặp lỗi "khai báo trùng lặp"
Lời khuyên của tôi là luôn sử dụng
Test
test
TEST
_test
Test1
$test
70 và chỉ sử dụng Test
test
TEST
_test
Test1
$test
71 khi bạn biết mình sẽ cần gán lại giá trị cho biến đó. Tại sao? . Nếu chúng tôi biết một giá trị không thể được chỉ định lại, thì đó là một nguồn lỗi ít hơnBây giờ chúng ta đã thấy cách làm việc với ________ 070 và _______ 071, tôi muốn đề cập đến ________ 083
Cho đến năm 2015,
Test
test
TEST
_test
Test1
$test
83 là cách duy nhất chúng ta có thể khai báo một biến trong JavaScript. Ngày nay, một cơ sở mã hiện đại rất có thể sẽ chỉ sử dụng Test
test
TEST
_test
Test1
$test
70 và Test
test
TEST
_test
Test1
$test
71. Có một số khác biệt cơ bản mà tôi trình bày chi tiết trong bài đăng này nhưng nếu bạn mới bắt đầu, bạn có thể không quan tâm đến chúng. Chỉ cần sử dụng Test
test
TEST
_test
Test1
$test
70 và Test
test
TEST
_test
Test1
$test
71các loại
Các biến trong JavaScript không có bất kỳ loại nào được đính kèm
Chúng không được gõ
Khi bạn gán một giá trị với một số loại cho một biến, sau đó bạn có thể gán lại biến đó để lưu trữ một giá trị thuộc bất kỳ loại nào khác mà không gặp sự cố nào
Trong JavaScript, chúng tôi có 2 loại chính. kiểu nguyên thủy và kiểu đối tượng
các loại nguyên thủy
Các loại nguyên thủy là
- con số
- dây
- booleans
- biểu tượng
Và hai loại đặc biệt.
Test
test
TEST
_test
Test1
$test
89 và Test
test
TEST
_test
Test1
$test
90các loại đối tượng
Bất kỳ giá trị nào không thuộc kiểu nguyên thủy [chuỗi, số, boolean, null hoặc không xác định] đều là một đối tượng
Các loại đối tượng có các thuộc tính và cũng có các phương thức có thể hoạt động trên các thuộc tính đó
Chúng ta sẽ nói nhiều hơn về các đối tượng sau
Biểu thức
Một biểu thức là một đơn vị mã JavaScript duy nhất mà công cụ JavaScript có thể đánh giá và trả về một giá trị
Biểu thức có thể khác nhau về độ phức tạp
Chúng tôi bắt đầu từ những cái rất đơn giản, được gọi là biểu thức chính
Test
test
TEST
_test
Test1
$test
2Biểu thức số học là biểu thức nhận một biến và một toán tử [sớm nói thêm về toán tử] và cho kết quả là một số
Test
test
TEST
_test
Test1
$test
3Biểu thức chuỗi là biểu thức dẫn đến một chuỗi
Test
test
TEST
_test
Test1
$test
4Các biểu thức logic sử dụng các toán tử logic và phân giải thành một giá trị boolean
Test
test
TEST
_test
Test1
$test
5Các biểu thức nâng cao hơn liên quan đến các đối tượng, hàm và mảng và tôi sẽ giới thiệu chúng sau
nhà điều hành
Toán tử cho phép bạn lấy hai biểu thức đơn giản và kết hợp chúng để tạo thành một biểu thức phức tạp hơn
Chúng ta có thể phân loại toán tử dựa trên toán hạng mà chúng làm việc với. Một số toán tử làm việc với 1 toán hạng. Hầu hết làm việc với 2 toán hạng. Chỉ một toán tử hoạt động với 3 toán hạng
Trong phần giới thiệu đầu tiên về toán tử này, chúng tôi sẽ giới thiệu các toán tử mà bạn có thể quen thuộc nhất. toán tử có 2 toán hạng
Tôi đã giới thiệu một cái khi nói về các biến. toán tử gán
Test
test
TEST
_test
Test1
$test
91. Bạn sử dụng Test
test
TEST
_test
Test1
$test
91 để gán giá trị cho một biếnTest
test
TEST
_test
Test1
$test
6Bây giờ chúng ta hãy giới thiệu một tập hợp các toán tử nhị phân khác mà bạn đã quen thuộc với toán học cơ bản
Toán tử cộng [+]
Test
test
TEST
_test
Test1
$test
7Toán tử
Test
test
TEST
_test
Test1
$test
93 cũng thực hiện nối chuỗi nếu bạn sử dụng chuỗi, vì vậy hãy chú ýTest
test
TEST
_test
Test1
$test
8Toán tử trừ [-]
Test
test
TEST
_test
Test1
$test
9Toán tử chia [/]
Trả về thương của toán tử thứ nhất và toán tử thứ hai
// a comment
true //another comment
0Nếu bạn chia cho 0, JavaScript sẽ không gây ra bất kỳ lỗi nào nhưng trả về giá trị
Test
test
TEST
_test
Test1
$test
94 [hoặc Test
test
TEST
_test
Test1
$test
95 nếu giá trị âm]// a comment
true //another comment
1Toán tử còn lại [%]
Phần còn lại là một phép tính rất hữu ích trong nhiều trường hợp sử dụng
// a comment
true //another comment
2Phần còn lại bằng 0 luôn là
Test
test
TEST
_test
Test1
$test
96, một giá trị đặc biệt có nghĩa là "Không phải là số"// a comment
true //another comment
3Toán tử nhân [*]
Nhân hai số
// a comment
true //another comment
4Toán tử lũy thừa [**]
Nâng toán hạng thứ nhất lên lũy thừa của toán hạng thứ hai
// a comment
true //another comment
5quy tắc ưu tiên
Mọi câu lệnh phức tạp có nhiều toán tử trên cùng một dòng sẽ đưa ra các vấn đề về quyền ưu tiên
Lấy ví dụ này
// a comment
true //another comment
6Kết quả là 2. 5, nhưng tại sao?
Thao tác nào được thực hiện trước và thao tác nào cần đợi?
Một số thao tác được ưu tiên hơn các thao tác khác. Các quy tắc ưu tiên được liệt kê trong bảng này
Toán tửMô tảTest
test
TEST
_test
Test1
$test
97 Test
test
TEST
_test
Test1
$test
98 Test
test
TEST
_test
Test1
$test
99nhân/chiaTest
test
TEST
_test
Test1
$test
93 // a comment
true //another comment
01cộng/trừTest
test
TEST
_test
Test1
$test
91bài tậpCác hoạt động ở cùng cấp độ [như
Test
test
TEST
_test
Test1
$test
93 và // a comment
true //another comment
01] được thực hiện theo thứ tự chúng được tìm thấy, từ trái sang phảiTheo các quy tắc này, hoạt động trên có thể được giải quyết theo cách này
// a comment
true //another comment
7Toán tử so sánh
Sau toán tử gán và toán học, nhóm toán tử thứ ba tôi muốn giới thiệu là toán tử điều kiện
Bạn có thể sử dụng các toán tử sau để so sánh hai số hoặc hai chuỗi
Các toán tử so sánh luôn trả về một giá trị boolean, một giá trị là
// a comment
true //another comment
05 hoặc // a comment
true //another comment
06]Đó là những toán tử so sánh bất đẳng thức
07 có nghĩa là "ít hơn"// a comment true //another comment
08 có nghĩa là "nhỏ hơn hoặc bằng"// a comment true //another comment
09 có nghĩa là "lớn hơn"// a comment true //another comment
10 có nghĩa là "lớn hơn hoặc bằng"// a comment true //another comment
Ví dụ
// a comment
true //another comment
8Ngoài những thứ đó, chúng ta có 4 toán tử đẳng thức. Chúng chấp nhận hai giá trị và trả về một giá trị boolean
11 kiểm tra sự bình đẳng// a comment true //another comment
12 kiểm tra sự bất bình đẳng// a comment true //another comment
Lưu ý rằng chúng tôi cũng có
// a comment
true //another comment
13 và // a comment
true //another comment
14 trong JavaScript, nhưng tôi thực sự khuyên bạn chỉ nên sử dụng // a comment
true //another comment
11 và // a comment
true //another comment
12 vì chúng có thể ngăn ngừa một số sự cố tinh viđiều kiện
Với các toán tử so sánh tại chỗ, chúng ta có thể nói về điều kiện
Một câu lệnh
// a comment
true //another comment
17 được sử dụng để làm cho chương trình đi theo một lộ trình hoặc một lộ trình khác, tùy thuộc vào kết quả của một đánh giá biểu thứcĐây là ví dụ đơn giản nhất, luôn thực thi
// a comment
true //another comment
9ngược lại, điều này không bao giờ được thực hiện
Test
test
TEST
_test
Test1
$test
20Điều kiện kiểm tra biểu thức bạn truyền cho nó để biết giá trị đúng hay sai. Nếu bạn chuyển một số, số đó luôn có giá trị đúng trừ khi nó bằng 0. Nếu bạn chuyển một chuỗi, nó luôn luôn đánh giá là đúng trừ khi đó là một chuỗi rỗng. Đó là những quy tắc chung của việc truyền các loại thành boolean
Bạn có nhận thấy các dấu ngoặc nhọn?
Một khối có thể được đặt bất cứ nơi nào bạn có thể có một câu lệnh. Và nếu bạn có một câu lệnh duy nhất để thực hiện sau các điều kiện, bạn có thể bỏ qua khối và chỉ cần viết câu lệnh
Test
test
TEST
_test
Test1
$test
21Nhưng tôi luôn thích sử dụng dấu ngoặc nhọn để rõ ràng hơn
Bạn có thể cung cấp phần thứ hai cho câu lệnh
// a comment
true //another comment
17. // a comment
true //another comment
19Bạn đính kèm một câu lệnh sẽ được thực hiện nếu điều kiện
// a comment
true //another comment
17 là saiTest
test
TEST
_test
Test1
$test
22Vì
// a comment
true //another comment
19 chấp nhận một câu lệnh nên bạn có thể lồng một câu lệnh if/else khác bên trong nóTest
test
TEST
_test
Test1
$test
23Mảng
Mảng là tập hợp các phần tử
Mảng trong JavaScript không phải là một kiểu riêng
Mảng là đối tượng
Chúng ta có thể khởi tạo một mảng trống theo 2 cách khác nhau
Test
test
TEST
_test
Test1
$test
24Đầu tiên là sử dụng cú pháp mảng chữ. Cái thứ hai sử dụng hàm tích hợp Array
Bạn có thể điền trước mảng bằng cú pháp này
Test
test
TEST
_test
Test1
$test
25Một mảng có thể chứa bất kỳ giá trị nào, kể cả các giá trị thuộc các kiểu khác nhau
Test
test
TEST
_test
Test1
$test
26Vì ta có thể thêm mảng vào mảng nên ta có thể tạo mảng nhiều chiều, mảng này có những ứng dụng rất hữu ích [e. g. một ma trận]
Test
test
TEST
_test
Test1
$test
27Bạn có thể truy cập bất kỳ phần tử nào của mảng bằng cách tham chiếu chỉ mục của nó, bắt đầu từ số không
Test
test
TEST
_test
Test1
$test
28Bạn có thể khởi tạo một mảng mới với một tập hợp các giá trị bằng cú pháp này, cú pháp này trước tiên sẽ khởi tạo một mảng gồm 12 phần tử và điền vào mỗi phần tử một số
// a comment
true //another comment
22Test
test
TEST
_test
Test1
$test
29Bạn có thể lấy số phần tử trong mảng bằng cách kiểm tra thuộc tính
// a comment
true //another comment
23 của nóTest
test
TEST
_test
Test1
$test
00Lưu ý rằng bạn có thể đặt độ dài của mảng. Nếu bạn gán một số lớn hơn dung lượng hiện tại của mảng, sẽ không có gì xảy ra. Nếu gán số nhỏ hơn thì mảng bị cắt tại vị trí đó
Test
test
TEST
_test
Test1
$test
01Cách thêm một mục vào một mảng
Chúng ta có thể thêm một phần tử vào cuối mảng bằng phương thức
// a comment
true //another comment
24Test
test
TEST
_test
Test1
$test
02Chúng ta có thể thêm một phần tử vào đầu mảng bằng phương thức
// a comment
true //another comment
25Test
test
TEST
_test
Test1
$test
03Cách xóa một mục khỏi mảng
Chúng ta có thể xóa một phần tử ở cuối mảng bằng phương thức
// a comment
true //another comment
26Test
test
TEST
_test
Test1
$test
04Chúng ta có thể xóa một mục khỏi đầu mảng bằng phương thức
// a comment
true //another comment
27Test
test
TEST
_test
Test1
$test
05Cách nối hai hoặc nhiều mảng
Bạn có thể tham gia nhiều mảng bằng cách sử dụng
// a comment
true //another comment
28Test
test
TEST
_test
Test1
$test
06Bạn cũng có thể sử dụng toán tử trải rộng [
// a comment
true //another comment
29] theo cách nàyTest
test
TEST
_test
Test1
$test
07Cách tìm một mục cụ thể trong mảng
Bạn có thể sử dụng phương pháp
// a comment
true //another comment
30 của một mảngTest
test
TEST
_test
Test1
$test
08Trả về mục đầu tiên trả về true và trả về
Test
test
TEST
_test
Test1
$test
90 nếu không tìm thấy phần tửMột cú pháp thường được sử dụng là
Test
test
TEST
_test
Test1
$test
09Dòng trên sẽ trả về phần tử đầu tiên trong mảng có
// a comment
true //another comment
32// a comment
true //another comment
33 hoạt động tương tự như // a comment
true //another comment
30, nhưng trả về chỉ mục của mục đầu tiên trả về true và nếu không tìm thấy, nó sẽ trả về Test
test
TEST
_test
Test1
$test
90Test
test
TEST
_test
Test1
$test
20Một phương pháp khác là
// a comment
true //another comment
36Test
test
TEST
_test
Test1
$test
21Trả về true nếu
// a comment
true //another comment
37 chứa // a comment
true //another comment
38Test
test
TEST
_test
Test1
$test
22Trả về true nếu
// a comment
true //another comment
37 chứa // a comment
true //another comment
38 sau vị trí // a comment
true //another comment
41Dây
Xâu là một dãy các ký tự
Nó cũng có thể được định nghĩa là một chuỗi ký tự, được đặt trong dấu ngoặc kép hoặc dấu ngoặc kép
Test
test
TEST
_test
Test1
$test
23Cá nhân tôi luôn thích sử dụng dấu ngoặc đơn và chỉ sử dụng dấu ngoặc kép trong HTML để xác định thuộc tính
Bạn gán một giá trị chuỗi cho một biến như thế này
Test
test
TEST
_test
Test1
$test
24Bạn có thể xác định độ dài của một chuỗi bằng cách sử dụng thuộc tính
// a comment
true //another comment
23 của nóTest
test
TEST
_test
Test1
$test
25Đây là một chuỗi rỗng.
// a comment
true //another comment
43. Thuộc tính độ dài của nó là 0Test
test
TEST
_test
Test1
$test
26Hai chuỗi có thể được nối bằng toán tử
Test
test
TEST
_test
Test1
$test
93Test
test
TEST
_test
Test1
$test
27Bạn có thể sử dụng toán tử
Test
test
TEST
_test
Test1
$test
93 để nội suy các biếnTest
test
TEST
_test
Test1
$test
28Một cách khác để xác định chuỗi là sử dụng chữ mẫu, được xác định bên trong backticks. Chúng đặc biệt hữu ích để tạo chuỗi nhiều dòng đơn giản hơn nhiều. Với dấu ngoặc đơn hoặc dấu ngoặc kép, bạn không thể dễ dàng xác định chuỗi nhiều dòng - bạn cần sử dụng các ký tự thoát
Khi một mẫu chữ được mở bằng backtick, bạn chỉ cần nhấn enter để tạo một dòng mới, không có ký tự đặc biệt và nó được hiển thị nguyên trạng
Test
test
TEST
_test
Test1
$test
29Mẫu chữ cũng rất tuyệt vì chúng cung cấp một cách dễ dàng để nội suy các biến và biểu thức thành chuỗi
Bạn làm như vậy bằng cách sử dụng cú pháp
// a comment
true //another comment
46Test
test
TEST
_test
Test1
$test
50bên trong
// a comment
true //another comment
47, bạn có thể thêm bất cứ thứ gì, kể cả các biểu thứcTest
test
TEST
_test
Test1
$test
51vòng lặp
Vòng lặp là một trong những cấu trúc điều khiển chính của JavaScript
Với một vòng lặp, chúng ta có thể tự động hóa và lặp lại một khối mã bất kể chúng ta muốn nó chạy bao nhiêu lần, thậm chí là vô thời hạn
JavaScript cung cấp nhiều cách để lặp qua các vòng lặp
Tôi muốn tập trung vào 3 cách
- vòng lặp while
- cho các vòng lặp
- vì. vòng lặp
// a comment
true //another comment
48
// a comment
true //another comment
Vòng lặp while là cấu trúc lặp đơn giản nhất mà JavaScript cung cấp cho chúng ta
Chúng tôi thêm một điều kiện sau từ khóa
// a comment
true //another comment
48 và chúng tôi cung cấp một khối được chạy cho đến khi điều kiện ước tính thành // a comment
true //another comment
05Ví dụ
Test
test
TEST
_test
Test1
$test
52Bạn có thể ngắt vòng lặp
// a comment
true //another comment
48 bằng từ khóa // a comment
true //another comment
52, như thế nàyTest
test
TEST
_test
Test1
$test
53và nếu bạn quyết định rằng giữa một vòng lặp, bạn muốn bỏ qua bước lặp hiện tại, bạn có thể chuyển sang bước lặp tiếp theo bằng cách sử dụng
// a comment
true //another comment
53Test
test
TEST
_test
Test1
$test
54Rất giống với
// a comment
true //another comment
48, chúng ta có các vòng lặp // a comment
true //another comment
55. Về cơ bản, nó giống như // a comment
true //another comment
48, ngoại trừ điều kiện được đánh giá sau khi khối mã được thực thiĐiều này có nghĩa là khối luôn được thực thi ít nhất một lần
Ví dụ
Test
test
TEST
_test
Test1
$test
55// a comment
true //another comment
57
// a comment
true //another comment
Cấu trúc vòng lặp rất quan trọng thứ hai trong JavaScript là vòng lặp for
Chúng tôi sử dụng từ khóa
// a comment
true //another comment
57 và chúng tôi chuyển một bộ 3 hướng dẫn. phần khởi tạo, điều kiện và phần gia tăngVí dụ
Test
test
TEST
_test
Test1
$test
56Giống như với vòng lặp
// a comment
true //another comment
48, bạn có thể ngắt vòng lặp // a comment
true //another comment
57 bằng cách sử dụng // a comment
true //another comment
52 và bạn có thể tua nhanh tới lần lặp tiếp theo của vòng lặp // a comment
true //another comment
57 bằng cách sử dụng // a comment
true //another comment
53// a comment
true //another comment
64
// a comment
true //another comment
Vòng lặp này tương đối gần đây [được giới thiệu vào năm 2015] và là phiên bản đơn giản hóa của vòng lặp
// a comment
true //another comment
57Test
test
TEST
_test
Test1
$test
57Chức năng
Trong bất kỳ chương trình JavaScript phức tạp vừa phải nào, mọi thứ xảy ra bên trong các hàm
Các chức năng là một phần cốt lõi, thiết yếu của JavaScript
Hàm là gì?
Một chức năng là một khối mã, độc lập
Đây là một khai báo chức năng
Test
test
TEST
_test
Test1
$test
58Một chức năng có thể được chạy bất cứ lúc nào bạn muốn bằng cách gọi nó, như thế này
Test
test
TEST
_test
Test1
$test
59Một hàm có thể có một hoặc nhiều đối số
Test
test
TEST
_test
Test1
$test
80Khi chúng ta có thể truyền một đối số, chúng ta gọi hàm truyền tham số
Test
test
TEST
_test
Test1
$test
81Lưu ý rằng trong lần gọi thứ hai, tôi đã chuyển tham số chuỗi
// a comment
true //another comment
66 làm đối số // a comment
true //another comment
67, nhưng không có // a comment
true //another comment
68. Trong trường hợp này, // a comment
true //another comment
68 bên trong hàm là Test
test
TEST
_test
Test1
$test
90Chúng ta có thể kiểm tra xem một giá trị có phải là không xác định hay không bằng cách sử dụng điều kiện này
Test
test
TEST
_test
Test1
$test
82// a comment
true //another comment
71 là toán tử một ngôi cho phép chúng ta kiểm tra kiểu của một biếnBạn cũng có thể kiểm tra theo cách này
Test
test
TEST
_test
Test1
$test
83Mặc dù điều kiện cũng sẽ đúng nếu
// a comment
true //another comment
68 là Test
test
TEST
_test
Test1
$test
89, // a comment
true //another comment
22 hoặc một chuỗi rỗngBạn có thể có các giá trị mặc định cho các tham số, trong trường hợp chúng không được thông qua
Test
test
TEST
_test
Test1
$test
84Bạn có thể chuyển bất kỳ giá trị nào dưới dạng tham số. số, chuỗi, booleans, mảng, đối tượng và cả hàm
Hàm có giá trị trả về. Theo mặc định, hàm trả về
Test
test
TEST
_test
Test1
$test
90, trừ khi bạn thêm từ khóa // a comment
true //another comment
76 có giá trịTest
test
TEST
_test
Test1
$test
85Chúng ta có thể gán giá trị trả về này cho một biến khi gọi hàm
Test
test
TEST
_test
Test1
$test
86// a comment
true //another comment
77 hiện giữ một chuỗi có giá trị // a comment
true //another comment
78Bạn chỉ có thể trả về một giá trị
Để trả về nhiều giá trị, bạn có thể trả về một đối tượng hoặc một mảng như thế này
Test
test
TEST
_test
Test1
$test
87Các hàm có thể được định nghĩa bên trong các hàm khác
Test
test
TEST
_test
Test1
$test
88Hàm lồng nhau không thể được gọi từ bên ngoài hàm kèm theo
Bạn cũng có thể trả về một hàm từ một hàm
chức năng mũi tên
Các hàm mũi tên là phần giới thiệu gần đây về JavaScript
Chúng thường được sử dụng thay cho các hàm "thông thường", những hàm tôi đã mô tả trong chương trước. Bạn sẽ tìm thấy cả hai hình thức được sử dụng ở mọi nơi
Về mặt trực quan, chúng cho phép bạn viết các hàm với cú pháp ngắn hơn, từ
Test
test
TEST
_test
Test1
$test
89đến
Test
test
TEST
_test
Test1
$test
00Nhưng mà. lưu ý rằng chúng tôi không có tên ở đây
Các chức năng mũi tên là ẩn danh. Chúng ta phải gán chúng cho một biến
Chúng ta có thể gán một hàm thông thường cho một biến, như thế này
Test
test
TEST
_test
Test1
$test
01Khi chúng tôi làm như vậy, chúng tôi có thể xóa tên khỏi chức năng
Test
test
TEST
_test
Test1
$test
02và gọi hàm bằng tên biến
Test
test
TEST
_test
Test1
$test
03Đó là điều tương tự chúng tôi làm với các chức năng mũi tên
Test
test
TEST
_test
Test1
$test
04Nếu thân hàm chỉ chứa một câu lệnh, bạn có thể bỏ qua dấu ngoặc đơn và viết mọi thứ trên một dòng
Test
test
TEST
_test
Test1
$test
05Các tham số được truyền trong ngoặc đơn
Test
test
TEST
_test
Test1
$test
06Nếu bạn có một [và chỉ một] tham số, bạn có thể bỏ hoàn toàn dấu ngoặc đơn
Test
test
TEST
_test
Test1
$test
07Các hàm mũi tên cho phép bạn trả về ẩn - các giá trị được trả về mà không cần phải sử dụng từ khóa
// a comment
true //another comment
76Nó hoạt động khi có câu lệnh một dòng trong thân hàm
Test
test
TEST
_test
Test1
$test
08Giống như các hàm thông thường, chúng ta có thể có các giá trị mặc định cho các tham số trong trường hợp chúng không được truyền
Test
test
TEST
_test
Test1
$test
09Và giống như các hàm thông thường, chúng ta chỉ có thể trả về một giá trị
Hàm mũi tên cũng có thể chứa các hàm mũi tên khác hoặc thậm chí là các hàm thông thường
Hai loại chức năng này rất giống nhau, vì vậy bạn có thể hỏi tại sao chức năng mũi tên lại được giới thiệu. Sự khác biệt lớn với các hàm thông thường là khi chúng được sử dụng làm phương thức đối tượng. Đây là điều chúng tôi sẽ sớm xem xét
Các đối tượng
Bất kỳ giá trị nào không thuộc kiểu nguyên thủy [chuỗi, số, boolean, ký hiệu, null hoặc không xác định] đều là đối tượng
Đây là cách chúng ta định nghĩa một đối tượng
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
30Đây là cú pháp theo nghĩa đen của đối tượng, là một trong những điều thú vị nhất trong JavaScript
Bạn cũng có thể sử dụng cú pháp
// a comment
true //another comment
805
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
31Một cú pháp khác là sử dụng
// a comment
true //another comment
815
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
32Bạn cũng có thể khởi tạo một đối tượng bằng cách sử dụng từ khóa
// a comment
true //another comment
82 trước một hàm có chữ in hoa. Hàm này đóng vai trò là hàm tạo cho đối tượng đó. Trong đó, chúng ta có thể khởi tạo các đối số mà chúng ta nhận được dưới dạng tham số, để thiết lập trạng thái ban đầu của đối tượng5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
33Chúng tôi khởi tạo một đối tượng mới bằng cách sử dụng
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
34Các đối tượng luôn được truyền theo tham chiếu
Nếu bạn gán một biến có cùng giá trị với biến khác, nếu đó là kiểu nguyên thủy như số hoặc chuỗi, chúng sẽ được truyền theo giá trị
Lấy ví dụ này
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
355
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
36Ngay cả các mảng hoặc hàm, về bản chất, cũng là các đối tượng, vì vậy điều rất quan trọng là phải hiểu cách chúng hoạt động
Thuộc tính đối tượng
Các đối tượng có các thuộc tính, được tạo bởi một nhãn được liên kết với một giá trị
Giá trị của một thuộc tính có thể thuộc bất kỳ kiểu nào, có nghĩa là nó có thể là một mảng, một hàm và thậm chí nó có thể là một đối tượng, vì các đối tượng có thể lồng các đối tượng khác
Đây là cú pháp nghĩa đen của đối tượng mà chúng ta đã thấy trong chương trước
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
30Chúng ta có thể định nghĩa thuộc tính
// a comment
true //another comment
67 theo cách này5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
38Ở đây chúng ta có một đối tượng
// a comment
true //another comment
84 với thuộc tính có tên là // a comment
true //another comment
67, với giá trị // a comment
true //another comment
86Nhãn có thể là bất kỳ chuỗi nào, nhưng hãy cẩn thận với các ký tự đặc biệt - nếu tôi muốn bao gồm một ký tự không hợp lệ làm tên biến trong tên thuộc tính, tôi sẽ phải sử dụng dấu ngoặc kép xung quanh ký tự đó
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
39Các ký tự tên biến không hợp lệ bao gồm khoảng trắng, dấu gạch nối và các ký tự đặc biệt khác
Như bạn có thể thấy, khi chúng tôi có nhiều thuộc tính, chúng tôi sẽ phân tách từng thuộc tính bằng dấu phẩy
Chúng ta có thể truy xuất giá trị của một thuộc tính bằng 2 cú pháp khác nhau
Đầu tiên là ký hiệu dấu chấm
Test
test
TEST
_test
Test1
$test
00Cách thứ hai [là cách duy nhất chúng ta có thể sử dụng cho các thuộc tính có tên không hợp lệ], là sử dụng dấu ngoặc vuông
Test
test
TEST
_test
Test1
$test
01Nếu bạn truy cập một thuộc tính không tồn tại, bạn sẽ nhận được giá trị
Test
test
TEST
_test
Test1
$test
90Test
test
TEST
_test
Test1
$test
02Như đã đề cập trước đây, các đối tượng có thể có các đối tượng lồng nhau làm thuộc tính
Test
test
TEST
_test
Test1
$test
03Trong ví dụ này, bạn có thể truy cập tên thương hiệu bằng cách sử dụng
Test
test
TEST
_test
Test1
$test
04hoặc
Test
test
TEST
_test
Test1
$test
05Bạn có thể đặt giá trị của một thuộc tính khi bạn xác định đối tượng
Nhưng bạn luôn có thể cập nhật nó sau này
Test
test
TEST
_test
Test1
$test
06Và bạn cũng có thể thêm các thuộc tính mới vào một đối tượng
Test
test
TEST
_test
Test1
$test
07Cho đối tượng
Test
test
TEST
_test
Test1
$test
08bạn có thể xóa một thuộc tính khỏi đối tượng này bằng cách sử dụng
Test
test
TEST
_test
Test1
$test
09phương pháp đối tượng
Tôi đã nói về chức năng trong một chương trước
Các chức năng có thể được gán cho một thuộc tính chức năng và trong trường hợp này, chúng được gọi là các phương thức
Trong ví dụ này, thuộc tính
// a comment
true //another comment
88 được gán một chức năng và chúng ta có thể gọi nó bằng cách sử dụng cú pháp dấu chấm mà chúng ta đã sử dụng cho các thuộc tính, với dấu ngoặc đơn ở cuốiTest
test
TEST
_test
Test1
$test
10Bên trong một phương thức được xác định bằng cú pháp
// a comment
true //another comment
89, chúng ta có quyền truy cập vào thể hiện đối tượng bằng cách tham chiếu // a comment
true //another comment
90Trong ví dụ sau, chúng tôi có quyền truy cập vào các giá trị thuộc tính
// a comment
true //another comment
91 và // a comment
true //another comment
92 bằng cách sử dụng // a comment
true //another comment
93 và // a comment
true //another comment
94Test
test
TEST
_test
Test1
$test
11Điều quan trọng cần lưu ý là sự khác biệt này giữa hàm thông thường và hàm mũi tên - chúng tôi không có quyền truy cập vào
// a comment
true //another comment
90 nếu chúng tôi sử dụng hàm mũi tênTest
test
TEST
_test
Test1
$test
12Điều này là do các hàm mũi tên không bị ràng buộc với đối tượng
Đây là lý do tại sao các hàm thông thường thường được sử dụng làm phương thức đối tượng
Các phương thức có thể chấp nhận các tham số, giống như các hàm thông thường
Test
test
TEST
_test
Test1
$test
13Các lớp học
Chúng ta đã nói về các đối tượng, đây là một trong những phần thú vị nhất của JavaScript
Trong chương này, chúng ta sẽ đi lên một cấp độ bằng cách giới thiệu các lớp
các lớp học là gì?
Hãy lấy một đối tượng người
Test
test
TEST
_test
Test1
$test
14Chúng ta có thể tạo một lớp có tên là
// a comment
true //another comment
96 [lưu ý viết hoa ____997, một quy ước khi sử dụng các lớp], có thuộc tính // a comment
true //another comment
98Test
test
TEST
_test
Test1
$test
15Bây giờ từ lớp này, chúng ta khởi tạo một đối tượng
// a comment
true //another comment
99 như thế nàyTest
test
TEST
_test
Test1
$test
16// a comment
true //another comment
99 được gọi là một thể hiện của lớp PersonChúng ta có thể đặt giá trị của thuộc tính
// a comment
true //another comment
98Test
test
TEST
_test
Test1
$test
17và chúng ta có thể truy cập nó bằng cách sử dụng
Test
test
TEST
_test
Test1
$test
18giống như chúng tôi làm cho các thuộc tính đối tượng
Các lớp có thể chứa các thuộc tính, như
// a comment
true //another comment
98 và các phương thứcCác phương thức được định nghĩa theo cách này
Test
test
TEST
_test
Test1
$test
19và chúng ta có thể gọi các phương thức trên một thể hiện của lớp
Test
test
TEST
_test
Test1
$test
20Có một phương thức đặc biệt gọi là
Test
test
TEST
_test
Test1
$test
203 mà chúng ta có thể sử dụng để khởi tạo các thuộc tính của lớp khi chúng ta tạo một thể hiện đối tượng mớiNó hoạt động như thế này
Test
test
TEST
_test
Test1
$test
21Lưu ý cách chúng tôi sử dụng
// a comment
true //another comment
90 để truy cập thể hiện đối tượngBây giờ chúng ta có thể khởi tạo một đối tượng mới từ lớp, truyền vào một chuỗi và khi chúng ta gọi
Test
test
TEST
_test
Test1
$test
64, chúng ta sẽ nhận được một thông báo được cá nhân hóaTest
test
TEST
_test
Test1
$test
22Khi đối tượng được khởi tạo, phương thức
Test
test
TEST
_test
Test1
$test
206 được gọi với bất kỳ tham số nào được truyềnThông thường các phương thức được định nghĩa trên thể hiện của đối tượng, không phải trên lớp
Thay vào đó, bạn có thể định nghĩa một phương thức là
Test
test
TEST
_test
Test1
$test
207 để cho phép nó được thực thi trên lớpTest
test
TEST
_test
Test1
$test
23Điều này rất hữu ích, đôi khi
Di sản
Một lớp có thể mở rộng một lớp khác và các đối tượng được khởi tạo bằng lớp đó kế thừa tất cả các phương thức của cả hai lớp
Giả sử chúng ta có một lớp
// a comment
true //another comment
96Test
test
TEST
_test
Test1
$test
24Chúng ta có thể định nghĩa một lớp mới,
Test
test
TEST
_test
Test1
$test
209, mở rộng // a comment
true //another comment
96Test
test
TEST
_test
Test1
$test
25Bây giờ nếu chúng ta khởi tạo một đối tượng mới với lớp
Test
test
TEST
_test
Test1
$test
209, thì nó có quyền truy cập vào phương thức Test
test
TEST
_test
Test1
$test
212Test
test
TEST
_test
Test1
$test
26Bên trong một lớp con, bạn có thể tham chiếu lớp cha bằng cách gọi
Test
test
TEST
_test
Test1
$test
213Test
test
TEST
_test
Test1
$test
27Chương trình trên in Xin chào, tôi là một người. Tôi cũng là một lập trình viên
Lập trình và gọi lại không đồng bộ
Hầu hết thời gian, mã JavaScript được chạy đồng bộ
Điều này có nghĩa là một dòng mã được thực thi, rồi dòng mã tiếp theo được thực thi, v.v.
Mọi thứ đều như bạn mong đợi và cách nó hoạt động trong hầu hết các ngôn ngữ lập trình
Tuy nhiên, có những lúc bạn không thể đợi một dòng mã thực thi
Bạn không thể đợi 2 giây để tải một tệp lớn và dừng hoàn toàn chương trình
Bạn không thể đợi tài nguyên mạng được tải xuống trước khi làm việc khác
JavaScript giải quyết vấn đề này bằng cách sử dụng lệnh gọi lại
Một trong những ví dụ đơn giản nhất về cách sử dụng gọi lại là với bộ tính giờ. Bộ hẹn giờ không phải là một phần của JavaScript, nhưng chúng được cung cấp bởi trình duyệt và Node. js. Hãy để tôi nói về một trong những đồng hồ hẹn giờ mà chúng ta có.
Test
test
TEST
_test
Test1
$test
214Hàm
Test
test
TEST
_test
Test1
$test
214 chấp nhận 2 đối số. một chức năng, và một số. Số là mili giây phải vượt qua trước khi chức năng được chạyVí dụ
Test
test
TEST
_test
Test1
$test
28Hàm chứa dòng
Test
test
TEST
_test
Test1
$test
216 sẽ được thực hiện sau 2 giâyNếu bạn thêm một
Test
test
TEST
_test
Test1
$test
217 trước chức năng và Test
test
TEST
_test
Test1
$test
218 sau nóTest
test
TEST
_test
Test1
$test
29Bạn sẽ thấy điều này xảy ra trong bảng điều khiển của mình
Test
test
TEST
_test
Test1
$test
30Chức năng gọi lại được thực thi không đồng bộ
Đây là một mẫu rất phổ biến khi làm việc với hệ thống tệp, mạng, sự kiện hoặc DOM trong trình duyệt
Tất cả những điều tôi đã đề cập không phải là JavaScript "cốt lõi", vì vậy chúng không được giải thích trong sổ tay này, nhưng bạn sẽ tìm thấy rất nhiều ví dụ trong các sổ tay khác của tôi có sẵn tại https. // flaviocopes. com
Đây là cách chúng tôi có thể triển khai các cuộc gọi lại trong mã của mình
Chúng tôi xác định một chức năng chấp nhận một tham số
Test
test
TEST
_test
Test1
$test
219, đó là một chức năngKhi mã đã sẵn sàng để gọi lại cuộc gọi, chúng tôi gọi nó bằng cách chuyển kết quả
Test
test
TEST
_test
Test1
$test
31Mã sử dụng chức năng này sẽ sử dụng nó như thế này
Test
test
TEST
_test
Test1
$test
32lời hứa
Lời hứa là một cách khác để xử lý mã không đồng bộ
Như chúng ta đã thấy trong chương trước, với các cuộc gọi lại, chúng ta sẽ chuyển một hàm cho một lệnh gọi hàm khác sẽ được gọi khi hàm đó xử lý xong
Như thế này
Test
test
TEST
_test
Test1
$test
32Khi mã
Test
test
TEST
_test
Test1
$test
220 kết thúc, nó gọi hàm nhận được dưới dạng tham sốTest
test
TEST
_test
Test1
$test
31Vấn đề chính với cách tiếp cận này là nếu chúng ta cần sử dụng kết quả của hàm này trong phần còn lại của mã, thì tất cả mã của chúng ta phải được lồng vào bên trong hàm gọi lại và nếu chúng ta phải thực hiện 2-3 lệnh gọi lại thì chúng ta sẽ nhập gì?
Test
test
TEST
_test
Test1
$test
35Lời hứa là một cách để giải quyết vấn đề này
thay vì làm
Test
test
TEST
_test
Test1
$test
32Chúng tôi gọi một chức năng dựa trên lời hứa theo cách này
Test
test
TEST
_test
Test1
$test
37Đầu tiên chúng ta gọi hàm, sau đó chúng ta có một phương thức
Test
test
TEST
_test
Test1
$test
221 được gọi khi hàm kết thúcViệc thụt lề không thành vấn đề, nhưng bạn sẽ thường sử dụng kiểu này cho rõ ràng
Việc phát hiện lỗi bằng phương pháp
Test
test
TEST
_test
Test1
$test
222 là phổ biếnTest
test
TEST
_test
Test1
$test
38Bây giờ, để có thể sử dụng cú pháp này, việc triển khai hàm
Test
test
TEST
_test
Test1
$test
220 phải đặc biệt một chút. Nó phải sử dụng Promises APIThay vì khai báo nó như một chức năng bình thường
Test
test
TEST
_test
Test1
$test
39Chúng tôi tuyên bố nó như một đối tượng lời hứa
Test
test
TEST
_test
Test1
$test
40và chúng tôi chuyển một hàm trong hàm tạo Promise
Test
test
TEST
_test
Test1
$test
41Hàm này nhận 2 tham số. Đầu tiên là chức năng chúng ta gọi để giải quyết lời hứa, chức năng thứ hai chúng ta gọi để từ chối lời hứa
Test
test
TEST
_test
Test1
$test
42Giải quyết một lời hứa có nghĩa là hoàn thành nó thành công [dẫn đến việc gọi phương thức
Test
test
TEST
_test
Test1
$test
221 trong bất kỳ cách nào sử dụng nó]Từ chối một lời hứa có nghĩa là kết thúc nó bằng một lỗi [dẫn đến việc gọi phương thức
Test
test
TEST
_test
Test1
$test
222 trong bất kỳ cách nào sử dụng nó]Đây là cách
Test
test
TEST
_test
Test1
$test
43Chúng ta có thể truyền tham số cho hàm giải quyết và từ chối, thuộc bất kỳ loại nào chúng ta muốn
Không đồng bộ và đang chờ
Các chức năng không đồng bộ là một mức độ trừu tượng cao hơn của các lời hứa
Hàm async trả về một lời hứa, như trong ví dụ này
Test
test
TEST
_test
Test1
$test
44Code nào muốn dùng hàm này thì dùng từ khóa
Test
test
TEST
_test
Test1
$test
226 ngay trước hàmTest
test
TEST
_test
Test1
$test
45và làm như vậy, bất kỳ dữ liệu nào được trả về bởi lời hứa sẽ được gán cho biến
Test
test
TEST
_test
Test1
$test
227Trong trường hợp của chúng tôi, dữ liệu là chuỗi "một số dữ liệu"
Với một cảnh báo cụ thể. bất cứ khi nào chúng ta sử dụng từ khóa
Test
test
TEST
_test
Test1
$test
226, chúng ta phải làm như vậy bên trong một hàm được định nghĩa là Test
test
TEST
_test
Test1
$test
229Như thế này
Test
test
TEST
_test
Test1
$test
46Bộ đôi async/await cho phép chúng ta có mã sạch hơn và mô hình tinh thần đơn giản để hoạt động với mã không đồng bộ
Như bạn có thể thấy trong ví dụ trên, mã của chúng tôi trông rất đơn giản. So sánh nó với mã bằng cách sử dụng lời hứa hoặc chức năng gọi lại
Và đây là một ví dụ rất đơn giản, những lợi ích chính sẽ phát sinh khi mã phức tạp hơn nhiều
Ví dụ: đây là cách bạn lấy tài nguyên JSON bằng cách sử dụng API Tìm nạp và phân tích cú pháp tài nguyên đó bằng cách sử dụng lời hứa
Test
test
TEST
_test
Test1
$test
47Và đây là chức năng tương tự được cung cấp bằng cách sử dụng await/async
Test
test
TEST
_test
Test1
$test
48Phạm vi biến đổi
Khi tôi giới thiệu các biến, tôi đã nói về việc sử dụng
Test
test
TEST
_test
Test1
$test
70, Test
test
TEST
_test
Test1
$test
71 và Test
test
TEST
_test
Test1
$test
83Phạm vi là tập hợp các biến hiển thị đối với một phần của chương trình
Trong JavaScript, chúng tôi có phạm vi toàn cầu, phạm vi khối và phạm vi chức năng
Nếu một biến được định nghĩa bên ngoài một hàm hoặc khối, thì nó được gắn vào đối tượng toàn cục và nó có phạm vi toàn cục, nghĩa là nó có sẵn trong mọi phần của chương trình
Có một sự khác biệt rất quan trọng giữa các khai báo
Test
test
TEST
_test
Test1
$test
83, Test
test
TEST
_test
Test1
$test
71 và Test
test
TEST
_test
Test1
$test
70Một biến được định nghĩa là
Test
test
TEST
_test
Test1
$test
83 bên trong một hàm chỉ hiển thị bên trong hàm đó, tương tự như đối số của hàmMặt khác, một biến được xác định là
Test
test
TEST
_test
Test1
$test
70 hoặc Test
test
TEST
_test
Test1
$test
71 chỉ hiển thị bên trong khối nơi nó được xác địnhMột khối là một tập hợp các hướng dẫn được nhóm thành một cặp dấu ngoặc nhọn, giống như các dấu ngoặc nhọn mà chúng ta có thể tìm thấy bên trong câu lệnh
// a comment
true //another comment
17, vòng lặp // a comment
true //another comment
57 hoặc hàmĐiều quan trọng là phải hiểu rằng một khối không xác định phạm vi mới cho
Test
test
TEST
_test
Test1
$test
83, nhưng nó xác định phạm vi cho Test
test
TEST
_test
Test1
$test
71 và Test
test
TEST
_test
Test1
$test
70Điều này có ý nghĩa rất thiết thực
Giả sử bạn định nghĩa một biến
Test
test
TEST
_test
Test1
$test
83 bên trong một điều kiện // a comment
true //another comment
17 trong một hàmTest
test
TEST
_test
Test1
$test
49Nếu bạn gọi chức năng này, bạn sẽ nhận được
Test
test
TEST
_test
Test1
$test
246 được in ra bàn điều khiểnNếu bạn cố gắng di chuyển bảng điều khiển. nhật ký [dữ liệu] sau
// a comment
true //another comment
17, nó vẫn hoạt độngTest
test
TEST
_test
Test1
$test
50Nhưng nếu bạn chuyển
Test
test
TEST
_test
Test1
$test
248 sang Test
test
TEST
_test
Test1
$test
249Test
test
TEST
_test
Test1
$test
51Bạn sẽ nhận được một lỗi.
Test
test
TEST
_test
Test1
$test
250Điều này là do
Test
test
TEST
_test
Test1
$test
83 có phạm vi chức năng và có một điều đặc biệt xảy ra ở đây được gọi là cẩu. Nói tóm lại, khai báo Test
test
TEST
_test
Test1
$test
83 được JavaScript chuyển lên đầu hàm gần nhất trước khi nó chạy mã. Đây là giao diện của chức năng đối với JS bên trong, ít nhiềuTest
test
TEST
_test
Test1
$test
52Đây là lý do tại sao bạn cũng có thể đặt
Test
test
TEST
_test
Test1
$test
253 ở đầu hàm, ngay cả trước khi hàm được khai báo và bạn sẽ nhận được giá trị Test
test
TEST
_test
Test1
$test
90 cho biến đóTest
test
TEST
_test
Test1
$test
53nhưng nếu bạn chuyển sang
Test
test
TEST
_test
Test1
$test
71, bạn sẽ gặp lỗi Test
test
TEST
_test
Test1
$test
250, vì việc nâng lên không xảy ra đối với khai báo Test
test
TEST
_test
Test1
$test
71Test
test
TEST
_test
Test1
$test
70 tuân theo các quy tắc giống như Test
test
TEST
_test
Test1
$test
71. nó nằm trong phạm vi khốiBan đầu có thể khó khăn, nhưng một khi bạn nhận ra sự khác biệt này, thì bạn sẽ thấy tại sao ngày nay
Test
test
TEST
_test
Test1
$test
83 bị coi là một phương pháp tồi so với Test
test
TEST
_test
Test1
$test
71 - chúng có ít bộ phận chuyển động hơn và phạm vi của chúng bị giới hạn trong khối, điều này cũng khiến chúng Test
test
TEST
_test
Test1
$test
54Khi bạn thoát khỏi vòng lặp,
// a comment
true //another comment
41 sẽ là một biến hợp lệ với giá trị 10Nếu bạn chuyển sang
Test
test
TEST
_test
Test1
$test
71, khi bạn cố gắng sang Test
test
TEST
_test
Test1
$test
264 sẽ dẫn đến lỗi Test
test
TEST
_test
Test1
$test
265Phần kết luận
Cảm ơn rất nhiều vì đã đọc cuốn sách này
Tôi hy vọng nó sẽ truyền cảm hứng cho bạn để tìm hiểu thêm về JavaScript
Để biết thêm về JavaScript, hãy xem blog của tôi flaviocopes. com
Ghi chú. Bạn có thể nhận phiên bản PDF và ePub của Sổ tay JavaScript dành cho người mới bắt đầu này
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Đọc thêm bài viết
Nếu bài viết này hữu ích, hãy tweet nó
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu