Có gì mới trong JavaScript ES6?

JavaScript là ngôn ngữ kịch bản được sử dụng rộng rãi dựa trên đặc tả ECMA Script. Mặc dù JavaScript đã không được phát triển trong nhiều năm, nhưng sự xuất hiện của Ngăn xếp MEAN (MongoDB, Express, Angular, Node) đã dẫn đến một số nâng cấp hữu ích. Do đó, ECMAScript 6 (còn được gọi là ES6 và ECMAScript 2015) đã được phát hành vào tháng 6 năm 2015 và hiện được sử dụng rộng rãi

JavaScript ES6 giới thiệu cú pháp mới cùng với một số tính năng mới được thiết kế để làm cho mã của bạn hiện đại hơn và dễ đọc hơn. Nó cho phép bạn làm được nhiều việc hơn với ít mã hơn

Trong bài viết này, tôi sẽ đề cập đến một số tính năng mới đã được thêm vào ES6

để cho và const

Chúng tôi đã sử dụng

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

1 để khai báo các biến trong các phiên bản trước. Câu lệnh

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

1 khai báo một biến có phạm vi chức năng hoặc phạm vi toàn cầu. Điều này có nghĩa là việc sử dụng từ khóa

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

1 trong một hàm sẽ tạo ra một biến phạm vi hàm có thể được truy cập từ bên trong hàm. Ngoài ra, nếu chúng ta sử dụng từ khóa

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

1 bên ngoài hàm, nó sẽ tạo ra một biến phạm vi toàn cầu. Các biến toàn cầu này có thể được truy cập từ bất kỳ đâu trong tệp mã. Các khai báo

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

1 trùng lặp sẽ không gây ra lỗi và giá trị của biến sẽ được thay đổi trên toàn cầu

xem các mã dưới đây,

đoạn mã 1

• Ở dòng 5 & dòng 12, mặc dù

  getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

  1 được khai báo trong khối

  getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

  7, nó thay đổi giá trị của biến trên toàn cục
• Mặc dù chúng tôi đã sao chép

  getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

  1 trong cùng một khối (phạm vi) trên dòng 18, nhưng không có lỗi nào

Đầu ra 1

cho phép

Trong ES6, từ khóa

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

0 có thể được sử dụng để khai báo các biến phạm vi bị chặn. Các biến phạm vi khối này chỉ có thể được truy cập từ bên trong các khối, không phải trên toàn cầu (chúng tôi không thể truy cập nó từ bên ngoài khối). Xem các mã dưới đây,

đoạn mã 2

• Ở đây Các biến được tạo ở dòng 5 và 12 chỉ khả dụng trong các khối riêng của chúng

Đầu ra 2

Hơn nữa, chúng ta không thể sao chép let trong cùng một phạm vi (Block), làm như vậy sẽ dẫn đến lỗi. Xem mã dưới đây,

Đoạn mã 3

Đầu ra 3

Ghi chú. -

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

0 cung cấp biến có thể thay đổi nghĩa là chúng ta luôn có thể thay đổi giá trị sau khi khai báo. cho Ex

var x=1;
x=2;
console.log(x);  //result is 2

hăng sô

Trong ES6, có một từ khóa mới khác để khai báo biến gọi là const. Nhưng các biến const không thể được gán lại sau khi nó được đặt. Nói cách khác, nó cung cấp một biến bất biến trừ khi nó được sử dụng với các đối tượng hoặc mảng. Xem các mã dưới đây,

Đoạn mã 4

Đầu ra 4

Ghi chú.

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

2 chỉ bảo vệ các biến trực tiếp. Nó không có khả năng bảo vệ các thành phần bên trong. Ví dụ: nó không thể bảo vệ các phần tử trong mảng hoặc các phần tử trong đối tượng. Xem các mã dưới đây,

Đoạn mã 5

Đầu ra 5Hàm mũi tên

Chức năng mũi tên thật tuyệt vời vì nó làm cho mã của bạn dễ đọc hơn, có cấu trúc và trông hiện đại hơn. Xem xét các mã dưới đây,

Đoạn mã 6

Đầu ra 6

