Javascript es7 là gì?
|
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) Show  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 letES6 giới thiệu từ khóa 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
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 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ề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 #2. TỪ KHÓA constTừ khóa 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
// 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
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
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 let1Vòng lặp 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 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 #4. DỮ LIỆU MẪUVă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ự Các biến hoặc biểu thức có thể được đặt bên trong chuỗi bằng cú pháp 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
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ÊNArrow 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 Các Arrow Function được định nghĩa bằng cú pháp mới, ký hiệu suy ra Please view ví dụ
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 Bạn cũng có thể bỏ luôn dấu trích đơn 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 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
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ó Để hiểu rõ điều này, hãy xem các ví dụ sau
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, 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
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 #7. CÁC LỚP HỌCTrong 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 Trong ES6, bạn có thể khai báo một lớp bằng cách sử dụng từ khóa 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
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
để 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é
bảng điều khiển. nhật ký (hình vuông. getPerimeter()); Và vì
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ể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 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 Ví dụ. Nếu bạn bỏ qua > 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 #số 8. MÔ-ĐUNTrướ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 Bây giờ, bạn có thể sử dụng câu lệnh Hãy thử tạo một mô-đun, tức là một tệp JavaScript
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
cảnh báo (chào); cảnh báo(nhân số(2, 3)); Cuối cùng, tạo tệp HTML > i4 (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
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
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ỀNToán tử Spread, được ký hiệu là 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
// 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ư
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ÚCPhé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
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úcTrướ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 đó, Phép gán cấu trúc hủy cấu trúc đối tượngTrong 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ắtTrê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 |
