Hướng dẫn should i learn javascript before react - tôi có nên học javascript trước khi phản ứng không

Nếu bạn muốn học React - hoặc bất kỳ Khung JavaScript nào - trước tiên bạn sẽ cần phải hiểu các phương pháp và khái niệm JavaScript cơ bản.

Nếu không, nó giống như một thanh niên học chạy trước khi học đi bộ.

Nhiều nhà phát triển chọn cách tiếp cận "học hỏi khi bạn đi" khi học React. Nhưng điều này thường không dẫn đến năng suất, và thay vào đó làm xấu đi những khoảng trống trong kiến ​​thức JavaScript của họ. Cách tiếp cận này làm cho việc đồng hóa mỗi 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 các 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 đá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 tôi sẽ thực hiện một cách tiếp cận thực tế và xem qua tất cả các ý tưởng và kỹ thuật của JS bạn sẽ cần phải 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, chủ yếu được giới thiệu với ES2015. Vì vậy, đó thực chất là những gì chúng ta sẽ thảo luận trong bài viết này. Để giúp bạn đào sâu học tập của bạ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…

Chức năng 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. Nó thường được cung cấp như một đầu vào vào 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]]

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]]

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]]

Dưới đây là một ví dụ về trình nghe sự kiện "nhấp chuột" với 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. A callback function can be either an ordinary function or an arrow function.

Lời hứa trong JavaScript

Như đã nêu trước đây, một hàm gọi lại được thực thi sau khi chức năng gốc được thực thi. Bây giờ bạn có thể bắt đầu xem xét việc xếp chồng rất nhiều chức năng gọi lại trên nhau vì bạn không muốn một chức năng cụ thể để chạy cho đến khi chức năng cha mẹ hoàn thành chạy hoặc thời gian cụ thể đã trôi qua.

Ví dụ: chúng ta hãy cố gắng hiển thị 5 tên trong bảng điều khiển sau 2 giây mỗi cái - nghĩa là tên đầu tiên xuất hiện sau 2 giây, 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 này sẽ hoạt động, nhưng sẽ rất khó để hiểu, gỡ lỗi hoặc thậm chí thêm xử lý lỗi. Điều này được gọi là "địa ngục gọi lại". & nbsp; địa ngục gọi lại là một vấn đề lớn do mã hóa với các cuộc gọi lại lồng nhau phức tạp."Callback Hell".  Callback hell is a big issue caused by coding with complex nested callbacks.

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 những lời hứa, chúng ta có thể viết mã không đồng bộ theo cách đồng bộ.

GOTCHA: Bạn có thể tìm hiểu phương tiện đồng bộ và đồng bộ nào trong JavaScript thông qua bài viết này của Tapas Adhikary. You can learn what synchronous and asynchronous means in JavaScript via this article by TAPAS ADHIKARY.

Một 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 bây giờ không thấy.

Việc sử dụng thực tế cho các lời hứa sẽ nằm 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à một 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ủ trả lời.

JavaScript Promise Cú pháp:

const myPromise = new Promise[[resolve, reject] => {  
    // condition
}];

Lời hứa có hai tham số, một để 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 sẽ đượ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 hứa hẹn:

• Đang chờ xử lý: Theo mặc định, đây là trạng thái ban đầu, trước khi lời hứa thành công hoặc thất bại. by default, this is the Initial State, before the Promise succeeds or fails.
• Đã giải quyết: Lời hứa đã hoàn thành Completed Promise
• Bị từ chối: Lời hứa thất bại Failed Promise

Cuối cùng, chúng ta hãy cố gắng thực hiện lại địa ngục gọi lại 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ể kiểm tra thông qua bài viết này của CEM Eygi để hiểu rõ hơn những lời hứa.

Bản đồ [] trong JavaScript

Một trong những phương thức được sử dụng thường xuyên 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]]

Giả sử chúng tôi có một loạt 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 ta có thể lặp qua sử dụng bản đồ và sửa đổi đầu ra của nó

let singleUser = users.map[[user]=>{
  //let's add the firstname and lastname together
  let fullName = user.firstName + ' ' + user.lastName;
  return `
    
${fullName}
    
${user.age}
  `
}];