Ghi chú. Nếu chúng ta sử dụng từ khóa 'this' trong một hàm thông thường, từ khóa 'this' sẽ đại diện cho hàm gọi hàm. Nhưng nếu chúng ta sử dụng từ khóa 'this' trong hàm mũi tên, thì từ khóa 'this' đó sẽ không đại diện cho người gọi hàm. xem các ví dụ bên dưới

Đoạn mã 7

Đầu ra 7 đối tượng

Xem các ví dụ dưới đây,

Đoạn mã 8

Đầu ra 8

Ghi chú

• Trong Es6, trong đoạn mã trên, dòng 7 và dòng 18 sẽ lưu tên biến là 'key' và giá trị của biến là 'value', theo cặp khóa-giá trị. Khi chúng tôi không biết 'giá trị' của cặp khóa-giá trị trong khi tạo đối tượng, đây là một cách hay
• dòng 8 và dòng 19 sẽ lưu giá trị của biến dưới dạng ‘key’ trong cặp key-value. Đây được gọi là thuộc tính động. Khi chúng tôi không biết 'Khóa' của cặp khóa-giá trị trong khi tạo đối tượng, đây là một cách hay

Đông cứng

Mục tiêu. freeze() là một phương thức được sử dụng để đóng băng một đối tượng. Nó được sử dụng để làm cho một đối tượng trở nên bất biến. do đó ta không thể thêm bớt, sửa đổi các thành phần của đối tượng bị đóng băng

Ghi chú. phương thức freeze() sẽ chỉ đóng băng thành phần cấp 1. các thành phần bên trong của thành phần đối tượng sẽ không bị đóng băng. Xem mã dưới đây,

Đoạn mã 9

Đầu ra 9

Ghi chú. Nếu bạn có một đối tượng sẽ được gửi từ dịch vụ này sang dịch vụ khác và bạn muốn đảm bảo rằng nó không sửa đổi, bạn có thể sử dụng phương thức

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

3

mẫu

Một trong những tính năng hay của ES6 là các mẫu chữ. Khi nối các chuỗi hoặc sử dụng một biến trong một chuỗi, chúng ta không cần sử dụng toán tử dấu cộng (+)

Đoạn mã 10

Đầu ra 10Lớp

Các lớp là cốt lõi của lập trình hướng đối tượng (OOP). ES6 cho phép bạn tạo và sử dụng các lớp. Xem đoạn mã dưới đây,

Đoạn mã 11

Đầu ra 11

Ghi chú

* Trong ES6, chúng ta sử dụng từ khóa ‘constructor’ để khai báo một hàm tạo

* Không cần khai báo biến thể hiện để lưu trữ biến thể hiện. tất cả những gì chúng ta cần làm là gán giá trị trong hàm tạo. (Tham khảo dòng 3&4)

* Tương tự như java, chúng tôi sử dụng từ khóa 'extends' để đạt được sự kế thừa

* Chúng ta sử dụng phương thức super() để gọi constructor của parent

* Tính năng thú vị nhất trong lớp là chúng ta có thể ghi đè một hàm khi chúng ta gọi đối tượng (Tham khảo dòng 26)

Sự phá hủy

Destructuring là quá trình phá vỡ một cấu trúc. Phá hủy cấu trúc dữ liệu có nghĩa là giải nén các giá trị riêng lẻ khỏi cấu trúc dữ liệu theo quan điểm lập trình. Việc hủy cấu trúc có thể được sử dụng trên một Đối tượng hoặc một Mảng trong ES6. Hãy xem xét các mã dưới đây,

Đoạn mã để tiêu hủy

Ghi chú

• Trong đoạn mã trên, Dòng 8 giải nén đối tượng người và gán giá trị cho từng biến. Nếu tên của một biến khớp với một trong các khóa của đối tượng, thì giá trị của khóa đó sẽ được lưu trữ trong biến đó
• Dòng 19 sẽ gán giá trị cho biến dựa trên thứ tự của mảng
• Dòng 28 gán giá trị của biến dựa trên thứ tự của mảng. Sau khi gán, toàn bộ phần tử còn lại trong mảng sẽ được copy sang mảng mới (c1)
• dòng 33 sẽ nhân đôi mảng
• Dòng 41 sẽ hợp nhất 2 mảng đó
• Ở dòng 54, mặc dù chúng ta đã gửi toàn bộ đối tượng dưới dạng tham số, nhưng đối tượng sẽ được giải nén và hai phần tử đó của đối tượng đó sẽ được chuyển thành tham số cho hàm

