JavaScript ES6 mang đến cú pháp mới và các tính năng tuyệt vời mới để làm cho mã của bạn hiện đại hơn và dễ đọc hơn. Nó cho phép bạn viết ít mã hơn và làm được nhiều việc hơn. ES6 giới thiệu cho chúng ta nhiều tính năng tuyệt vời như chức năng mũi tên, chuỗi mẫu, hủy lớp, Mô-đun… và hơn thế nữa. Hãy xem qua.
const và để cho
const là một từ khóa mới trong ES6 để khai báo các biến. const mạnh mẽ hơn var. Sau khi được sử dụng, biến không thể được chỉ định lại. Nói cách khác, đó là một biến bất biến ngoại trừ khi nó được sử dụng với các đối tượng.
Điều này thực sự hữu ích để nhắm mục tiêu bộ chọn. Ví dụ: khi chúng tôi có một nút kích hoạt một sự kiện hoặc khi bạn muốn chọn một thành phần HTML trong JavaScript, hãy sử dụng const thay vì var. Điều này là do var là ‘được nâng lên’. Nó luôn luôn tốt hơn để sử dụng const khi không muốn gán lại biến.
Trong đoạn mã trên, const sẽ không thay đổi và không thể gán lại. Nếu bạn cố gắng cung cấp cho nó một giá trị mới, nó sẽ trả về lỗi cho bạn.
let có thể được gán lại và nhận giá trị mới. Nó tạo ra một biến có thể thay đổi.
let giống như const trong đó cả hai đều là phạm vi bị chặn. Nó có nghĩa là biến chỉ có sẵn trong phạm vi của nó.
chức năng mũi tên
Chức năng mũi tên thực sự tuyệt vời và làm cho mã của bạn dễ đọc hơn, có cấu trúc hơn và trông giống như mã hiện đại. Thay vì sử dụng cái này:
Dùng cái này:
Như bạn thấy, chức năng mũi tên có vẻ dễ đọc và rõ ràng hơn! Bạn sẽ không cần sử dụng cú pháp cũ nữa.
Ngoài ra, bạn có thể sử dụng chức năng Mũi tên với map, filtervà reduce Chức năng tích hợp sẵn.
Chức năng bản đồ với các mũi tên trông rõ ràng và dễ đọc hơn map trong ES5. Với ES6, bạn có thể viết mã ngắn hơn và thông minh hơn. Bạn có thể sử dụng tương tự với filter và reduce.
chữ mẫu
Chữ mẫu hoặc chuỗi mẫu khá thú vị. Chúng ta không phải sử dụng toán tử cộng (+) để nối các chuỗi hoặc khi chúng ta muốn sử dụng một biến bên trong một chuỗi.
Cú pháp cũ:
Với cú pháp ES6 mới:
Quá dễ! Đó là một sự khác biệt thực sự lớn giữa cú pháp cũ và ES6. Khi chơi với các chuỗi, chuỗi ký tự trong ES6 trông có tổ chức và cấu trúc tốt hơn so với ES5.
thông số mặc định
Khi tôi làm việc với PHP, tôi thường sử dụng các tham số mặc định. Điều này cho phép bạn xác định trước một tham số.
Vì vậy, khi bạn quên ghi tham số, nó sẽ không trả về lỗi không xác định vì tham số đã được xác định trong mặc định. Vì vậy, khi bạn chạy chức năng của mình với một tham số bị thiếu, nó sẽ lấy giá trị của tham số mặc định tvà nó sẽ không trả về lỗi!
Nhìn vào ví dụ này:
Hàm trên trả về không xác định, vì chúng ta quên cung cấp cho nó tham số thứ hai age.
Nhưng nếu chúng ta sử dụng tham số mặc định, nó sẽ không trả về giá trị không xác định và nó sẽ sử dụng giá trị của nó khi chúng ta quên gán tham số!
Như bạn thấy, hàm trả về một giá trị mặc dù chúng ta đã bỏ qua tham số thứ hai. Bây giờ với tham số mặc định, chúng tôi có thể xử lý lỗi trước.
Phá hủy mảng và đối tượng
Việc hủy làm cho việc gán các giá trị của một mảng hoặc đối tượng cho biến mới dễ dàng hơn.
Cú pháp cũ:
Với cú pháp ES6:
Với ES5, chúng ta phải gán từng giá trị cho từng biến. Với ES6, chúng ta chỉ cần đặt các giá trị của mình trong dấu ngoặc nhọn để lấy bất kỳ thuộc tính nào của đối tượng.
Ghi chú: nếu bạn gán một biến không giống với tên của thuộc tính, nó sẽ trả về không xác định. Ví dụ: nếu tên của thuộc tính là name và chúng tôi gán nó cho một username Biến đổi, nó sẽ trả về không xác định.
Chúng ta luôn phải đặt tên biến giống với tên của thuộc tính. Nhưng trong trường hợp chúng ta muốn đổi tên biến thì có thể sử dụng dấu hai chấm : thay thế.
Đối với mảng, chúng ta sử dụng cú pháp tương tự như đối tượng. Chúng ta chỉ cần thay thế dấu ngoặc nhọn bằng dấu ngoặc vuông.
Nhập khẩu và xuất khẩu
sử dụng import và export trong ứng dụng JavaScript của bạn làm cho nó mạnh mẽ hơn. Chúng cho phép bạn tạo các thành phần riêng biệt và có thể tái sử dụng.
Nếu bạn đã quen thuộc với bất kỳ khung JavaScript MVC nào, bạn sẽ thấy rằng họ sử dụng import và export để xử lý các thành phần hầu hết thời gian. Vậy chúng thực sự hoạt động như thế nào?
Nó đơn giản! export cho phép bạn xuất một mô-đun để sử dụng trong một thành phần JavaScript khác. Chúng tôi sử dụng import để nhập mô-đun đó để sử dụng nó trong thành phần của chúng tôi.
Ví dụ: chúng tôi có hai tệp. Đầu tiên được đặt tên detailComponent.js và thứ hai được đặt tên homeComponent.js.
Trong detailComponent.js chúng tôi sẽ xuất khẩu detail chức năng.
Và nếu chúng ta muốn sử dụng chức năng này trong homeComponent.js, chúng tôi sẽ chỉ sử dụng import.
Nếu chúng tôi muốn nhập nhiều mô-đun, chúng tôi chỉ cần đặt chúng trong dấu ngoặc nhọn.
Thật tuyệt, phải không?!
lời hứa
Promises là một tính năng mới của ES6. Đó là một phương pháp để viết mã không đồng bộ. Ví dụ, nó có thể được sử dụng khi chúng ta muốn tìm nạp dữ liệu từ một API hoặc khi chúng ta có một chức năng cần thời gian để thực thi. Lời hứa giúp giải quyết vấn đề dễ dàng hơn, vì vậy hãy tạo Lời hứa đầu tiên của chúng ta!
Nếu bạn đăng nhập bảng điều khiển của mình, nó sẽ trả về một Lời hứa. Vì vậy, nếu chúng ta muốn thực thi một chức năng sau khi dữ liệu được tìm nạp, chúng ta sẽ sử dụng Promise. Promise có hai tham số: resolve và reject để xử lý một lỗi dự kiến.
Lưu ý: chức năng tìm nạp trả về chính một Lời hứa!
const url="https://jsonplaceholder.typicode.com/posts";const getData=(url)=>{return fetch(url);}getData(url).then(data=> data.json()).then(result=> console.log(result));Bây giờ nếu bạn đăng nhập bảng điều khiển của mình, nó sẽ trả về một mảng dữ liệu.
Tham số còn lại và Toán tử trải rộng
Các tham số còn lại được sử dụng để lấy đối số của một mảng và trả về một mảng mới.
Toán tử trải rộng có cùng cú pháp với tham số còn lại, nhưng toán tử trải rộng lấy chính Mảng chứ không chỉ các đối số. Chúng ta có thể sử dụng tham số Spread để lấy các giá trị của Mảng, thay vì sử dụng vòng lặp for hoặc bất kỳ phương thức nào khác.
const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];
const Func=(...anArray)=>{
return anArray;
}
console.log(Func(arr));
//output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"Các lớp học
Các lớp là cốt lõi của lập trình hướng đối tượng (OOP). Chúng làm cho mã của bạn an toàn hơn và được đóng gói. Việc sử dụng các lớp mang lại cho mã của bạn một cấu trúc đẹp và giữ cho mã được định hướng.
Để tạo một lớp, hãy sử dụng class từ khóa theo sau là tên của lớp với hai dấu ngoặc nhọn.
Bây giờ chúng ta có thể truy cập vào class các phương thức và thuộc tính sử dụng new từ khóa.
class myClass{
constructor(name,age){
this.name=name;
this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)// saidĐể kế thừa từ một lớp khác, hãy sử dụng extends từ khóa theo sau là tên của lớp mà bạn muốn kế thừa từ đó.
Bạn có thể tìm hiểu thêm về Lớp học đây.
ES6 có các tính năng tuyệt vời khác — bạn có thể khám phá chúng tại đây.
Phần kết luận
Tôi hy vọng các bạn thấy bài viết này hữu ích và tôi hy vọng tôi có thể giới thiệu cho các bạn một số tính năng của ES6. Nếu vậy, hãy đăng ký danh sách thư này để tìm hiểu thêm về các chủ đề Front-end. Cảm ơn vì đã dành thời gian cho tôi.
Nhân tiện, gần đây tôi đã làm việc với một nhóm kỹ sư phần mềm hùng hậu cho một trong những ứng dụng di động của mình. Tổ chức rất tuyệt vời và sản phẩm được giao rất nhanh, nhanh hơn nhiều so với các công ty và dịch giả tự do khác mà tôi từng làm việc cùng, và tôi nghĩ rằng tôi có thể thành thật giới thiệu họ cho các dự án khác ngoài kia. Hãy gửi email cho tôi nếu bạn muốn liên lạc — [email protected].
