ECMAScript 2015 [hay gọi tắt là ES6] là phiên bản Thứ Sáu của ECMAScript. Nó xác định tiêu chuẩn cho việc phát triển JavaScript [Hiện tại là ECMAScript 2020]
ES6 đã mang lại những thay đổi đáng kể cho ngôn ngữ JavaScript
Nó giới thiệu một số tính năng mới như, các biến phạm vi khối, vòng lặp mới để lặp qua các mảng và đối tượng và nhiều cải tiến khác để giúp lập trình JavaScript dễ dàng và thú vị hơn
Đặc biệt, các thư viện / framework hiện đại của JavaScript như React. js, Angular, Vue rất hay sử dụng các tính năng mới này
Thế nên, trong bài viết này, hãy cùng tìm hiểu về 11 tính năng của ES6 [tính năng nổi bật nhất], chúng có thể giúp bạn học tập và làm việc đơn giản hơn rất nhiều
#1. TỪ KHÓA let
ES6 giới thiệu từ khóa let
để khai báo các biến. Trước ES6, cách duy nhất để khai báo một biến trong JavaScript là từ khóa var
Vậy sự khác biệt giữa chúng là gì?
Có hai điểm khác biệt quan trọng giữa var và let
- Các biến được khai báo với từ khóa
var
có phạm vi trong hàm [phạm vi chức năng] và hành vi cẩu trong JavaScript xảy ra [nâng cao phần khai báo trên cùng phạm vi của nó]
- Trong khi các biến được khai báo với từ khóa
let
là phạm vi khối{ }
[phạm vi khối]. Bạn bắt buộc phải khai báo rõ ràng trước khi sử dụng chúng. And does not have hoisting at here
Ví dụ, trong ES5 thì
bảng điều khiển. nhật ký [i];
Chúng ta có thể truy cập biến i
mặc dù nó được khai báo bên trong vòng lặp cho
But in ES6
bảng điều khiển. nhật ký [i];
bảng điều khiển. nhật ký [i];
Như bạn có thể thấy trong ví dụ trên, biến i
không thể truy cập được bên ngoài vòng lặp cho
Điều này cũng cho phép chúng ta sử dụng lại cùng một biến tên nhiều lần vì phạm vi của nó bị giới hạn trong khối { }
, dẫn đến khai báo ít biến hơn và mã sạch hơn
#2. TỪ KHÓA const
Từ khóa const
mới được giới thiệu trong ES6 giúp bạn có thể định nghĩa các hằng số
Hằng số ở chế độ chỉ đọc, có nghĩa là bạn không thể gán lại giá trị mới cho họ
We are also being partition by range of the same as let
// Khai Báo và Khởi tạo Hằng số PI
// Cố tình gán lại giá tri cho Hằng số xem thế nào
Tuy nhiên, bạn vẫn có thể thay đổi thuộc tính đối tượng
// Thầy đổi giá trị thuộc tính của đối tượng
const CÔNG TY = { tên. "NIIT", tuổi. 18 };
bảng điều khiển. log[CÔNG TY. tuổi];
bảng điều khiển. log[CÔNG TY. tuổi];
Or change an anar array
// Thay đổi phần tử trong mảng
const COLORS = ["Xanh", "Đỏ", "Tím", "Vàng"];
bảng điều khiển. log[COLORS[0]];
// Gán lại giá trị cho phần tử đầu tiên
bảng điều khiển. log[COLORS[0]];
#3. VÒNG LẶP let
1
Vòng lặp let
2 mới được thiết kế cho phép chúng ta lặp qua mảng hoặc lặp qua đối tượng có thể lặp khác rất dễ dàng
Ngoài ra, mã bên trong vòng lặp được thực thi để từng phần tử của đối tượng có thể lặp lại
This is a ví dụ
để các chữ cái = ["a", "b", "c", "d", "e", "f"];
cho [viết thư của các chữ cái] {
Kết quả
And, ital itqua string [objectable itable]
Kết quả
Vòng lặp let
2 không hoạt động với các đối tượng thông thường vì chúng không thể lặp lại
Nếu bạn muốn lặp lại các thuộc tính của một đối tượng, bạn có thể sử dụng vòng lặp let
4
#4. DỮ LIỆU MẪU
Văn bản mẫu giúp chúng ta dễ dàng và rõ ràng để tạo chuỗi nhiều dòng và thực hiện chuỗi nội suyNó giúp chúng ta có thể nhúng các biến hoặc biểu thức vào một chuỗi ở bất kỳ vị trí nào mà không gặp bất kỳ rắc rối nào
Các chữ mẫu được tạo bằng cách sử dụng các ký tự let
5 [Gần nút let
6 đó] thay vì các dấu nháy kép let
7 hoặc nháy đơn ________0____8 thông thường
Các biến hoặc biểu thức có thể được đặt bên trong chuỗi bằng cú pháp let
9
Hãy xem và so sánh các ví dụ sau để thấy nó có hiệu quả như thế nào
Trong ES5
var str = 'Mình muốn có một chuỗi\n\t' +
'ở trên nhiều dòng như thế này. ';
// Create chuỗi sử dụng biến và biểu thức
var result = 'Tổng của ' + a + ' và ' + b + ' là. ' + [a + b] + '. ';
bảng điều khiển. nhật ký [kết quả]; . 15
Trong ES6
let str = `Mình muốn có một chuỗi
ở trên nhiều dòng như thế này. `;
// Create chuỗi sử dụng biến và biểu thức
để kết quả = `Tổng của ${a} và ${b} là. ${a+b}. `;
bảng điều khiển. nhật ký [kết quả]; . 15
Bạn thấy không, code thực sự nhìn đẹp hơn, dễ đọc hơn nhiều
#5. ĐÁNH GIÁ MẶT ĐỊNH CHO THAM SỐ
Bây giờ, trong ES6, bạn có thể chỉ định giá trị mặc định cho tham số hàm
Điều này có nghĩa là nếu không có đối số nào được cung cấp cho hàm khi nó được gọi thì giá trị tham số mặc định này sẽ được sử dụng. Đây là một trong những tính năng từng được mong đợi nhất trong JavaScript
If as before here
return 'Xin chào ' + tên + '. ';
bảng điều khiển. nhật ký [sayXin chào []];
bảng điều khiển. log[sayHello['Đen Vâu']];
Thì trong ES6, bạn có thể làm thế này
hàm sayXin chào[tên = "NIIT"] {
return `Xin chào ${name}. `;
bảng điều khiển. nhật ký [sayXin chào []];
bảng điều khiển. log[sayHello['Đen Vâu']];
#6. CHỨC NĂNG MŨI TÊN
Arrow Function là một tính năng thú vị khác trong ES6. Nó cung cấp cú pháp rút gọn hơn để viết biểu thức hàm bằng cách bỏ đi từ khóa var
0 và var
1
Các Arrow Function được định nghĩa bằng cú pháp mới, ký hiệu suy ra var
2
Please view ví dụ
// Biểu thức hàm [Biểu thức hàm]
bảng điều khiển. log[sum[2, 3]];
bảng điều khiển. log[sum[2, 3]];
Như bạn thấy trong arrow function ở trên, không có từ khóa var
0 và từ khóa var
1 trong khai báo hàm
Bạn cũng có thể bỏ luôn dấu trích đơn var
5 trong trường hợp có tham số chính xác
bảng điều khiển. nhật ký [hình vuông [5]];
Nhưng bạn sẽ luôn cần sử dụng nó khi bạn có 0 hoặc nhiều hơn một tham số
Ngoài ra, nếu có nhiều hơn một biểu thức trong thân hàm, bạn cần đặt nó trong dấu ngoặc nhọn { }
Trong trường hợp này, bạn cũng cần sử dụng câu lệnh var
1 để trả lại một giá trị
Có một số biến thể về cách bạn có thể viết chức năng mũi tên. Và dưới đây là những cách thường được sử dụng nhất
// Một tham số, Một câu lệnh
var chào = tên => bảng điều khiển. log["Xin chào " + tên + ". "];
chào["NIIT"];
// Tên tham số, Một câu lệnh
bảng điều khiển. log[nhân[6, 9]];
// Một tham số, Câu câu lệnh
bảng điều khiển. log["Đủ tuổi xyz"];
// Tên tham số, Tên câu lệnh
bảng điều khiển. log[chia[10, 2]];
// Không tham số, Một câu lệnh
var xin chào = [] => bảng điều khiển. log['Xin chao ES6'];
Có một sự khác biệt quan trọng giữa hàm thông thường và hàm mũi tên
Không giống như một hàm bình thường, hàm mũi tên không có var
8 của riêng nó, nó lấy var
8 từ hàm bên ngoài [bao quanh nó] nơi nó được định nghĩa [Trong JavaScript, var
8 là ngữ cảnh thực thi hiện tại của một hàm]
Để hiểu rõ điều này, hãy xem các ví dụ sau
chức năng Người[họ Tên, tuổi] {
cái này. getInfo = function[] {
// Ngữ cảnh bên ngoài hàm [Đối tượng Người]
// Ngữ cảnh bên trong hàm [ Đối tượng 'Wind']
bảng điều khiển. nhật ký [cái này. người xây dựng. tên];
bảng điều khiển. log["Tôi là " + this. họ và tên + ". " + cái này. tuổi + " tuổi"];
var p = new Person['Linh Trang', 18];
var printInfo = p. nhận thông tin[];
printInfo[]; . chưa xác định đời
Như ta thấy, var
1 đang có bối cảnh thực thi hiện tại ở bên ngoài [Window] nên var
8 lúc này đề cập đến Window
Viết lại cùng một ví dụ bằng cách sử dụng các mẫu chữ và chức năng mũi tên của ES6
chức năng Người[họ Tên, tuổi] {
cái này. getInfo = function[] {
// Ngữ cảnh bên ngoài hàm [Đối tượng Người]
// Ngữ cảnh bên trong hàm [Đối tượng Người]
bảng điều khiển. nhật ký [cái này. người xây dựng. tên];
bảng điều khiển. log [`Tôi là ${this. Họ và tên}. ${cái này. tuổi} tuổi`];
var p = new Person['Linh Trang', 18];
var printInfo = p. nhận thông tin[];
printInfo[]; . 18 độ
Như bạn có thể thấy, từ khóa var
8 trong ví dụ về đề cập đến ngữ cảnh của hàm bao quanh arrow function là đối tượng var
4, không giống ví dụ trước đề cập đến đối tượng toàn cục var
5
#7. CÁC LỚP HỌC
Trong ES5 trở về trước, các lớp chưa bao giờ tồn tại trong JavaScript
Các lớp được giới thiệu trong ES6 có vẻ tương tự như các lớp trong các đối tượng hướng ngôn ngữ khác, chẳng hạn như Java, PHP. tuy nhiên chúng không hoạt động giống nhau
> Tham khảo. HỌC LẬP TRÌNH JAVA CƠ BẢN
Các lớp trong ES6 giúp tạo các đối tượng, thực hiện kế thừa dễ dàng hơn bằng cách sử dụng từ khóa var
6 và tái sử dụng mã
Trong ES6, bạn có thể khai báo một lớp bằng cách sử dụng từ khóa var
7 mới theo sau là tên lớp
Theo quy ước, tên lớp được viết bằng PascalCase [tức là viết HOA chữ cái đầu tiên của mỗi từ]
> Nếu bạn chưa biết thì xem ngay cách đặt tên trong JavaScript
Vui lòng xem ví dụ bên dưới đây
hàm tạo[chiều dài, chiều rộng] {
trả lại cái này. độ dài * này. chiều rộng;
Ở trên, chúng ta tạo ra một lớp với hàm tạo và một phương thức tính toán
Constructor to start up the first value for object. Nếu bạn không xác định rõ ràng, thì JavaScript cũng tự động bổ sung một hàm tạo rỗng
Bây giờ, ta thực hiện kế thừa lớp như sau
// Tạo lớp Hình vuông kế thừa lớp Hình chữ nhật
lớp Hình vuông mở rộng Hình chữ nhật {
// hàm tạo của lớp con
// Gọi đến hàm tạo của lớp cha
// Phương thức của lớp con
quay lại 2 * [cái này. độ dài + này. chiều rộng];
Bây giờ, ta thử khởi động tạo đối tượng của lớp var
8 và tính toán hình chữ nhật
// Khởi tạo đối tượng [có thể hiện của lớp Rectangle]
để hình chữ nhật = hình chữ nhật mới[5, 10];
// Tính diện tích hình chữ nhật
bảng điều khiển. khúc gỗ [hình chữ nhật. getArea[]];
Tiếp theo, hãy thử tạo đối tượng từ lớp Square và sử dụng phương thức xem của nó nhé
// Khởi tạo đối tượng của lớp Square
bảng điều khiển. nhật ký [hình vuông. getPerimeter[]];
Và vì var
9 kế thừa var
8 nên nó cũng có thể sử dụng phương thức let
1 của var
8
// Tính diện tích hình vuông
bảng điều khiển. nhật ký [hình vuông. getArea[]];
Để chắc chắn, hãy thử kiểm tra kiểu của các đối tượng xem thế nào nhé
// Kiểm tra tra xem đối ượng vừa tạo có
// kiểu đúng với lớp không?
bảng điều khiển. log[ví dụ vuông của Square];
bảng điều khiển. log[ví dụ hình vuông của Hình chữ nhật];
bảng điều khiển. log[ví dụ hình chữ nhật của hình vuông];
Như vậy, trong ví dụ trên, class var
9 đã kế thừa từ var
8 bằng cách sử dụng từ khóa var
6
Lớp kế thừa từ các lớp khác được gọi là lớp dẫn xuất [lớp dẫn xuất] hoặc lớp con [lớp con]
Ngoài ra, bạn phải gọi let
6 trong hàm tạo của lớp con trước khi truy cập ngữ cảnh [this]
Ví dụ. Nếu bạn bỏ qua let
6 và gọi phương thức let
1 trên đối tượng hình let
9, nó sẽ dẫn đến lỗi, vì phương thức let
1 yêu cầu quyền truy cập vào từ khóa var
8
> Lưu ý. Không giống như khai báo hàm, khai báo lớp không được cẩu. Khai báo lớp nằm trong vùng chết tạm thời [TDZ] tương tự như khai báo let
và const
. Do đó, bạn cần khai báo lớp của mình trước khi truy cập nó, nếu điều đó không xảy ra { }
4
#số 8. MÔ-ĐUN
Trước ES6, không hỗ trợ riêng cho các mô-đun trong JavaScript
Mọi thứ bên trong một ứng dụng JavaScript, ví dụ như các biến trên các tệp JavaScript khác nhau, đều có chung một phạm vi
ES6 giới thiệu tệp dựa trên mô-đun, trong đó mỗi mô-đun được biểu diễn bằng một tệp { }
5 riêng biệt
Bây giờ, bạn có thể sử dụng câu lệnh { }
6 hoặc { }
7 trong một mô-đun để xuất hoặc nhập các biến, hàm, lớp hoặc bất kỳ thực thể nào khác đến / từ các mô-đun hoặc tệp khác
Hãy thử tạo một mô-đun, tức là một tệp JavaScript { }
8 và viết vào chương trình sau đó
let chào = "Xin chào ES6. “;
hàm multiplyNumbers[a, b] {
xuất { lời chào, PI, nhân số };
Bây giờ, hãy tạo một tệp JavaScript khác { }
9 và viết mã như sau
nhập { lời chào, PI, nhân số } từ '. /chủ yếu. js';
cảnh báo [chào];
cảnh báo[nhân số[2, 3]];
Cuối cùng, tạo tệp HTML i
0 và với đoạn mã sau và mở tệp HTML này trong quá trình duyệt của bạn
> i
1. Để chương trình hoạt động đúng, bạn cần khai báo i
2 trên thẻ i
3
i
4 [dấu chấm]Tham số Rest chỉ có thể là tham số cuối cùng trong danh sách các tham số và chỉ có thể có tham số Rest
Vui lòng xem ví dụ sau để xem tham số Rest active như thế nào
hàm sortNumbers[. số] {
bảng điều khiển. log[sortNumbers[3, 5, 7]];
bảng điều khiển. log[sortNumbers[3, 5, 7, 1, 0]];
// Kết quả. [0, 1, 3, 5, 7]
Khi tham số Rest là tham số duy nhất trong một hàm, nó sẽ nhận tất cả các tham số được truyền cho hàm
Nếu không, nó sẽ nhận phần còn lại của các tham số vượt quá tham số được đặt tên, ví dụ như sau
hàm mảngNumbers[a, b,. số] {
bảng điều khiển. log[arrayNumbers[3, 5, 7, 1, 0]];
> Lưu ý. Đừng nhầm lẫn giữa các tham số Rest với REST [REpresentational State Transfer]. Phần còn lại không liên quan gì đến các dịch vụ web RESTful
#10. VẬN HÀNH DÂY CHUYỀN
Toán tử Spread, được ký hiệu là i
5, thực hiện chức năng hoàn toàn ngược với phần còn lại của toán tử
Toán tử Spread [tức là chia nhỏ] một mảng và chuyển các giá trị vào hàm đã được định sẵn, như được hiển thị trong ví dụ sau
hàm addNumbers[a, b, c] {
// Cách Truyền mảng làm đối số của hàm
cảnh báo [thêm số. áp dụng[null, số]];
// Sử dụng toán tử Lây lan
cảnh báo [thêm số [. số]];
Toán tử lây lan cũng có thể được sử dụng để thêm các phần tử của một mảng vào một mảng khác mà không cần sử dụng các phương thức mảng như i
6, i
7 hay i
8,
let color1 = ["Xanh", "Đỏ", "Tím"];
let color2 = ["Vàng", "Hồng"];
// Tạo một mảng mới theo cách chèn mảng đã có
để màu = [. color1, "Nâu", "Đen", "Trắng",. màu2];
// ["Xanh", "Đỏ", "Tím", "Nâu", "Đen", "Trắng", "Vàng", "Hồng"]
Khi bạn thấy điều đó, bạn có thể dễ dàng triển khai một mảng vào một mảng khác chỉ với Spread toán học
#11. CHỈ ĐỊNH PHÁ HỦY CẤU TRÚC
Phép gán cấu trúc hủy cấu trúc là một biểu thức giúp dễ dàng trích xuất các giá trị từ mảng hoặc thuộc tính từ các đối tượng, thành các biến riêng biệt bằng cách cung cấp một cú pháp thu gọn hơn
Có hai loại cho phép hủy cấu trúc gán
- Unsigned assembly structure
- Phép gán đối tượng hủy cấu trúc
Vui lòng xem cách hoạt động chính xác của từng loại trong ví dụ sau
Phép gán cấu trúc phân hủy cấu trúc
Trước ES6, để nhận một giá trị riêng lẻ của một mảng, chúng ta cần viết mã như thế này
var colors = ["Xanh", "Đỏ"];
Trong ES6, chúng ta có thể làm điều kiện tương tự chỉ trong một dòng bằng cách sử dụng phép gán cấu trúc mảng bị hủy như sau
let colors = ["Xanh", "Đỏ"];
để [a, b] = màu sắc;
Bạn cũng có thể sử dụng phần còn lại của toán tử khi cho phép hủy cấu trúc mảng, như được hiển thị ở đây
let colors = ["Xanh", "Đỏ", "Tím"];
bảng điều khiển. nhật ký [r];
bảng điều khiển. nhật ký [Mảng. isArray[r]];
Như bạn thấy đó, i
9 bây giờ đại diện cho mảng các phần tử trừ phần từ đầu tiên
Phép gán cấu trúc hủy cấu trúc đối tượng
Trong ES5 để trích xuất các giá trị thuộc tính của một đối tượng, chúng ta cần mã như thế này
var trường = { tên. "NIIT", tuổi. 18 };
bảng điều khiển. nhật ký [tên];
Nhưng trong ES6, bạn có thể trích xuất các giá trị thuộc tính của đối tượng và gán chúng cho các biến một cách dễ dàng như sau
để trường = { tên. "NIIT", tuổi. 18 };
đặt { tên, tuổi } = trường học;
Hầu hết các tính năng mà chúng ta cùng tìm hiểu đều được hỗ trợ trong phiên bản mới nhất của các trình duyệt web chính như Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, v. v
Ngoài ra, bạn có thể sử dụng các công cụ chuyển mã miễn phí như Babel để chuyển mã ES6 hiện tại của bạn sang ES5 để tương thích tốt hơn các trình duyệt khác [hoặc các phiên bản thấp hơn] mà vẫn tận dụng được lợi
Tóm tắt
Trên đây là 11 tính năng của ES6 có thể mang lại cho bạn rất nhiều lợi ích, giúp quá trình lập trình web của bạn dễ dàng hơn
Ngoài ra, còn nhiều tính năng hữu ích khác có thể sẽ giúp ích cho bạn ở bất kỳ thời điểm nào. Xem thêm tại đây
> Nếu bạn đang tích cực học tập để lập trình viên Front end / Back end thì tham gia ngay KHÓA Học JAVA hoặc KHÓA Học PHP để học theo lộ trình bài bản hơn, nhanh chóng đạt mục tiêu của mình hơn
HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI
Học lập trình chất lượng cao [Từ năm 2002]. Học thực tế + Tuyển dụng ngay
Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT. 02435574074 - 0383. 180086
E-mail. xin chào@niithanoi. giáo dục. vn
trang chủ. https. //Facebook. com/NIIT. CNTT-TT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python