Gọi lại, Hứa hẹn, Không đồng bộ/Đang chờ

Nút. js sẽ chạy không đồng bộ. Ở đây, Một câu lệnh không đợi câu lệnh trước đó hoàn thành việc thực thi. Để hiểu cách mã không đồng bộ hoạt động, hãy xem mã bên dưới

Đoạn mã 12

Đầu ra 12

Ghi chú. Ở trên, mặc dù function1() được gọi đầu tiên, nhưng function2() hoàn thành việc thực hiện trước, như thể hiện trong kết quả. Điều này là do việc thực thi không đồng bộ. Ở đây, hàm2() không chờ hoàn thành hàm1(). Hơn nữa, vì dòng 19 thực thi trước khi hàm1() và hàm2() kết thúc, nên kết quả là 'không xác định'

Chức năng gọi lại

Giả sử chúng ta đang ở trong một cửa hàng pizza, chúng ta đặt một chiếc bánh pizza và hướng dẫn người bán hàng gọi cho chúng ta khi bánh pizza đã sẵn sàng. Sau đó, chúng tôi sẽ có thể tiếp tục công việc của chúng tôi. Họ sẽ gọi cho chúng tôi khi pizza đã sẵn sàng để chúng tôi có thể đi lấy nó. Chức năng gọi lại hoạt động theo cách tương tự

Giả sử rằng khi chúng ta gọi hàm(), chúng ta chuyển hàm() làm tham số cho FunctionA(). Kết quả là khi function() kết thúc, nó sẽ gọi function(). Đây là cách chúng ta có thể sử dụng các hàm gọi lại để quản lý mã không đồng bộ. Nhìn vào đoạn mã dưới đây,

Đoạn mã 13

Đầu ra 13

Chúng ta có thể thấy rằng bằng cách sử dụng chức năng gọi lại, chúng ta có thể thực thi mã theo một thứ tự cụ thể

lời hứa

Khi số lượng chức năng gọi lại tăng lên, nó sẽ trở nên phức tạp hơn. Nó được đặt tên là "địa ngục gọi lại". Chúng ta có thể sử dụng lời hứa để giải quyết vấn đề này một cách hiệu quả

Một chức năng cần thời gian để hoàn thành việc thực thi của nó, sẽ trả về một lời hứa khi chúng ta gọi chức năng đó. Có hai trạng thái có thể xảy ra cho một lời hứa, đó là 'giải quyết' và 'từ chối'. Khi chức năng được hoàn thành thành công, chúng ta có thể sử dụng then() để tiếp tục thực hiện. Nếu hàm trả về bất kỳ lỗi nào, chúng ta có thể sử dụng catch() để xử lý lỗi

Để minh họa cách lời hứa hoạt động, hãy xem xét ví dụ dưới đây. Giả sử chúng tôi đang gửi thông tin về chi tiết tài khoản của khách hàng tới hệ thống. Tùy vào loại tài khoản mà hệ thống sẽ tính số tiền lãi. Nếu không tìm thấy bản ghi nào, hệ thống sẽ báo lỗi. Nhìn vào các mã dưới đây,

Đoạn mã lời hứa

Xuất ra đoạn mã trên

Đang chờ không đồng bộ

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

4 và

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

5 giúp viết lời hứa dễ dàng hơn. Từ khóa

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

4 trước một hàm làm cho hàm trả về một lời hứa. Từ khóa

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

5 trước một chức năng làm cho chức năng chờ một lời hứa. Từ khóa

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

5 chỉ có thể được sử dụng bên trong hàm

getAccount(client_accounts,"John Doe") .then(account=>getInterestDetails(account)) .then(interestDetails=>getInterest(interestDetails.amount,interestDetails.rate)).then(interest=>console.log("Interest is "+interest)).catch((error)=>console.log(error));

4. Hãy chuyển đổi mã trên bằng Async / Await

5 tính năng mới trong ES6 là gì?

Có gì mới trong JavaScript ES7?

Có gì mới trong ECMAScript 2022?

JavaScript ES6 có mới nhất không?