Nếu bạn muốn học React – hoặc bất kỳ khung JavaScript nào – trước tiên bạn cần hiểu các phương thức và khái niệm JavaScript cơ bản
Nếu không thì chẳng khác nào đứa trẻ học chạy trước khi học đi.
Nhiều developer chọn cách tiếp cận "learning as you go" khi học React. Nhưng điều này thường không mang lại năng suất mà thay vào đó, lỗ hổng kiến thức JavaScript của họ càng trầm trọng hơn. Cách tiếp cận này làm cho việc đồng hóa từng tính năng mới khó khăn gấp đôi [bạn có thể bắt đầu nhầm lẫn JavaScript với React]
React là một khung JavaScript để xây dựng giao diện người dùng dựa trên các thành phần UI. Tất cả mã của nó được viết bằng JavaScript, bao gồm cả phần đánh dấu HTML, được viết bằng JSX [điều này cho phép các nhà phát triển dễ dàng viết HTML và JavaScript cùng nhau]
Trong bài đăng này, chúng ta sẽ thực hiện một cách tiếp cận thực tế và xem xét tất cả các ý tưởng và kỹ thuật JS mà bạn cần nắm bắt trước khi học React
React được xây dựng bằng các tính năng JavaScript hiện đại, hầu hết được giới thiệu với ES2015. Vì vậy, về cơ bản đó là những gì chúng ta sẽ thảo luận trong bài viết này. Để giúp bạn học sâu hơn, tôi sẽ kết nối các liên kết riêng biệt với từng phương pháp và khái niệm
Bắt đầu nào…
JavaScript bạn cần biết trước khi học ReactHàm gọi lại trong JavaScript
Hàm gọi lại là một hàm được thực hiện sau khi một hàm khác đã hoàn thành việc thực thi của nó. Nó thường được cung cấp như một đầu vào cho một chức năng khác
Các cuộc gọi lại rất quan trọng để hiểu vì chúng được sử dụng trong các phương thức mảng [chẳng hạn như
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
6, function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
7, v.v.], function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
8, trình xử lý sự kiện [chẳng hạn như nhấp chuột, cuộn, v.v.] và nhiều nơi khácĐây là một ví dụ về trình xử lý sự kiện "nhấp chuột" có chức năng gọi lại sẽ được chạy bất cứ khi nào nút được nhấp
//HTML
Click Me
//JavaScript
const btn = document.querySelector['.btn'];
btn.addEventListener['click', [] => {
let name = 'John doe';
console.log[name.toUpperCase[]]
}]
NB. Hàm gọi lại có thể là hàm thông thường hoặc hàm mũi tên
Lời hứa trong JavaScript
Như đã nêu trước đây, một chức năng gọi lại được thực thi sau khi chức năng ban đầu được thực thi. Bây giờ bạn có thể bắt đầu xem xét xếp chồng rất nhiều hàm gọi lại lên nhau vì bạn không muốn một hàm cụ thể chạy cho đến khi hàm cha chạy xong hoặc một thời gian cụ thể đã trôi qua
Ví dụ: hãy cố gắng hiển thị 5 tên trong bảng điều khiển sau 2 giây mỗi tên – nghĩa là tên đầu tiên xuất hiện sau 2 giây, tên thứ hai sau 4 giây, v.v.
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
Ví dụ trên sẽ hoạt động, nhưng sẽ khó hiểu, gỡ lỗi hoặc thậm chí thêm xử lý lỗi vào. Điều này được gọi là "Địa ngục gọi lại". Địa ngục cuộc gọi lại là một vấn đề lớn gây ra bởi mã hóa với các cuộc gọi lại lồng nhau phức tạp
Lý do chính để sử dụng lời hứa là để ngăn chặn địa ngục gọi lại. Với Promise, chúng tôi có thể viết mã không đồng bộ theo cách đồng bộ
Gotcha. Bạn có thể tìm hiểu ý nghĩa của đồng bộ và không đồng bộ trong JavaScript qua bài viết này của TAPAS ADHIKARY
Lời hứa là một đối tượng trả về một giá trị mà bạn dự đoán sẽ thấy trong tương lai nhưng hiện tại không thấy
Việc sử dụng thực tế cho các lời hứa sẽ có trong các yêu cầu HTTP, nơi bạn gửi yêu cầu và không nhận được phản hồi ngay lập tức vì đó là hoạt động không đồng bộ. Bạn chỉ nhận được câu trả lời [dữ liệu hoặc lỗi] khi máy chủ phản hồi
Cú pháp lời hứa JavaScript
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
Lời hứa có hai tham số, một cho thành công [giải quyết] và một cho thất bại [từ chối]. Mỗi người có một điều kiện phải được thỏa mãn để Lời hứa được giải quyết – nếu không, nó sẽ bị từ chối
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
Có 3 trạng thái của đối tượng Promise
- Chưa giải quyết. theo mặc định, đây là Trạng thái ban đầu, trước khi Lời hứa thành công hay thất bại
- giải quyết. Hoàn thành lời hứa
- Bác bỏ. thất hứa
Cuối cùng, hãy thử triển khai lại callback hell như một lời hứa
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
Bạn có thể xem qua bài viết này của Cem Eygi để hiểu rõ hơn về những lời hứa
Bản đồ [] trong JavaScript
Một trong những phương thức thường được sử dụng nhất là
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
9, cho phép bạn lặp lại một mảng và sửa đổi các phần tử của nó bằng hàm gọi lại. Hàm gọi lại sẽ được chạy trên từng phần tử mảngGiả sử chúng ta có một mảng người dùng chứa thông tin của họ
let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
Chúng tôi có thể lặp lại bằng cách sử dụng bản đồ và sửa đổi đầu ra của nó
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
0Bạn nên lưu ý rằng
6 luôn trả về một mảng mới, ngay cả khi đó là một mảng trốngfunction addName [time, name]{ return new Promise [[resolve, reject] => { if[name]{ setTimeout[[]=>{ console.log[name] resolve[]; },time] }else{ reject['No such name']; } }] } addName[2000, 'Joel'] .then[[]=>addName[2000, 'Victoria']] .then[[]=>addName[2000, 'John']] .then[[]=>addName[2000, 'Doe']] .then[[]=>addName[2000, 'Sarah']] .catch[[err]=>console.log[err]]
- Nó không làm thay đổi kích thước của mảng ban đầu so với phương thức filter
- Nó luôn sử dụng các giá trị từ mảng ban đầu của bạn khi tạo một mảng mới
Gotcha. Phương thức bản đồ hoạt động gần giống như mọi trình lặp JavaScript khác, chẳng hạn như
let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
1 nhưng bạn nên luôn sử dụng phương thức bản đồ bất cứ khi nào bạn định trả về một giá trịMột trong những lý do chính mà chúng tôi sử dụng bản đồ là để chúng tôi có thể đóng gói dữ liệu của mình trong một số HTML, trong khi đối với React, điều này được thực hiện đơn giản bằng cách sử dụng JSX
Bạn có thể đọc thêm về map[] tại đây
Lọc[] và Tìm[] trong JavaScript
let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
2 cung cấp một mảng mới tùy thuộc vào tiêu chí nhất định. Không giống như map[], nó có thể thay đổi kích thước của mảng mới, trong khi let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
3 chỉ trả về một thể hiện duy nhất [đây có thể là một đối tượng hoặc mục]. Nếu có nhiều kết quả phù hợp, nó sẽ trả về kết quả khớp đầu tiên – nếu không, nó sẽ trả về không xác địnhGiả sử bạn có một tập hợp mảng người dùng đã đăng ký với các độ tuổi khác nhau
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
5Bạn có thể chọn sắp xếp dữ liệu này theo nhóm tuổi, chẳng hạn như những người trẻ tuổi [1-15 tuổi], người cao tuổi [50-70 tuổi], v.v.
Trong trường hợp này, chức năng bộ lọc có ích vì nó tạo ra một mảng mới dựa trên các tiêu chí. Chúng ta hãy xem nó hoạt động như thế nào
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
6Điều này tạo ra một mảng mới. Nó tạo ra một mảng trống nếu điều kiện không thỏa mãn [không khớp]
Bạn có thể đọc thêm về điều này ở đây
Tìm thấy[]
Phương thức
let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
3, giống như phương thức function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
7, lặp lại trên mảng để tìm kiếm một thể hiện/mục đáp ứng điều kiện đã chỉ định. Khi tìm thấy nó, nó trả về mục mảng cụ thể đó và ngay lập tức kết thúc vòng lặp. Nếu không tìm thấy kết quả khớp, hàm trả về không xác địnhVí dụ
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
9Bạn có thể đọc thêm về phương thức find[] tại đây
Phá hủy mảng và đối tượng trong JavaScript
Hủy cấu trúc là một tính năng JavaScript được giới thiệu trong ES6, cho phép truy cập và giải nén các biến từ mảng và đối tượng nhanh hơn và đơn giản hơn
Trước khi tính năng hủy được giới thiệu, nếu chúng ta có một dãy trái cây và muốn lấy riêng trái cây thứ nhất, thứ hai và thứ ba, chúng ta sẽ có kết quả như thế này
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
0Điều này giống như lặp đi lặp lại cùng một điều có thể trở nên rườm rà. Hãy xem làm thế nào điều này có thể được sắp xếp lại để có được 3 quả đầu tiên
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
1Bạn có thể tự hỏi làm thế nào bạn có thể bỏ qua dữ liệu nếu bạn chỉ muốn in kết quả đầu tiên và kết quả cuối cùng, hoặc kết quả thứ hai và thứ tư. Bạn sẽ sử dụng dấu phẩy như sau
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
2phá hủy đối tượng
Bây giờ hãy xem cách chúng ta có thể giải cấu trúc một đối tượng – bởi vì trong React bạn sẽ thực hiện rất nhiều việc giải cấu trúc đối tượng
Giả sử chúng ta có một đối tượng người dùng chứa tên, họ của họ, v.v.
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
3Theo cách cũ, việc lấy những dữ liệu này có thể gây căng thẳng và lặp đi lặp lại
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
4nhưng với việc phá hủy nó dễ dàng hơn rất nhiều
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
5Chúng ta cũng có thể làm điều này trong một chức năng
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
6Bạn có thể đọc thêm về phá hủy Mảng và Đối tượng tại đây
Toán tử nghỉ ngơi và trải rộng trong JavaScript
Các toán tử trải rộng và nghỉ ngơi của JavaScript sử dụng dấu ba chấm
let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
6. Toán tử còn lại tập hợp hoặc thu thập các mục – nó đặt “phần còn lại” của một số giá trị cụ thể do người dùng cung cấp vào một mảng/đối tượng JavaScriptGiả sử bạn có một loạt các loại trái cây
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
7Chúng ta có thể hủy cấu trúc để lấy kết quả thứ nhất và thứ hai, sau đó đặt “phần còn lại” của các kết quả vào một mảng bằng cách sử dụng toán tử phần còn lại
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
8Nhìn vào kết quả, bạn sẽ thấy 2 mục đầu tiên và sau đó là mục thứ 3 là một mảng bao gồm các loại trái cây còn lại mà chúng ta không cấu trúc. Bây giờ chúng ta có thể tiến hành bất kỳ loại xử lý nào trên mảng mới được tạo, chẳng hạn như
setTimeout[[] => {
console.log["Joel"];
setTimeout[[] => {
console.log["Victoria"];
setTimeout[[] => {
console.log["John"];
setTimeout[[] => {
console.log["Doe"];
setTimeout[[] => {
console.log["Sarah"];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
}, 2000];
9Điều quan trọng cần nhớ là điều này luôn luôn đến sau cùng [vị trí rất quan trọng]
Chúng ta vừa làm việc với mảng - bây giờ hãy xử lý các đối tượng, chúng hoàn toàn giống nhau
Giả sử chúng ta có một đối tượng người dùng có tên, họ và nhiều hơn nữa. Chúng tôi có thể hủy cấu trúc nó và sau đó trích xuất phần còn lại của dữ liệu
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
0Điều này sẽ ghi kết quả sau
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
1Bây giờ chúng ta hãy hiểu cách thức hoạt động của toán tử trải rộng và cuối cùng tóm tắt bằng cách phân biệt giữa cả hai toán tử
Toán tử trải rộng
Toán tử trải rộng, như tên của nó, được sử dụng để trải rộng các phần tử mảng. Nó cho chúng ta khả năng lấy danh sách các tham số từ một mảng. Toán tử trải rộng có cú pháp tương tự như toán tử còn lại, ngoại trừ nó hoạt động theo hướng ngược lại
Ghi chú. Toán tử trải rộng chỉ có hiệu quả khi được sử dụng trong các ký tự mảng, lệnh gọi hàm hoặc đối tượng thuộc tính được khởi tạo
Ví dụ: giả sử bạn có mảng các loại động vật khác nhau
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
2Bạn có thể muốn kết hợp hai mảng này thành một mảng động vật. Hãy thử nó ra
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
3Đây không phải là điều chúng tôi muốn – chúng tôi muốn tất cả các mục chỉ trong một mảng duy nhất. Và chúng ta có thể đạt được điều này bằng cách sử dụng toán tử trải rộng
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
4Điều này cũng hoạt động với các đối tượng. Điều quan trọng cần lưu ý là toán tử trải rộng không thể mở rộng các giá trị của đối tượng bằng chữ, vì đối tượng thuộc tính không phải là đối tượng có thể lặp lại. Nhưng chúng ta có thể sử dụng nó để sao chép các thuộc tính từ đối tượng này sang đối tượng khác
Ví dụ
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
5Bạn có thể đọc thêm về các toán tử Trải rộng và Nghỉ ngơi của JavaScript tại đây
Giá trị duy nhất - Set[] trong JavaScript
Gần đây, tôi đã cố gắng tạo một tab danh mục cho một ứng dụng mà tôi cần tìm nạp giá trị danh mục từ một mảng
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
6Điều đầu tiên là lặp qua mảng, nhưng tôi nhận được các giá trị lặp lại
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
7Điều này có nghĩa là tôi cần thiết lập một điều kiện để tránh lặp lại. Có một chút khó khăn cho đến khi tôi bắt gặp hàm tạo/đối tượng
let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
7 do ES6 cung cấp. ]Tập hợp là tập hợp các phần tử là duy nhất, không phần tử nào lặp lại. Hãy xem làm thế nào chúng ta có thể thực hiện điều này một cách dễ dàng
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
8NB. Tôi quyết định trải các giá trị thành một mảng. Bạn có thể đọc thêm về các giá trị duy nhất tại đây
Các khóa đối tượng động trong JavaScript
Điều này cho phép chúng tôi thêm các khóa đối tượng bằng cách sử dụng ký hiệu dấu ngoặc vuông. Điều này có thể không hợp lý với bạn ngay bây giờ, nhưng khi bạn tiếp tục học React hoặc bắt đầu làm việc với các nhóm, bạn có thể bắt gặp nó
Trong JavaScript, chúng tôi biết rằng các đối tượng thường được tạo thành từ các thuộc tính/khóa và giá trị và chúng tôi có thể sử dụng ký hiệu dấu chấm để thêm, chỉnh sửa hoặc truy cập một số giá trị. như một ví dụ
const myPromise = new Promise[[resolve, reject] => {
// condition
}];
9Chúng tôi cũng có tùy chọn sử dụng ký hiệu dấu ngoặc vuông, được sử dụng khi chúng tôi cần các khóa đối tượng động
Chúng ta có ý nghĩa gì bởi các phím đối tượng động? . Quy ước đặt tên tiêu chuẩn chỉ cho phép camelCase và Snake_case, nhưng bằng cách sử dụng ký hiệu dấu ngoặc vuông, chúng ta có thể giải quyết vấn đề này
Ví dụ: giả sử chúng tôi đặt tên cho khóa của mình bằng dấu gạch ngang ở giữa các từ, chẳng hạn [
let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
8]const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
0Bạn có thể thấy sự khác biệt giữa ký hiệu dấu chấm và ký hiệu dấu ngoặc. Hãy xem các ví dụ khác
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
1Bạn cũng có thể thực hiện các thao tác phức tạp hơn bằng cách sử dụng các điều kiện trong dấu ngoặc vuông, như thế này
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
2Bạn có thể đọc thêm về điều này ở đây
giảm [] trong JavaScript
Đây được cho là hàm mảng mạnh nhất. Nó có thể thay thế các phương thức
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
7 và let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
3 và cũng khá tiện lợi khi thực hiện các phương thức function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
6 và function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
7 trên một lượng lớn dữ liệuKhi bạn xâu chuỗi phương thức bản đồ và bộ lọc lại với nhau, bạn sẽ thực hiện công việc hai lần - đầu tiên lọc từng giá trị đơn lẻ và sau đó ánh xạ các giá trị còn lại. Mặt khác,
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
03 cho phép bạn lọc và lập bản đồ trong một lượt. Phương pháp này mạnh mẽ, nhưng nó cũng phức tạp và phức tạp hơn một chútChúng tôi lặp lại mảng của mình và sau đó nhận được hàm gọi lại, tương tự như
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
6, function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
7, let users = [
{ firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
{ firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
{ firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];
3 và các hàm khác. Sự khác biệt chính là nó giảm mảng của chúng ta thành một giá trị duy nhất, có thể là một số, mảng hoặc đối tượngMột điều khác cần lưu ý về phương thức reduce[] là chúng ta đang truyền vào hai đối số, điều này chưa từng xảy ra kể từ khi bạn bắt đầu đọc hướng dẫn này
Đối số đầu tiên là tổng/tổng của tất cả các tính toán và đối số thứ hai là giá trị lặp lại hiện tại [bạn sẽ hiểu ngay sau đây]
Ví dụ: giả sử chúng tôi có một danh sách tiền lương cho nhân viên của mình
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
3Và chúng tôi muốn tính 10% phần mười cho tất cả nhân viên. Chúng ta có thể dễ dàng làm điều này với phương thức rút gọn, nhưng trước khi làm điều đó, hãy làm điều gì đó dễ dàng hơn. trước tiên hãy tính tổng tiền lương
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
4NB. Chúng tôi đã chuyển một đối số thứ hai là tổng số, nó có thể là bất kỳ thứ gì - ví dụ: một số hoặc đối tượng
Bây giờ hãy tính phần mười 10% cho tất cả nhân viên và lấy tổng số. Chúng tôi chỉ có thể nhận được 10% từ tổng số hoặc lần đầu tiên nhận được từ mỗi mức lương trước khi cộng chúng lại
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
5Gotcha. Chúng tôi đã sử dụng một đối tượng làm đối số thứ hai và chúng tôi cũng sử dụng các khóa đối tượng động. Bạn có thể đọc thêm về phương pháp rút gọn tại đây
Chuỗi tùy chọn trong JavaScript
Chuỗi tùy chọn là một cách an toàn để truy cập các thuộc tính đối tượng lồng nhau trong JavaScript thay vì phải thực hiện nhiều kiểm tra null khi truy cập một chuỗi dài các thuộc tính đối tượng. Đây là một tính năng mới được giới thiệu trong ES2020
Ví dụ
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
6Giả sử bạn đang cố lấy các sở thích từ mảng trên. Hãy thử nó ra
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
7Khi bạn nhìn vào bảng điều khiển của mình, bạn sẽ nhận thấy rằng lần lặp đầu tiên đã hoàn thành, nhưng lần lặp thứ hai không có sở thích. Vì vậy, nó phải đưa ra một lỗi và thoát ra khỏi vòng lặp - điều đó có nghĩa là nó không thể lấy dữ liệu từ các Đối tượng khác trong mảng
đầu ra
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
8Lỗi này có thể được khắc phục bằng chuỗi tùy chọn, mặc dù có một số phương pháp có thể khắc phục lỗi [ví dụ: sử dụng điều kiện]. Hãy xem cách chúng tôi thực hiện điều này với cả điều kiện và chuỗi tùy chọn
Phương pháp kết xuất có điều kiện
const promise = new Promise[[resolve, reject] => {
let condition;
if[condition is met] {
resolve['Promise is resolved successfully.'];
} else {
reject['Promise is rejected'];
}
}];
9Chuỗi tùy chọn
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
0đầu ra
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
1Điều này có thể không thực sự có ý nghĩa với bạn bây giờ, nhưng khi bạn bắt đầu làm việc gì đó lớn hơn trong tương lai, nó sẽ đâu vào đó. Bạn có thể đọc thêm ở đây
Tìm nạp API & Lỗi trong JavaScript
API tìm nạp, đúng như tên gọi, được sử dụng để lấy dữ liệu từ các API. Đó là API trình duyệt cho phép bạn sử dụng JavaScript để thực hiện các yêu cầu AJAX [JavaScript và XML không đồng bộ] cơ bản
Bởi vì nó được cung cấp bởi trình duyệt, bạn có thể sử dụng nó mà không cần phải cài đặt hoặc nhập bất kỳ gói hoặc phần phụ thuộc nào [như axios]. Cấu hình của nó khá đơn giản để nắm bắt. API tìm nạp cung cấp một lời hứa theo mặc định [Tôi đã đề cập đến các lời hứa trước đó trong bài viết này]
Hãy xem cách tìm nạp dữ liệu qua API tìm nạp. Chúng tôi sẽ sử dụng API miễn phí chứa hàng nghìn trích dẫn ngẫu nhiên
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
2Những gì chúng tôi đã làm ở đây là
- Dòng 1. chúng tôi đã nhận được dữ liệu từ API, đã trả lại một lời hứa
- Dòng 2. Sau đó, chúng tôi đã nhận được định dạng dữ liệu
07, đây cũng là một lời hứafunction addName [time, name]{ return new Promise [[resolve, reject] => { if[name]{ setTimeout[[]=>{ console.log[name] resolve[]; },time] }else{ reject['No such name']; } }] } addName[2000, 'Joel'] .then[[]=>addName[2000, 'Victoria']] .then[[]=>addName[2000, 'John']] .then[[]=>addName[2000, 'Doe']] .then[[]=>addName[2000, 'Sarah']] .catch[[err]=>console.log[err]]
- dòng 3. Chúng tôi đã nhận được dữ liệu hiện trả về JSON
- dòng 4. Chúng tôi đã nhận lỗi trong trường hợp có bất kỳ
Chúng ta sẽ xem làm thế nào điều này có thể được thực hiện với async/await trong phần tiếp theo. Bạn có thể đọc thêm về API tìm nạp tại đây
Cách xử lý lỗi trong Fetch API
Bây giờ chúng ta hãy xem cách chúng ta có thể xử lý lỗi từ tìm nạp API mà không cần phụ thuộc vào từ khóa catch. Hàm
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
08 sẽ tự động đưa ra lỗi đối với lỗi mạng chứ không phải đối với lỗi HTTP, chẳng hạn như phản hồi từ 400 đến 5xxTin tốt là
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
09 cung cấp một cờ function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
50 đơn giản cho biết liệu yêu cầu có thất bại hay mã trạng thái của phản hồi HTTP nằm trong phạm vi thành côngĐiều này rất đơn giản để thực hiện
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
3Bạn có thể đọc thêm về Tìm nạp lỗi API tại đây
Không đồng bộ/Đang chờ trong JavaScript
Async/Await cho phép chúng ta viết mã không đồng bộ theo kiểu đồng bộ. Điều này có nghĩa là bạn không cần tiếp tục lồng các cuộc gọi lại
Hàm async luôn trả về một lời hứa
Bạn có thể đang vắt óc tự hỏi sự khác biệt giữa đồng bộ và không đồng bộ nghĩa là gì. Nói một cách đơn giản, đồng bộ có nghĩa là các công việc được hoàn thành lần lượt. Không đồng bộ có nghĩa là các tác vụ được hoàn thành độc lập
Lưu ý rằng chúng tôi luôn có async trước chức năng và chúng tôi chỉ có thể sử dụng chờ đợi khi chúng tôi có async. Bạn sẽ hiểu sớm thôi
Bây giờ, hãy triển khai mã API Tìm nạp mà chúng ta đã thực hiện trước đó bằng cách sử dụng async/await
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
4Đây là cách dễ đọc hơn, phải không?
Bạn có thể tự hỏi làm thế nào chúng ta có thể xử lý lỗi với async/await. Chuẩn rồi. Bạn sử dụng từ khóa thử và bắt
function addName [time, name]{
return new Promise [[resolve, reject] => {
if[name]{
setTimeout[[]=>{
console.log[name]
resolve[];
},time]
}else{
reject['No such name'];
}
}]
}
addName[2000, 'Joel']
.then[[]=>addName[2000, 'Victoria']]
.then[[]=>addName[2000, 'John']]
.then[[]=>addName[2000, 'Doe']]
.then[[]=>addName[2000, 'Sarah']]
.catch[[err]=>console.log[err]]
5Bạn có thể đọc thêm về async/await tại đây
Phần kết luận
Trong bài viết này, chúng ta đã tìm hiểu hơn 10 phương thức và khái niệm JavaScript mà mọi người nên tìm hiểu kỹ trước khi học React
Có rất nhiều phương pháp và khái niệm khác mà bạn nên biết, nhưng đây là những thứ bạn có thể không thực sự chú ý khi học JavaScript. Đây là những điều quan trọng cần hiểu trước khi bạn học React
Giả sử bạn mới bắt đầu với JavaScript – Tôi đã tuyển chọn một danh sách tài nguyên tuyệt vời sẽ giúp bạn tìm hiểu các khái niệm và chủ đề về JavaScript tại đây. Đừng quên sao và chia sẻ. . ]
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
Nhà phát triển Frontend & Người viết kỹ thuật
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơ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