ECMAScript 6 - 10 tính năng mới tuyệt vời
Bạn có biết rằng JavaScript (cùng với JScript và ActionScript) là một triển khai của đặc tả ngôn ngữ kịch bản lệnh phía máy khách có tên chung là ECMAScript không? Để làm cho định nghĩa khó chịu này hấp dẫn hơn một chút, chúng ta có thể nói rằng ECMAScript (hoặc chính thức là ECMA-262) là tiêu chuẩn xác định cách chúng ta sử dụng JavaScript và những gì chúng ta có thể thực hiện với nó.
Phiên bản mới nhất, thứ 6 của ngôn ngữ, ECMAScript 2015 (hoặc ES6) có lẽ là bản cập nhật quan trọng nhất kể từ phiên bản đầu tiên vào năm 1997. Mục tiêu chính của phiên bản mới nhất là hỗ trợ tốt hơn cho việc tạo các ứng dụng và thư viện lớn hơn. Điều này có nghĩa là một cú pháp trưởng thành hơn, các phím tắt mới để giúp mã hóa dễ dàng hơn và cả các phương thức, từ khóa, loại dữ liệu mới và nhiều cải tiến khác.
Tài liệu ES6 rất phong phú, nếu bạn muốn đọc nhiều, bạn có thể tải xuống toàn bộ thông số kỹ thuật từ trang web của ECMA International. Trong bài đăng này, chúng tôi sẽ xem xét 10 tính năng được lựa chọn cẩn thận, mặc dù ES6 có nhiều hơn nữa để cung cấp. Nếu bạn muốn thử nghiệm với nó, ES6 Fiddle là một nơi tuyệt vời để làm điều đó và bạn cũng có thể tìm thấy một số đoạn mã mẫu ở đó.
Hỗ trợ cho ECMAScript 6
Các nhà cung cấp trình duyệt đã dần dần thêm hỗ trợ cho các tính năng của ECMAScript 6. Bạn có thể tìm thấy một bảng tương thích thú vị ở đây về hỗ trợ trình duyệt và trình biên dịch cho các tính năng mới.
Nếu bạn quan tâm đến hỗ trợ ES6 trong Node.js, hãy xem tài liệu ở đây.
Mặc dù hiện tại không phải tất cả các tính năng đều được hỗ trợ, chúng tôi có thể sử dụng các bộ chuyển đổi như Babel để dịch mã ES6 của chúng tôi sang ES5. Có một plugin Grunt tuyệt vời cho Babel, nhiều plugin ES6 tuyệt vời cho Grunt và một plugin Gulp-Babel tuyệt vời ngoài đó, thật may mắn là chúng ta có nhiều sự lựa chọn.
Bằng cách này, chúng tôi có thể bắt đầu sử dụng cú pháp và khả năng nâng cao, trong khi chúng tôi không phải lo lắng về các vấn đề về khả năng tương thích. Bây giờ hãy xem các tính năng.
1. Mới để cho Từ khóa
ES6 giới thiệu mới để cho từ khóa cho phép chúng ta khai báo các biến cục bộ trong phạm vi của một khối, chẳng hạn như một câu lệnh, một biểu thức hoặc một hàm (n bên trong). Ví dụ: chúng ta có thể khai báo cho lặp theo cách sau, sau đó sử dụng lại cùng tên biến (vì phạm vi của nó bị giới hạn ở cho vòng lặp) bên trong tiếp theo nếu tuyên bố:
cho (cho i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Chúng tôi sử dụng lại "i" let i = x * y
Sử dụng để cho từ khóa dẫn đến một mã sạch hơn và có thể sử dụng hơn. Sự khác biệt giữa để cho và var là trong phạm vi, ví dụ một biến cục bộ được xác định bởi var từ khóa có thể được sử dụng trong toàn bộ hàm kèm theo, trong khi các biến được xác định bởi để cho chỉ làm việc trong khối (phụ) của riêng họ. Để cho cũng có thể được sử dụng trên toàn cầu, trong trường hợp này, nó hoạt động giống như var. Tất nhiên, trong ES6 chúng ta vẫn có thể sử dụng var nếu chúng tôi muốn.
2. Mới ch Từ khóa
Cái mới ch từ khóa cho phép khai báo các hằng số, còn được gọi là các biến không thay đổi, mà sau đó chúng ta không thể gán lại nội dung mới.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Lỗi im lặng, vì chúng ta không thể gán lại giá trị mới cho hằng số
Các biến không thay đổi không phải lúc nào cũng hoàn toàn bất biến trong ECMAScript 6, vì nếu một hằng số giữ một đối tượng, sau đó chúng ta có thể thay đổi giá trị của các thuộc tính và phương thức của nó. Điều này cũng đúng với các phần tử của một mảng.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 Other_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
Chúng tôi vẫn không thể trực tiếp gán lại một giá trị mới cho đối tượng MY_CONSTANT trong đoạn mã trên, điều đó có nghĩa là chúng tôi không thể thay đổi tên của các thuộc tính và phương thức, cũng không thể thêm mới hoặc xóa một giá trị hiện có, vì vậy chúng tôi không thể thực hiện điều sau đây
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // lỗi
3. Chức năng mũi tên
ECMAScript 6 tạo điều kiện cho cách chúng ta viết chức năng ẩn danh, như chúng ta hoàn toàn có thể bỏ qua chức năng từ khóa. Chúng ta chỉ cần sử dụng cú pháp mới cho chức năng mũi tên, được đặt tên theo dấu => mũi tên (mũi tên béo), cung cấp cho chúng ta một phím tắt tuyệt vời.
// 1. Một tham số trong ES6 let sum = (a, b) => a + b; // trong ES5 var sum = function (a, b) return a + b; ; // 2. Không có tham số trong ES6 let RandomNum = () => Math.random (); // trong ES5 var RandomNum = function () return Math.random (); ; // 3. Không trả về trong ES6, hãy để message = (name) => alert ("Hi" + name + "!"); // trong ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ; Có một sự khác biệt quan trọng giữa các chức năng thông thường và mũi tên, đó là chức năng mũi tên không nhận được điều này giá trị tự động giống như các hàm được xác định với chức năng từ khóa làm. Chức năng mũi tên liên kết từ vựng các điều này giá trị cho phạm vi hiện tại. Điều này có nghĩa là chúng ta có thể dễ dàng sử dụng lại điều này từ khóa trong một chức năng bên trong. Trong ES5 chỉ có thể với hack sau:
// ES5 Hack để sử dụng từ khóa "this" trong một hàm bên trong Thay addAll: function addAll (Pieces) var self = this; _.each (miếng, hàm (mảnh) self.add (mảnh);); , Khác // ES6 cùng một chức năng bên trong bây giờ có thể sử dụng "this" riêng addAll: function addAll (Pieces) _.each (Pieces, mảnh => this.add (mảnh)); , Ngày
Mã ở trên là từ Mozilla Hacks
4. Mới Lan tràn Nhà điều hành
Cái mới Lan tràn Toán tử được đánh dấu bằng 3 dấu chấm (Nhận) và chúng ta có thể sử dụng nó để ký tên vào vị trí của nhiều mục dự kiến. Một trong những trường hợp sử dụng phổ biến nhất của toán tử trải là chèn các phần tử của một mảng vào một mảng khác:
hãy để myArray = [1, 2, 3]; let newArray = [Nhận myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Chúng ta cũng có thể tận dụng đòn bẩy của Lan tràn toán tử trong các lệnh gọi hàm mà chúng ta muốn truyền vào các đối số từ một mảng:
hãy để myArray = [1, 2, 3]; hàm tổng (a, b, c) return a + b + c; console.log (sum (Nhận myArray)); // 6
Các Lan tràn Toán tử khá linh hoạt, vì nó có thể được sử dụng nhiều lần trong cùng một mảng hoặc gọi hàm.
5. Giá trị mặc định cho tham số & tham số phần còn lại mới
Tin vui là trong ECMAScript 6 chúng ta có thể thêm các giá trị mặc định vào các tham số của hàm. Điều này có nghĩa là nếu chúng ta không chuyển các đối số sau này trong lệnh gọi hàm, các tham số mặc định sẽ được sử dụng. Trong ES5, các giá trị mặc định của tham số luôn được đặt thành chưa xác định, Vì vậy, khả năng mới để đặt chúng thành bất cứ điều gì chúng ta muốn chắc chắn là một sự cải tiến tuyệt vời của ngôn ngữ.
hàm tổng (a = 2, b = 4) trả về a + b; console.log (sum ()); // 6 console.log (tổng (3, 6)); // 9
ES6 cũng giới thiệu một loại tham số mới, thông số nghỉ ngơi. Họ nhìn và làm việc tương tự như các nhà khai thác lây lan. Chúng sẽ hữu ích nếu chúng ta không biết có bao nhiêu đối số sẽ được truyền vào sau trong lệnh gọi hàm. Chúng ta có thể sử dụng các thuộc tính và phương thức của đối tượng Array trên các tham số phần còn lại:
function putInAlph.us (Cuộc tranh luận) let sort = args.sort (); trả lại sắp xếp; console.log (putInAlph.us ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. Mới cho người của Tuyên bố
Với sự giúp đỡ của cái mới cho người của vòng lặp chúng ta có thể lặp lại qua các mảng hoặc các đối tượng lặp khác một cách dễ dàng. Cùng với cái mới cho người của câu lệnh, ECMAScript 6 cũng giới thiệu hai đối tượng lặp mới, Bản đồ cho bản đồ khóa / giá trị và Đặt cho các bộ sưu tập các giá trị duy nhất cũng có thể là giá trị nguyên thủy và tham chiếu đối tượng. Khi chúng ta sử dụng cho người của câu lệnh, mã bên trong khối được thực thi cho từng phần tử của đối tượng lặp.
hãy để myArray = [1, 2, 3, 4, 5]; để tổng = 0; for (let i of myArray) sum + = i; console.log (tổng hợp); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Mẫu văn
ECMAScript 6 cung cấp cho chúng tôi một giải pháp thay thế mới cho nối chuỗi. Mẫu chữ cho phép chúng tôi dễ dàng tạo các mẫu trong đó chúng tôi có thể nhúng các giá trị khác nhau vào bất kỳ vị trí nào chúng tôi muốn. Để làm như vậy chúng ta cần sử dụng $ ' cú pháp ở mọi nơi mà chúng ta muốn chèn dữ liệu mà chúng ta có thể truyền vào từ các biến, mảng hoặc đối tượng theo cách sau:
hãy để khách hàng = title: 'Ms', tên đầu tiên: 'Jane', họ: 'Doe', tuổi: '34'; hãy để template = 'Kính gửi $ customer.title $ customer.firstname $ customer.surname! Chúc mừng sinh nhật $ customer.age! '; console.log (mẫu); // Kính gửi cô Jane Doe! Chúc mừng sinh nhật lần thứ 34!
8. Lớp học
ES6 giới thiệu các lớp JavaScript được xây dựng dựa trên sự kế thừa dựa trên nguyên mẫu hiện có. Cú pháp mới làm cho việc tạo các đối tượng trở nên đơn giản hơn, tận dụng tính kế thừa và sử dụng lại mã. Nó cũng sẽ giúp người mới bắt đầu đến từ các ngôn ngữ lập trình khác dễ hiểu hơn về cách JavaScript hoạt động.
Trong các lớp ES6 được khai báo với mới lớp học từ khóa, và cần phải có một constructor() phương thức được gọi khi một đối tượng mới được khởi tạo bằng cách sử dụng myClass mới () cú pháp. Cũng có thể mở rộng các lớp mới với Lớp học mở rộng Cha mẹ cú pháp có thể quen thuộc với các ngôn ngữ hướng đối tượng khác như PHP. Điều quan trọng cần biết là, không giống như khai báo hàm và khai báo biến, khai báo lớp KHÔNG được nâng lên trong ECMAScript 6.
class Polygon constructor (height, width) // class constructor this.name = 'Polygon'; this .height = height; this. thong = width; sayName () // phương thức class console.log ('Xin chào, tôi là một', this.name + '.'); hãy để myPolygon = đa giác mới (5, 6); console.log (myPolygon.sayName ()); // Xin chào, tôi là người đa giác. Mã ở trên từ ví dụ ES6 Fiddle, .
9. Mô-đun
Bạn đã bao giờ tự hỏi về việc nó sẽ tuyệt vời như thế nào nếu JavaScript là mô-đun? Tất nhiên, đã có các cách giải quyết như CommonJS (được sử dụng trong Node.js) hoặc AMD (Định nghĩa mô-đun không đồng bộ) (được sử dụng trong RequireJS) để làm điều đó trước đây, nhưng ES6 giới thiệu các mô-đun như một tính năng gốc.
Chúng ta cần xác định từng mô-đun trong tệp riêng của mình, sau đó sử dụng xuất khẩu từ khóa để xuất các biến và hàm đến các tập tin khác và nhập khẩu từ khóa để nhập chúng từ các tệp khác, theo cú pháp sau:
// khối hàm Hàm.js (a) return a * a * a; hàm cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // hoặc: export cube as cb, cubeRoot as cr // app.js import cube, cubeRoot từ 'Hàm'; console.log (khối lập phương (4)); // 64 console.log (cubeRoot (125)); // 5
Giải pháp này rất tuyệt vời, vì mã được lưu trữ trong một mô-đun là vô hình từ bên ngoài và chúng ta chỉ cần xuất phần mà chúng ta muốn truy cập bởi các tệp khác. Chúng tôi có thể làm nhiều điều tuyệt vời hơn với Mô-đun ES6, ở đây bạn có thể tìm thấy một lời giải thích tuyệt vời và chi tiết về chúng.
10. Tải các phương thức mới
ECMAScript 6 giới thiệu nhiều phương thức mới cho Nguyên mẫu chuỗi, Đối tượng mảng, Nguyên mẫu mảng và Đối tượng toán học hiện có. Các phương thức mới có thể cải thiện đáng kể cách chúng ta có thể thao túng các thực thể này. Mozilla Dev có các ví dụ mã tuyệt vời về các bổ sung mới, đáng để dành thời gian và kiểm tra kỹ lưỡng chúng.
Chỉ để cho thấy chúng thực sự tuyệt như thế nào, đây là sở thích của tôi: phương thức tìm kiếm của nguyên mẫu Array, cho phép chúng tôi kiểm tra một tiêu chí nhất định về các phần tử của mảng bằng cách thực hiện hàm gọi lại trên mỗi phần tử, sau đó trả về phần tử đầu tiên trả lại thật.
hàm isPrime (phần tử, chỉ mục, mảng) var start = 2; trong khi (bắt đầu <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // không xác định, không tìm thấy console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Mã ở trên từ: Mozilla Dev
