Es6 là gì

ES6 đề cùa tới phiên phiên bản 6 của ngôn từ lập trình sẵn ECMA Script. ECMA Script là tên chuẩn cho JavaScript cùng phiên phiên bản 6 là phiên bạn dạng tiếp sau sau phiên bản 5 được xây cất vào khoảng thời gian 2011. Đây là 1 trong đổi mới Khủng cho ngôn ngữ JavaScript và thêm những khả năng sẽ giúp đỡ việc cách tân và phát triển phần mềm quy mô Khủng tiện lợi hơn.

Bạn đang xem: Es6 là gì

ECMAScript, xuất xắc ES6, đã có được xuất bản trong thời điểm tháng 6 năm 2015. Sau kia nó được thay tên thành ECMAScript 2015. Hỗ trợ trình coi xét web khá đầy đủ cho ngữ điệu vẫn không dứt, tuy nhiên vấn đề cung ứng cho những phần thiết yếu đã làm được thực hiện. Các trình chăm bẵm website thiết yếu cung ứng một vài kĩ năng của ES6. Tuy nhiên, rất có thể áp dụng ứng dụng được call là trình biến hóa nhằm thay đổi code ES6 thành ES5, vị ES5 được hỗ trợ xuất sắc hơn trên phần nhiều các trình chuẩn y.


12 tips tuyệt cho JavaScript
24 code ES6 hiện đại để khắc chế các lỗi thực hành thực tế JavaScript

*
*
*
*
*

ES6 chỉ dẫn một cú pháp mới nhằm xác minh những hàm bằng phương pháp áp dụng một mũi thương hiệu. Trong ví dụ sau, x là một trong hàm gật đầu một tham mê số được Call là a và trả về quý hiếm của nó:

var x = a => a + 1;x(4) // returns 5Sử dụng cú pháp này, chúng ta có thể xác định cùng chuyển những đối số trong những hàm một cách thuận lợi. Hãy sử dụng forEach():

<1, 2, 3, 4>.forEach(a => console.log(a + " => " + a*a))// prints1 => 12 => 43 => 94 => 16Xác định các hàm đồng ý những đối số bằng phương pháp đặt chúng trong vết ngoặc đơn:

<22, 98, 3, 44, 67>.sort((a, b) => a - b)// returns<3, 22, 44, 67, 98>

4. Các tmê say số hàm mang định

Các ttê mê số hàm rất có thể được khai báo cùng với những cực hiếm mang định. Trong ví dụ sau, x là 1 trong những hàm có nhị tham số a và b. Tsay đắm số sản phẩm công nghệ nhì – b được gán một giá trị khoác định là 1.

var x = (a, b = 1) => a * bx(2)// returns 2x(2, 2)// returns 4Không y như những ngôn từ khác như C++ hoặc Pybé nhỏ, các tmê mệt số có mức giá trị mặc định có thể xuất hiện thêm trước đa số tsi số không có quý hiếm mang định. Lưu ý rằng hàm này được khái niệm là 1 trong những khối có mức giá trị return nhỏng sau:

var x = (a = 2, b) => return a * b Tuy nhiên, đối số được phối hợp trường đoản cú trái lịch sự đề nghị. Sau Lúc được gọi lần thứ nhất nlỗi ví dụ dưới, b bao gồm một quý hiếm không xác định, tuy vậy đã có knhì báo với cùng 1 giá trị mặc định. Đối số được truyền vào sẽ khớp với a nuốm vì b. Hàm trả về NaN.

x(2)// returns NaNx(1, 3)// returns 3khi các bạn chuyển undefined có tác dụng đối số, cực hiếm mặc định được áp dụng trường hợp bao gồm.

x(undefined, 3)// returns 6

5. Các tmê mẩn số hàm còn lại

Khi hotline một hàm, thỉnh thoảng gồm một nhu yếu tạo nên, nhằm mục đích truyền vào một vài lượng đối số tùy ý với cách xử trí những đối số này trong hàm. Nhu cầu này được giải pháp xử lý bởi những tmê mệt số hàm sót lại. Đây là cách để nắm bắt phần sót lại của các đối số, theo sau các đối số khác được khẳng định bằng phương pháp thực hiện cú pháp hiển thị dưới. Các đối số này được đánh dấu trong một mảng.

var x = function(a, b, ...args) console.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); x(2, 3)// printsa = 2, b = 3, 0 args leftx(2, 3, 4, 5)// printsa = 2, b = 3, 2 args left

6. String templating

