JavaScript chắc chắn là một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới. Nó được sử dụng ở hầu hết mọi nơi: từ các ứng dụng web quy mô lớn đến các máy chủ phức tạp đến các thiết bị di động và IoT.
Vì vậy, chúng tôi đã hợp tác với Dylan C. Israel — một YouTuber lập trình và đã tốt nghiệp freeCodeCamp — và đề nghị anh ấy tạo khóa học Giới thiệu về ES6 trên Scrimba.
Khóa học bao gồm 17 bài học và 4 thử thách tương tác. Nó dành cho các nhà phát triển JavaScript muốn tìm hiểu các tính năng hiện đại của JavaScript được giới thiệu trong ES6, ES7 và ES8.
Hãy cùng xem cấu trúc khóa học:
Phần #1: Giới thiệu
Trong video giới thiệu, Dylan đưa ra cái nhìn tổng quan về khóa học của anh ấy sẽ như thế nào và những chủ đề chính mà anh ấy sẽ đề cập đến. Anh ấy cũng cung cấp cho bạn phần giới thiệu về bản thân để bạn làm quen với anh ấy trước khi bắt đầu viết mã.
Phần #2: Văn bản mẫu
Tính năng đầu tiên của ES6 mà khóa học bao gồm là các mẫu chữ. Mẫu chữ là một cách sạch hơn và đẹp hơn để chơi với dây. Họ thoát khỏi sự cần thiết cho rất nhiều + dấu hiệu để nối chuỗi.
let str1 = 'My name is:'
let name="Dylan";
let str2 = `${str1} ${name}`
// --> 'My name is: Dylan'
Chữ mẫu bắt đầu bằng dấu gạch ngược và chúng tôi sử dụng $ dấu và dấu ngoặc nhọn để giới thiệu một biến ở giữa.
Phần #3: Phá hủy đối tượng
Trong phần 3, bạn sẽ học cách hủy cấu trúc một đối tượng và trích xuất các thuộc tính mà bạn quan tâm.
let information = { firstName: 'Dylan', lastName: 'Israel'};
let { firstName, lastName } = information;
Trong đoạn mã trên, chúng tôi đang trích xuất các thuộc tính firstName và lastName từ đối tượng và chúng ta gán chúng cho các biến bằng cách sử dụng Object Destructuring.
Phần #4: Phá hủy mảng
Trong phần này, bạn sẽ học cách lấy con trỏ của mục mà chúng ta quan tâm từ mảng bằng cách sử dụng hủy mảng.
let [ firstName ] = ['Dylan', 'Israel'];
Đây, firstName đang trỏ tới mục đầu tiên trong mảng ở phía bên tay phải. Chúng ta cũng có thể tạo thêm con trỏ ở phía bên trái của các phần tử trong mảng của mình.
Phần #5: Đối tượng theo nghĩa đen
Trong phần 5 của khóa học, chúng ta sẽ tìm hiểu một tính năng thú vị khác của ES6, đó là Object Literal. Object Literals cho phép bạn bỏ qua khóa trong đối tượng nếu tên của khóa và giá trị giống nhau.
let firstName="Dylan";
let information = { firstName };
Vì vậy, trong ví dụ trên, chúng tôi muốn thêm thuộc tính của firstName trong chúng tôi information vật. Các firstName biến là một biến khác có cùng tên. Chúng tôi bỏ qua khóa và chỉ chuyển tên của biến, và nó sẽ tự tạo thuộc tính và gán giá trị.
Phần #6: Object Literal (Thử thách)
Bây giờ là lúc cho thử thách đầu tiên của khóa học! Mục tiêu ở đây là để điều khiển đăng nhập thành phố mới, địa chỉ mới và quốc gia với nó.
function addressMaker(address) {
const newAddress = {
city: address.city,
state: address.state,
country: 'United States'
};
...
}
Bạn được khuyến khích sử dụng các chủ đề chúng ta đã học cho đến nay để giải quyết vấn đề này. Điều này bao gồm Văn bản mẫu, Phá hủy đối tượng và Văn bản đối tượng.
Phần #7: Vòng lặp For… Of
Trong phần 7, bạn sẽ tìm hiểu về một cách mới để lặp qua các phần tử. ES6 đã giới thiệu một câu lệnh vòng lặp For…Of, tạo ra một vòng lặp lặp qua các đối tượng có thể lặp lại như các đối tượng String, Array, NodeList, v.v.
let str="hello";
for (let char of str) { console.log(char);}// "h"// "e"// "l"// "l"// "o"
Trong ví dụ mã ở trên, vòng lặp For…Of lặp qua một chuỗi và ghi các ký tự ra.
Phần #8: Thử thách For…Of Loop
Trong thử thách này, bạn được yêu cầu đoán điều gì sẽ xảy ra khi bạn sử dụng let trên const bên trong for…of vòng lặp và cố gắng thao tác các giá trị bên trong vòng lặp.
let incomes = [62000, 67000, 75000];
for (const income of incomes) {
}
console.log(incomes);
Phần #9: Toán tử trải rộng
Trong phần 9 của khóa học, bạn sẽ tìm hiểu về một trong những tính năng thú vị nhất có trong ES6: Toán tử trải rộng.
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
// arr3 = [1, 2, 3, 4, 5, 6];
Đoạn mã trên minh họa một trong nhiều cách triển khai thú vị khi sử dụng toán tử trải phổ. Ở đây chúng ta đang kết hợp hai mảng bằng cách đặt chúng vào một mảng mới với dấu ba chấm (…) trước tên của mảng.
Phần #10: Toán tử nghỉ ngơi
Trong bài học này, bạn sẽ học một vài trường hợp sử dụng cho toán tử Rest. Toán tử Rest giúp chúng ta xử lý các tham số hàm theo cách tốt hơn bằng cách cho phép chúng ta biểu diễn số lượng biến của các tham số hàm dưới dạng một mảng.
function findLength(...args) { console.log(args.length);}
findLength(); // 0
findLength(1); // 1
findLength(2, 3, 4); // 3
Ở đây, chúng tôi đang gọi cùng một chức năng với một số lượng tham số khác nhau và toán tử Rest đang xử lý điều đó một cách hoàn hảo cho chúng tôi.
Phần #11: Chức năng mũi tên
Bài học này dạy cho chúng ta một trong những tính năng thú vị nhất và được nhắc đến nhiều nhất được giới thiệu trong ES6: Arrow Functions. Arrow Functions đã thay đổi cách chúng ta viết các hàm.
const square = num => num * num;
square(2); // 4
Bằng cách sử dụng chức năng mũi tên, giao diện của một bình phương chức năng đã được thay đổi hoàn toàn. Chỉ trong một dòng mã, chúng ta có thể trả về bình phương của một số. Hàm Mũi tên có rất nhiều cách triển khai tuyệt vời khác, được giải thích trong bài học.
Phần #12: Tham số mặc định
Các tham số mặc định cho phép chúng ta khởi tạo các hàm với giá trị mặc định. Trong bài học này, bạn sẽ tìm hiểu mức độ hữu ích của tính năng này trong các tác vụ mã hóa ngoài đời thực, vì nó giúp bạn tránh lỗi và lỗi. Một ví dụ đơn giản về các tham số mặc định sẽ là:
function sum (a, b = 1) {
return a + b;
}
sum(5); // 6
Ở đây chúng tôi đang đặt giá trị mặc định của b để khi ta không truyền giá trị nào của b thì nó sẽ dùng giá trị mặc định để tính kết quả.
Phần #13: bao gồm()
Sử dụng includes phương pháp, chúng ta có thể tìm hiểu xem có bất kỳ chuỗi nào chứa một ký tự cụ thể hoặc một chuỗi con hay không. Trong bài học này, bạn sẽ tìm hiểu chi tiết về các trường hợp sử dụng thực tế của chức năng này.
let str="Hello World";
console.log(str.includes('hello')); // true
Ở đây, chúng tôi tìm hiểu xem chuỗi của chúng tôi có chứa chuỗi con của hello. Như bạn có thể thấy, phương thức bao gồm trả về đúng hoặc sai tùy thuộc vào việc điều kiện có khớp hay không.
Phần #14: Let and Cost
Có lẽ tính năng quan trọng nhất của ES6 là hai từ khóa mới để khai báo biến: let và const.
let str="Hello World";
const num = 12345;
sử dụng let, chúng ta có thể tạo các biến có thể thay đổi sau này trong chương trình. Các biến được khai báo với const không bao giờ có thể thay đổi được. Chúng ta sẽ tìm hiểu về chúng trong bài học này.
Phần #15: Xuất nhập khẩu
Tất cả chúng ta đều biết tầm quan trọng của việc có mã mô-đun, đặc biệt nếu bạn đang làm việc trên các ứng dụng quy mô lớn. Với import và export trong JavaScript, việc khai báo và sử dụng các mô-đun trở nên cực kỳ dễ dàng và rõ ràng.
Trong phần 15 của khóa học này, bạn sẽ học cách sử dụng các câu lệnh xuất và nhập để tạo các mô-đun.
// exports function
export function double(num) {
return num * num;
}
Trong đoạn mã trên, chúng ta đang xuất một hàm có tên là double. Sau đó, chúng tôi sẽ nhập hàm vào một tệp riêng:
// imports function
import { double } from '..filepath/filename
Phần #16: padStart() và padEnd()
ES2017 đã giới thiệu hai phương thức mới để thao tác với chuỗi mà bạn sẽ tìm hiểu chi tiết trong phần này. padStart và padEnd sẽ chỉ cần thêm phần đệm ở đầu và cuối chuỗi.
let str="Hello";
str.padStart(3); // ' Hello'
str.padEnd(3); // 'Hello '
Phần #17: thử thách padStart() và padEnd()
Trong phần này, bạn sẽ giải quyết thử thách thứ ba của khóa học này. Đó là một bài kiểm tra nhỏ, trong đó đầu tiên, Dylan yêu cầu bạn đoán, sau đó giải thích điều gì sẽ xảy ra khi đoạn mã sau chạy
let example="YouTube.com/CodingTutorials360";
// console.log(example.padStart(100));
// console.log(example.padEnd(1));
Phần #18: Lớp học
Các lớp đã được giới thiệu trong ES6 và chúng đã nâng cấp hoàn toàn trò chơi để sử dụng các Mẫu hướng đối tượng trong JavaScript. Mặc dù nó chỉ đơn giản là đường cú pháp so với kế thừa nguyên mẫu hiện có của JavaScript, nhưng nó giúp viết theo cách hướng đối tượng dễ dàng hơn.
Vì vậy, trong bài học này, bạn sẽ tìm hiểu chi tiết cách bạn có thể sử dụng các lớp và tận dụng lợi ích của các tính năng OOP, chẳng hạn như tính kế thừa. Dưới đây là một ví dụ đơn giản về việc sử dụng các lớp.
class Car {
constructor(wheels, doors) {
this.wheels = wheels;
this.doors = doors;
}
describeMe() {
console.log(`Doors: ${this.doors} and Wheels: ${this.wheels}`);
}}
const car1 = new Car(4, 2);
car1.describeMe(); // Doors: 2 and Wheels: 4
Ở đây, chúng ta tạo một lớp Car đơn giản, trong đó chúng ta có một hàm tạo gán các bánh xe và cửa ra vào. Chúng tôi cũng có một phương pháp ghi lại số lượng cửa và bánh xe của ô tô.
Sau đó, chúng tôi tạo một phiên bản mới và chuyển các giá trị của bánh xe và cửa ra vào. Cuối cùng, chúng tôi gọi các describeMe phương pháp trên đó.
Phần #19: Dấu phẩy ở cuối
Trong bài 19, bạn sẽ học cách sử dụng dấu phẩy ở sau. Chúng giúp việc thêm các phần tử, thuộc tính hoặc thuộc tính mới vào mã của bạn trở nên dễ dàng hơn vì bạn có thể làm như vậy mà không phải lo lắng về việc thêm dấu phẩy vào phần tử trước đó.
let arr = [ 1, 2, 3, ];arr.length; // 3
Đây chỉ là một ví dụ đơn giản về việc sử dụng dấu phẩy ở cuối. Bạn sẽ tìm hiểu thêm về chúng trong bài học của chúng tôi trong suốt khóa học của chúng tôi.
Phần #20: Không đồng bộ & Đang chờ
Async & Await là tính năng yêu thích của tôi về ES6. Với Async & Await, chúng ta có thể viết mã không đồng bộ giống như mã đồng bộ. Điều này là sạch sẽ, dễ đọc và dễ hiểu. Vì vậy, trong bài học này, bạn sẽ học một vài ví dụ thực tế về cách sử dụng nó.
let response = await fetch('https://example.com/books');
console.log('response');
Trong ví dụ trên, chúng tôi đã sử dụng từ khóa chờ đợi trước câu lệnh tìm nạp, do đó, nó sẽ đợi cho đến khi kết quả của API này được tìm nạp trước khi chuyển sang dòng tiếp theo.
Phần #21: Async & Await (Thử thách)
Đây là thử thách cuối cùng của khóa học này và tất nhiên đó là về Async & Await. Trước tiên, bạn sẽ được yêu cầu thử chuyển đổi mã dựa trên lời hứa sau đây sang sử dụng Async & Await:
function resolveAfter3Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 3000);
});
}
Đừng lo lắng nếu bạn không thể giải quyết nó hoàn toàn. Dylan sẽ giải thích chi tiết cách thực hiện. Kết thúc bài học, bạn sẽ đủ tự tin để bắt đầu sử dụng ngay.
Phần #22: Bộ
Trong bài giảng cuối cùng của khóa học, bạn sẽ học về một cấu trúc dữ liệu rất quan trọng, Set. Đây là một đối tượng cho phép bạn lưu trữ các giá trị duy nhất. Vì vậy, bất cứ khi nào bạn muốn có một bộ sưu tập chỉ chứa các giá trị duy nhất, bạn có thể sử dụng Sets.
const set1 = new Set([1, 2, 3, 4, 5]);
Phần #23: Tiếp theo là gì?
Để kết thúc khóa học, Dylan đưa ra một số mẹo về cách tiếp tục học thêm và cải thiện mã bạn viết hôm nay.
Và thế là xong! Nếu bạn đạt được điều này, bạn có thể tự vỗ nhẹ vào lưng mình! Bạn đã hoàn thành khóa học và đang tiến một bước gần hơn để trở thành chuyên gia JavaScript.
Cảm ơn vì đã đọc! Tên tôi là Per, tôi là người đồng sáng lập Scrimba và tôi thích giúp mọi người học các kỹ năng mới. theo tôi trên Twitter nếu bạn muốn được thông báo về các bài viết và tài nguyên mới.
Cảm ơn vì đã đọc! Tên tôi là Per Borgen, tôi là người đồng sáng lập Scrimba – cách dễ nhất để học viết mã. Bạn nên xem chương trình đào tạo thiết kế web đáp ứng của chúng tôi nếu muốn học cách xây dựng trang web hiện đại ở cấp độ chuyên nghiệp.