Bạn nên lưu ý rằng:

• 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 luôn trả về một mảng mới, ngay cả khi nó là một mảng trống.
• Nó không thay đổi kích thước của mảng ban đầu so với phương pháp bộ lọc
• Nó luôn luôn sử dụng các giá trị từ mảng ban đầu của bạn khi tạo một giá trị 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 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" }
];

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" }
];

Một trong những lý do chính chúng tôi sử dụng MAP là vì vậy chúng tôi có thể gói gọn dữ liệu của mình trong một số HTML, trong khi phản ứng, điều này chỉ đơn giản được thực hiện bằng JSX.

Bạn có thể đọc thêm về bản đồ [] ở đây.

Bộ lọc [] và find [] 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" }
];

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" }
];

Giả sử bạn có một bộ sưu tập mảng của người dùng đã đăng ký với các độ tuổi khác nhau:

let users = [
  { firstName: "Susan", age: 14 },
  { firstName: "Daniel", age: 16 },
  { firstName: "Bruno", age: 56 },
  { firstName: "Jacob", age: 15 },
  { firstName: "Sam", age: 64 },
  { firstName: "Dave", age: 56 },
  { firstName: "Neils", age: 65 }
];

Bạn có thể chọn sắp xếp dữ liệu này theo các nhóm tuổi, chẳng hạn như các cá nhân trẻ [từ 1-15 tuổi], người cao cấp [tuổi 50-70], 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í. Hãy xem cách nó hoạt động.

// for young people
const youngPeople = users.filter[[person] => {
  return person.age  person.age >= 50];

console.log[seniorPeople];
console.log[youngPeople]; 

Đ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 được thỏa mãn [không phù hợp].

Bạn có thể đọc thêm về điều này ở đây.

Find[]

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" }
];

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]]

Ví dụ:

const Bruno = users.find[[person] => person.firstName === "Bruno"];

console.log[Bruno];

Bạn có thể đọc thêm về phương thức Find [] ở đây.

Các mảng và đối tượng phá hủy trong JavaScript

Phá hủy là một tính năng JavaScript được giới thiệu trong ES6 cho phép truy cập nhanh hơn và đơn giản hơn để giải nén các biến từ các mảng và đối tượng.

Trước khi phá hủy được giới thiệu, nếu chúng ta có một loạt các loại trái cây và muốn có được các loại trái cây thứ nhất, thứ hai và thứ ba, chúng ta sẽ kết thúc với một cái gì đó 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];

Điều này giống như lặp lại điều tương tự nhiều lần có thể trở nên cồng kềnh. Chúng ta hãy xem làm thế nào điều này có thể bị ảnh hưởng để có được 3 loại trái cây đầ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];

Bạ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 các loại trái cây đầu tiên và cuối cùng, hoặc trái cây 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];

Đối tượng phá hủy

Bây giờ, hãy xem làm thế nào chúng ta có thể phá hủy một đối tượng - bởi vì trong React, bạn sẽ thực hiện rất nhiều đối tượng.

Giả sử chúng ta có một đối tượng của người dùng chứa tên đầu tiên của họ, tên cuối cùng và nhiều hơn nữa,

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];

Theo cách cũ, việc nhận được những dữ liệu này có thể gây căng thẳng và đầy sự 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];

Nhưng với sự 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];

Chú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];

Bạn có thể đọc thêm về các mảng và đối tượng phá hủy ở đây.

Các nhà khai thác nghỉ ngơi và lây lan trong JavaScript

Các nhà khai thác lan truyền và nghỉ ngơi JavaScript sử dụng 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" }
];

Giả 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];

Chúng ta có thể phá hủy để có được các loại trái cây thứ nhất và thứ hai và sau đó đặt phần còn lại của các loại trái cây trong một mảng bằng cách sử dụng toán tử Rest.

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];

Nhìn vào kết quả, bạn sẽ thấy hai mục đầu tiên và sau đó mục thứ ba là một mảng bao gồm các loại trái cây còn lại mà chúng tôi không phá hủy. 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];

Điều quan trọng là phải nhớ rằng điều này phải luôn luôn đến lần cuối [vị trí rất quan trọng].