String templating đề cập tới câu hỏi nội suy những vươn lên là và biểu thức thành chuỗi, bằng phương pháp áp dụng một cú pháp như perl hoặc shell. Một template chuỗi được đính kèm trong số cam kết trường đoản cú vết kiểm ngược (`). trái lại, lốt nháy đối chọi (‘) hoặc giấu ngoặc knghiền (“) cho biết thêm các chuỗi bình thường. Biểu thức bên trong chủng loại được ghi lại từ $ và . Đây là một ví dụ:

var name = "joe";var x = `hello $name`// returns "hello joe"Tất nhiên, chúng ta có thể áp dụng một biểu thức tùy ý nhằm Đánh Giá.

Xem thêm: " Đun Cách Thủy Là Gì - Nghĩa Của Từ Đun Cách Thuỷ Trong Tiếng Việt

// define an arrow functionvar f = a => a * 4// set a parameter valuevar v = 5// và evaluate the function within the string templatevar x = `hello $f(v)`// returns "hello 20"Cú pháp để khẳng định chuỗi này cũng hoàn toàn có thể được áp dụng để xác minh những chuỗi những dòng.

var x = `hello worldnext line`// returnshello worldnext line

7. Thuộc tính đối tượng

ES6 đưa ra một cú pháp tạo nên đối tượng người sử dụng đơn giản và dễ dàng. Hãy xem ví dụ dưới đây:

var x = "hello world", y = 25var a = x, y // is equivalent to the ES5:x: x, y: yTên trực thuộc tính computed hơi thuận tiện. Với ES5 cùng các phiên bản trước đó, để tại vị cho trực thuộc tính đối tượng người tiêu dùng một cái thương hiệu mang ý nghĩa computed, các bạn bắt buộc triển khai điều này:

var x = "hello world", y = 25var a = x: x, y: ya<"joe" + y> = 4// a is now:x: "hello world", y: 25, joe25: 4Bây tiếng bạn cũng có thể có tác dụng toàn bộ vào một bước xác minh duy nhất:

var a = x, y, <"joe" + y>: 4// returnsx: "hello world", y: 25, joe25: 4Và tất yếu, để xác minh những cách tiến hành, bạn chỉ có thể khẳng định nó bởi tên:

var a = x, y, <"joe" + y>: 4, foo(v) return v + 4 a.foo(2)// returns6

8. Cú pháp xác minh lớp thiết yếu thức

Xác định lớp

Và sau cùng, JavaScript chỉ dẫn một cú pháp khẳng định lớp thừa nhận. Trong Lúc nó chỉ solo thuần là cú pháp chế tạo từ các lớp dựa trên prototype (nguim mẫu) sẵn có, nó bao gồm sứ mệnh tăng tốc sự cụ thể cho code. Điều đó tức là nó không thêm một đối tượng người tiêu dùng new hoặc ngẫu nhiên sản phẩm công nghệ gì như vậy.

class Circle constructor(radius) this.radius = radius // use itvar c = new Circle(4)// returns: Circle radius: 4

Pmùi hương thức knhì báo

Xác định một thủ tục cũng khá đơn giản.

class Circle constructor(radius) this.radius = radius computeArea() return Math.PI * this.radius * this.radius var c = new Circle(4)c.computeArea()// returns: 50.26548245743669

Getter với Setter

Bây giờ đồng hồ, ta có getter và setter, với cùng một update đơn giản dễ dàng đến cú pháp. Hãy xác minh lại lớp Circle cùng với trực thuộc tính area.

class Circle constructor(radius) this.radius = radius get area() return Math.PI * this.radius * this.radius var c = new Circle(4)// returns: Circle radius: 4c.area// returns: 50.26548245743669Bây tiếng, hãy thêm 1 setter. Để có thể xác định radius bên dưới dạng nằm trong tính có thể đặt trước, ta đang khẳng định lại trường thực tế thành _radius hoặc một sản phẩm sẽ không xung bất chợt với setter. Nếu không, ta vẫn gặp gỡ “staông xã overflow error” (lỗi tràn ngnạp năng lượng xếp).

Đây là lớp được khẳng định lại:

Sự vượt hưởng

Ngoài vấn đề khẳng định những lớp bằng phương pháp thực hiện trường đoản cú khóa class, chúng ta cũng có thể sử dụng từ bỏ khóa extends nhằm thừa kế từ những siêu lớp (super class). Hãy xem bí quyết làm việc này bằng một ví dụ.

Xem thêm: Giải Pháp Pen Là Gì - Luyện Thi Đại Học Cùng Giải Pháp Pen 2021

class Ellipse constructor(width, height) this._width = width; this._height = height; get area() return Math.PI * this._width * this._height; phối width(w) this._width = w; phối height(h) this._height = h; class Circle extends Ellipse constructor(radius) super(radius, radius); set radius(r) super.width = r; super.height = r; // create a circlevar c = new Circle(4)// returns: Circle _width: 4, _height: 4c.radius = 2// c is now: Circle _width: 2, _height: 2c.area// returns: 12.566370614359172c.radius = 5c.area// returns: 78.53981633974483Trên đó là một giới thiệu nđính thêm về một vài kĩ năng của JavaScript ES6.


Chuyên mục: Hỏi Đáp