Thứ Năm, Tháng Bảy 29, 2021

Es6 Là Gì – Ecmascript

ES6 đề cập đến phiên bản 6 của ngôn ngữ lập trình ECMA Script. ECMA Script là tên chuẩn cho JavaScript và phiên bản 6 là phiên bản tiếp theo sau phiên bản 5 được phát hành vào năm 2011. Đây là một cải tiến lớn cho ngôn ngữ JavaScript và thêm nhiều tính năng để giúp việc phát triển phần mềm quy mô lớn dễ dàng hơn.

Đang xem: Es6 là gì

ECMAScript, hay ES6, đã được xuất bản vào tháng 6 năm 2015. Sau đó nó được đổi tên thành ECMAScript 2015. Hỗ trợ trình duyệt web đầy đủ cho ngôn ngữ vẫn chưa hoàn thành, mặc dù việc hỗ trợ cho các phần chính đã được tiến hành. Các trình duyệt web chính hỗ trợ một số tính năng của ES6. Tuy nhiên, có thể sử dụng phần mềm được gọi là trình chuyển đổi để chuyển đổi code ES6 thành ES5, vì ES5 được hỗ trợ tốt hơn trên hầu hết các trình duyệt.

12 tips hay cho JavaScript
24 code ES6 tân tiến để khắc phục các lỗi thực hành JavaScript

*
*
*
*
*

ES6 đưa ra một cú pháp mới để xác định các hàm bằng cách sử dụng một mũi tên. Trong ví dụ sau, x là một hàm chấp nhận một tham số được gọi là a và trả về giá trị của nó:

var x = a => a + 1;x(4) // returns 5Sử dụng cú pháp này, bạn có thể xác định và chuyển các đối số trong các hàm một cách dễ dàng. 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 chấp nhận nhiều đối số bằng cách đặt chúng trong dấu ngoặc đơn:

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

4. Các tham số hàm mặc định

Các tham số hàm có thể được khai báo với các giá trị mặc định. Trong ví dụ sau, x là một hàm có hai tham số a và b. Tham số thứ hai – b được gán một giá trị mặc định là 1.

var x = (a, b = 1) => a * bx(2)// returns 2x(2, 2)// returns 4Không giống như các ngôn ngữ khác như C++ hoặc Python, các tham số có giá trị mặc định có thể xuất hiện trước những tham số không có giá trị mặc định. Lưu ý rằng hàm này được định nghĩa là một khối có giá trị return như sau:

var x = (a = 2, b) => { return a * b }Tuy nhiên, đối số được kết hợp từ trái sang phải. Sau khi được gọi lần đầu như ví dụ bên dưới, b có một giá trị không xác định, mặc dù đã được khai báo với một giá trị mặc định. Đối số được truyền vào sẽ khớp với a thay vì b. Hàm trả về NaN.

x(2)// returns NaNx(1, 3)// returns 3Khi bạn chuyển undefined làm đối số, giá trị mặc định được sử dụng nếu có.

x(undefined, 3)// returns 6

5. Các tham số hàm còn lại

Khi gọi một hàm, đôi khi có một nhu cầu phát sinh, nhằm truyền vào một số lượng đối số tùy ý và xử lý các đối số này trong hàm. Nhu cầu này được xử lý bằng các tham số hàm còn lại. Đây là cách để nắm bắt phần còn lại của các đối số, theo sau các đối số khác được xác định bằng cách sử dụng cú pháp hiển thị bên dưới. Các đối số này được ghi lại 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 đến việc nội suy các biến và biểu thức thành chuỗi, bằng cách sử dụng một cú pháp như perl hoặc shell. Một template chuỗi được đính kèm trong các ký tự dấu kiểm ngược (`). Ngược lại, dấu nháy đơn (‘) hoặc dấu ngoặc kép (“) cho biết các chuỗi bình thường. Biểu thức bên trong mẫu được đánh dấu từ ${ và }. Đây là một ví dụ:

var name = “joe”;var x = `hello ${name}`// returns “hello joe”Tất nhiên, bạn có thể sử dụng một biểu thức tùy ý để đá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// and evaluate the function within the string templatevar x = `hello ${f(v)}`// returns “hello 20″Cú pháp để xác định chuỗi này cũng có thể được sử dụng để xác định các chuỗi nhiều 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 đối tượng đơn giản. 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: y}Tên thuộc tính computed khá tiện lợi. Với ES5 và các phiên bản trước đó, để đặt cho thuộc tính đối tượng một cái tên mang tính computed, bạn phải thực hiện điều này:

var x = “hello world”, y = 25var a = {x: x, y: y}a<"joe" + y> = 4// a is now:{x: “hello world”, y: 25, joe25: 4}Bây giờ bạn có thể làm tất cả trong một bước xác định duy nhất:

var a = {x, y, <"joe" + y>: 4}// returns{x: “hello world”, y: 25, joe25: 4}Và tất nhiên, để xác định các phương thức, bạn chỉ có thể xác định nó bằng tên:

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

8. Cú pháp xác định lớp chính thức

Xác định lớp

Và cuối cùng, JavaScript đưa ra một cú pháp xác định lớp chính thức. Trong khi nó chỉ đơn thuần là cú pháp tạo từ các lớp dựa trên prototype (nguyên mẫu) sẵn có, nó có vai trò tăng cường sự rõ ràng cho code. Điều đó có nghĩa là nó không thêm một đối tượng mới hoặc bất kỳ thứ gì như thế.

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

Phương thức khai báo

Xác định một phương thứ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à Setter

Bây giờ, ta có getter và setter, với một cập nhật đơn giản cho cú pháp. Hãy xác định lại lớp Circle với 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: 4}c.area// returns: 50.26548245743669Bây giờ, hãy thêm một setter. Để có thể xác định radius dưới dạng thuộc tính có thể đặt trước, ta sẽ xác định lại trường thực tế thành _radius hoặc một thứ sẽ không xung đột với setter. Nếu không, ta sẽ gặp “stack overflow error” (lỗi tràn ngăn xếp).

Đây là lớp được xác định lại:

Sự thừa hưởng

Ngoài việc xác định các lớp bằng cách sử dụng từ khóa class, bạn cũng có thể sử dụng từ khóa extends để thừa hưởng từ các siêu lớp (super class). Hãy xem cách 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; } set width(w) { this._width = w; } set 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: 4}c.radius = 2// c is now: Circle {_width: 2, _height: 2}c.area// returns: 12.566370614359172c.radius = 5c.area// returns: 78.53981633974483Trên đây là một giới thiệu ngắn về một số tính năng của JavaScript ES6.

Related Posts

Comments

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

Stay Connected

0Thành viênThích
2,876Người theo dõiTheo dõi
0Người theo dõiĐăng Ký
spot_img

Recent Stories