HomeLập trìnhJavaScriptJavaScript ES6 —...

JavaScript ES6 — viết ít hơn, làm nhiều hơn


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.

e4r4Zg1XTz395qj9A5hOpHMK0mzH0zwxitK9

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.

kM-LHiezWRHQa0aakmKyPrgd53riDwKnrSUa

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:

CATsmTistmCZaK-7ej4vvuHzY-aqfNhRhevc

Dùng cái này:

jaJg1ODAb7FcbQbWaQ8FwegEmTD4IsTtx7Of

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, filterreduce Chức năng tích hợp sẵn.

2G7fWO8OuCNbdMXa7wiRxoncLZshsRxZ0WYR

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 filterreduce.

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 thêm  Tại sao bạn nên thực hiện Thực tế tăng cường nếu bạn là nhà phát triển JavaScript — và cách bắt đầu

Cú pháp cũ:

pyiP612uJAXA9gvXK0fnmxc9tb6J0WRSB3Nj

Với cú pháp ES6 mới:

O1aAY7ehL3Vtvej0YXuZVXbN3LjHX2-WXzOG

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:

qFmJ6F0gOBdVl4kJ7sFhIqHaGIZx6iehhoML

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ố!

-RczdieWIpZVTLYih1PD4ZJdq2UeurbiMBHu

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ũ:

rsZwpm7Ah7OyThsTpkBsaRUsCwjQBSGCGEfG

Với cú pháp ES6:

rrKo0LFQOblpaAIlywUGrtD8keMqwywZ5MXR

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.

Đọc thêm  Cách xây dựng cầu giao tiếp gốc trong Flutter với WebView và JavaScript

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ế.

zLZ3XTvYSXB3UiRg2W05YXGcHa6GJGqEQJLa

Đố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.

JUcyaqc4T9qdXgQbYCqfbi10THAatzHh64ts

Nhập khẩu và xuất khẩu

sử dụng import 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 importexport để 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.

3K3KNLMTvnsVpk2EEx100lAURNgW7fXzBauC

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.

IB6KSO6rK-574uNXuX5tDUIly6NkqIsT7cpZ

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.

yeJzCdTfkuZed-PL9oLX7DWO-cukNHKrLt-5

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!

zVsFm1MnCkDU9oPLEmfRhLJiA0dyH1nKCa7C

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ố: resolvereject để 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.

Đọc thêm  Đẩy vào một mảng trong JavaScript – Cách chèn một phần tử vào một mảng trong JS

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.

ZGyyj2ByWBRUpEw841VQRKGXPX6KV4aeyRyf
SEt08SKlukqs7SSkDBoRHt-0dc9s2zrEpBDr

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.

2EGxzbm25W2EtzYv67c-N49DAqTMw01iZ2Ok

Để 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.

0K889E--nHdRPGY1nCVvUzCtAWGkDe8vPfCa

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ừ đó.

rTlJ5DgmaUL1ZCoy1EEKxCt4TK2ihUeWVd-M

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]



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status