Chúng tôi vừa làm việc với các mảng - bây giờ hãy đối phó với các đối tượng, hoàn toàn giống nhau.

Giả sử chúng tôi có một đối tượng người dùng có tên đầu tiên, tên cuối cùng và nhiều hơn nữa. Chúng ta có thể phá hủy 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
}];

Điều này sẽ ghi lại kết quả sau:

const myPromise = new Promise[[resolve, reject] => {  
    // condition
}];

Bây giờ, hãy hiểu cách thức hoạt động của nhà điều hành lây lan và cuối cùng tóm tắt bằng cách phân biệt giữa cả hai nhà khai thác.

Người vận hành lan truyền

Toán tử lây lan, như tên gọi, được sử dụng để trải ra các mục mảng. Nó cho chúng ta khả năng có được một danh sách các tham số từ một mảng. Toán tử lây lan có cú pháp tương tự như toán tử REST, ngoại trừ nó hoạt động theo hướng ngược lại.

LƯU Ý: Một toán tử lây lan chỉ có hiệu lực khi được sử dụng trong các chữ cái, các cuộc gọi chức năng hoặc các đối tượng thuộc tính khởi tạo.A spread operator is effective only when used within array literals, function calls, or initialized properties objects.

Ví dụ, giả sử bạn có các loại động vật khác nhau:

const myPromise = new Promise[[resolve, reject] => {  
    // condition
}];

Bạn có thể muốn kết hợp hai mảng này chỉ thành một mảng động vật. Hãy thử nó:

const myPromise = new Promise[[resolve, reject] => {  
    // condition
}];

Đây không phải là những gì 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ử lây lan:

const myPromise = new Promise[[resolve, reject] => {  
    // condition
}];

Đ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ử lây lan không thể mở rộng các giá trị của các chữ cái đối tượng, vì một đối tượng thuộc tính không phải là một điều khác. Nhưng chúng ta có thể sử dụng nó để nhân bản các thuộc tính từ một đối tượng này sang đối tượng khác.

Ví dụ:

const myPromise = new Promise[[resolve, reject] => {  
    // condition
}];

Bạn có thể đọc thêm về các nhà khai thác lan truyền và nghỉ ngơ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 trong đó 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
}];

Đ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
}];

Đ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. Đó là 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" }
];

Một bộ là một tập hợp các mục là duy nhất, đó không phải là yếu tố nào có thể được lặp lại. Hãy để xem cách 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
}];

NB: Tôi quyết định truyền các giá trị thành một mảng. Bạn có thể đọc thêm về các giá trị độc đáo ở đây. I decided to spread the values into an array. You can read more on unique values here.

Phím đối tượng động trong JavaScript

Điều này cho phép chúng tôi thêm các phím đối tượng bằng ký hiệu khung vuông. Điều này có thể không có ý nghĩa với bạn ngay bây giờ, nhưng khi bạn tiếp tục học phản ứng 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ị. Ví dụ:

const myPromise = new Promise[[resolve, reject] => {  
    // condition
}];

Chúng tôi cũng có tùy chọn sử dụng ký hiệu khung vuông, được sử dụng khi chúng tôi cần các phím đối tượng động.dynamic object keys.

Chúng ta có nghĩa là gì bởi các phím đối tượng động? Đây là những khóa có thể không tuân theo quy ước đặt tên tiêu chuẩn của các thuộc tính/khóa trong một đối tượ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 khung vuông, chúng ta có thể giải quyết vấn đề này. These are keys that might not follow the standard naming convention of properties/keys in a object. The standard naming convention only permits camelCase and snake_case, but by using square bracket notation we can solve this problem.

Ví dụ: giả sử chúng tôi đặt tên cho khóa của mình bằng một dấu gạch ngang ở giữa các từ, ví dụ [

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" }
];

const promise = new Promise[[resolve, reject] => {  
    let condition;
    
    if[condition is met] {    
        resolve['Promise is resolved successfully.'];  
    } else {    
        reject['Promise is rejected'];  
    }
}];

Bạn có thể thấy sự khác biệt giữa ký hiệu dấu chấm và ký hiệu khung. 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'];  
    }
}];

Bạn cũng có thể thực hiện các hoạt động phức tạp hơn bằng cách sử dụng các điều kiện trong khung 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'];  
    }
}];

Bạn có thể đọc thêm về điều này ở đây.

Giảm [] trong JavaScript

Đây được cho là chức năng mảng mạnh nhất. Nó có thể thay thế các phương pháp

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]]

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" }
];

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]]

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]]

Khi bạn chuỗi bản đồ và phương thức lọc lại với nhau, bạn sẽ thực hiện công việc hai lần - trước tiên hãy lọc mọi giá trị và sau đó ánh xạ các giá trị còn lại. Mặt khác,

let singleUser = users.map[[user]=>{
  //let's add the firstname and lastname together
  let fullName = user.firstName + ' ' + user.lastName;
  return `
    
${fullName}
    
${user.age}
  `
}];

Chúng tôi lặp lại trên mảng của chúng tôi và sau đó có đượ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]]

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]]

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" }
];

Một điều khác cần lưu ý về phương pháp giảm [] là chúng tôi đang vượt qua hai đối số, điều này khô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 ​​số của tất cả các tính toán và thứ hai là giá trị lặp hiện tại [mà bạn sẽ hiểu trong thời gian ngắn].

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 chúng tôi:

const promise = new Promise[[resolve, reject] => {  
    let condition;
    
    if[condition is met] {    
        resolve['Promise is resolved successfully.'];  
    } else {    
        reject['Promise is rejected'];  
    }
}];

Và chúng tôi muốn tính toán 10% một phần mười cho tất cả nhân viên. Chúng tôi có thể dễ dàng làm điều này với phương pháp giảm, nhưng trước khi làm điều đó, hãy làm điều gì đó dễ dàng hơn: Hãy để tính toán tổng mức lương trước.

const promise = new Promise[[resolve, reject] => {  
    let condition;
    
    if[condition is met] {    
        resolve['Promise is resolved successfully.'];  
    } else {    
        reject['Promise is rejected'];  
    }
}];

NB: Chúng tôi đã vượt qua một đối số thứ hai là tổng số, nó có thể là bất cứ điều gì - ví dụ: một số hoặc đối tượng.

Bây giờ, hãy tính toán 10% một phần mười cho tất cả nhân viên và nhận được tổng số. Chúng tôi chỉ có thể nhận được 10% từ tổng số hoặc trước tiên nhận được từ mỗi mức lương trước khi thêm chúng lên.

const promise = new Promise[[resolve, reject] => {  
    let condition;
    
    if[condition is met] {    
        resolve['Promise is resolved successfully.'];  
    } else {    
        reject['Promise is rejected'];  
    }
}];

GOTCHA: 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 phím đối tượng động. Bạn có thể đọc thêm về phương pháp giảm ở đây. We used an object as the second argument and we also used dynamic object keys. You can read more about the reduce method here.

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 các thuộc tính đối tượng dài. Đâ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'];  
    }
}];

Giả sử bạn đang cố gắng để có được những 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'];  
    }
}];

Khi 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 đã được hoàn thành, nhưng lần lặp thứ hai không có sở thích. Vì vậy, nó đã phải ném một lỗi và thoát ra khỏi lần lặp - điều đó có nghĩa là nó không thể thu được dữ liệu từ các đối tượng khác trong mảng.

Output:

const promise = new Promise[[resolve, reject] => {  
    let condition;
    
    if[condition is met] {    
        resolve['Promise is resolved successfully.'];  
    } else {    
        reject['Promise is rejected'];  
    }
}];

Lỗ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 nó [ví dụ: sử dụng các điều kiện]. Hãy để xem cách chúng tôi làm điều này với cả hai đ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'];  
    }
}];

Chuỗ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]]

Output:

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]]

Điều này có thể không thực sự có ý nghĩa với bạn bây giờ, nhưng vào thời điểm bạn đang làm việc với một cái gì đó lớn hơn trong tương lai, nó sẽ rơi vào vị trí! Bạn có thể đọc thêm ở đây.

Tìm nạp API & lỗi trong JavaScript

API tìm nạp, như tên gọi, được sử dụng để lấy dữ liệu từ API. Đây 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 phải cài đặt hoặc nhập bất kỳ gói hoặc phụ thuộc nào [như Axios]. Cấu hình của nó khá đơn giản để nắm bắt. API Fetch đưa ra một lời hứa theo mặc định [tôi đã đưa ra lời hứa trước đó trong bài viết này].

Hãy cùng xem cách tìm nạp dữ liệu thông qua API tìm nạp. Chúng tôi sẽ sử dụng API miễn phí có chứa hàng ngàn báo giá 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]]

Nhữ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 lời hứa we got the data from the API, which returned a promise
• Dòng 2: Sau đó chúng tôi có định dạng

  let singleUser = users.map[[user]=>{
    //let's add the firstname and lastname together
    let fullName = user.firstName + ' ' + user.lastName;
    return `
      
  ${fullName}
      
  ${user.age}
    `
  }];

  7 của dữ liệu cũng là một lời hứa We then got the

  let singleUser = users.map[[user]=>{
    //let's add the firstname and lastname together
    let fullName = user.firstName + ' ' + user.lastName;
    return `
      
  ${fullName}
      
  ${user.age}
    `
  }];

  7 format of the data which is also a promise
• Dòng 3: Chúng tôi đã nhận được dữ liệu của chúng tôi hiện trả về JSON We got our data which now returns JSON
• Dòng 4: Chúng tôi gặp lỗi trong trường hợp có bất kỳ We got the errors in case there are any

Chúng ta sẽ thấy làm thế nào điều này có thể được thực hiện với Async/đang chờ đợi trong phần tiếp theo. Bạn có thể đọc thêm về API tìm nạp ở đây.

Cách xử lý lỗi trong API tìm nạp

Bây giờ, hãy cùng xem cách chúng ta có thể xử lý các lỗi từ API tìm nạp mà không cần phải phụ thuộc vào từ khóa bắt. Hàm

let singleUser = users.map[[user]=>{
  //let's add the firstname and lastname together
  let fullName = user.firstName + ' ' + user.lastName;
  return `
    
${fullName}
    
${user.age}
  `
}];

Tin tốt là

let singleUser = users.map[[user]=>{
  //let's add the firstname and lastname together
  let fullName = user.firstName + ' ' + user.lastName;
  return `
    
${fullName}
    
${user.age}
  `
}];

let users = [
  { firstName: "Susan", age: 14 },
  { firstName: "Daniel", age: 16 },
  { firstName: "Bruno", age: 56 },
  { firstName: "Jacob", age: 15 },
  { firstName: "Sam", age: 64 },
  { firstName: "Dave", age: 56 },
  { firstName: "Neils", age: 65 }
];

Đ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]]

Bạn có thể đọc thêm về lỗi API tìm nạp ở đây.

Async/chờ đợi trong javascript

ASYNC/AIDIT cho phép chúng tôi 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 phải tiếp tục gọi lại.

Một chức năng Async luôn trả lời một lời hứa. always returns a promise.

Bạn có thể làm cho bộ não của bạn tự hỏi sự khác biệt giữa phương tiện đồng bộ và không đồng bộ 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 hết lần này đến lần khác. Không đồng bộ có nghĩa là các nhiệm vụ được hoàn thành độc lập.

Lưu ý rằng chúng ta luôn có Async trước chức năng và chúng ta chỉ có thể sử dụng chờ đợi khi chúng ta có Async. Bạn sẽ hiểu sớm!

Bây giờ, hãy để thực hiện mã API tìm nạp mà chúng tôi đã làm việc 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]]

Đâ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ý các lỗi với Async/Await. Chuẩn rồi! Bạn sử dụng thử và bắt từ khó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ể đọc thêm về Async/đang chờ đợi ở đây.

Sự kết luận

Trong bài viết này, chúng tôi đã học được hơn 10 phương pháp và khái niệm JavaScript mà mọi người nên hiểu kỹ trước khi học phản ứng.

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 phương pháp bạn có thể không thực sự chú ý trong khi học JavaScript. Đây là điều quan trọng để hiểu trước khi bạn học React.

Giả sử bạn mới bắt đầu với JavaScript - Tôi đã quản lý 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ủ đề JavaScript tại đây. Đừng quên sao và chia sẻ! :].