Home-theater-designers
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 được chuẩn hóa 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à bổ sung thêm nhiều tính năng nhằm giúp phát triển phần mềm quy mô lớn dễ dàng hơn .
ECMAScript, hoặc 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 cho ngôn ngữ đầy đủ vẫn chưa hoàn chỉnh, mặc dù các phần chính được hỗ trợ. 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à người chơi để chuyển đổi mã ES6 thành ES5, được hỗ trợ tốt hơn trên hầu hết các trình duyệt.
Bây giờ chúng ta hãy xem xét một số thay đổi lớn mà ES6 mang lại cho JavaScript.
1. Hằng số
Cuối cùng thì khái niệm hằng số đã được đưa vào JavaScript! Hằng số là các giá trị chỉ có thể được xác định một lần (cho mỗi phạm vi, phạm vi được giải thích bên dưới). Định nghĩa lại trong cùng một phạm vi sẽ gây ra lỗi.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Bạn có thể sử dụng hằng bất cứ nơi nào bạn có thể sử dụng một biến ( ở đâu ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Các biến và hàm theo phạm vi khối
Chào mừng đến với thế kỷ 21, JavaScript! Với ES6, các biến được khai báo bằng cách sử dụng cho phép (và các hằng được mô tả ở trên) tuân theo các quy tắc phạm vi khối giống như trong Java, C ++, v.v. (Để tìm hiểu thêm, hãy xem cách khai báo biến trong JavaScript.)
Trước bản cập nhật này, các biến trong JavaScript đã được xác định phạm vi hàm. Nghĩa là, khi bạn cần một phạm vi mới cho một biến, bạn phải khai báo nó trong một hàm.
Các biến giữ nguyên giá trị cho đến cuối khối. Sau khối, giá trị trong khối bên ngoài (nếu có) được khôi phục.
Làm thế nào cuộc sống của tôi biết ai đang tìm kiếm tôi
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Bạn cũng có thể xác định lại các hằng số, trong các khối như vậy.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Hàm mũi tên
ES6 giới thiệu chức năng mũi tên sang JavaScript. (Các hàm này tương tự như các hàm truyền thống, nhưng có cú pháp đơn giản hơn.) Trong ví dụ sau, NS là một hàm chấp nhận một tham số được gọi là đến và trả về gia số của nó:
var x = a => a + 1;
x(4) // returns 5
Sử 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.
Sử dụng với một cho mỗi() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Xá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. Tham số chức năng mặc định
Các tham số của hàm hiện có thể được khai báo với các giá trị mặc định. Trong những điều sau đây, NS là một hàm có hai tham số đến và NS . Tham số thứ hai NS được cung cấp một giá trị mặc định là 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Khô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 các ngôn ngữ 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ó trở lại giá trị bằng cách minh họa.
var x = (a = 2, b) => { return a * b }
Tuy nhiên, các đối số được khớp từ trái sang phải. Trong lời kêu gọi đầu tiên bên dưới, NS có một không xác định giá trị mặc dù đến đã được khai báo với một giá trị mặc định. Đối số được truyền vào được so khớp với đến còn hơn là NS . Hàm trả về NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Khi bạn chuyển vào một cách rõ ràng không xác định 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ố chức năng còn lại
Khi gọi một hàm, đôi khi nảy sinh nhu cầu để có thể truyền 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ởi tham số chức năng nghỉ ngơi cú pháp. Nó cung cấp một cách để nắm bắt phần còn lại của các đối số sau các đối số được xác định bằng cách sử dụng cú pháp được hiển thị bên dưới. Các đối số bổ sung 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)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 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 cú pháp như perl hoặc shell. Một mẫu chuỗi được bao gồm trong các ký tự đánh dấu lùi ( `` ). Ngược lại các dấu nháy đơn ( ' ) hoặc dấu ngoặc kép ( ' ) chỉ ra các chuỗi bình thường. Các biểu thức bên trong mẫu được đánh dấu giữa $ { 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á.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var 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 chuỗi nhiều dòng.
var x = `hello world
next line`
// returns
hello world
next line
7. Thuộc tính đối tượng
ES6 mang đến một cú pháp tạo đối tượng được đơn giản hóa. Hãy xem ví dụ dưới đây:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Tên thuộc tính được tính toán cũng khá tiện lợi. Với ES5 trở về trước, để đặt thuộc tính đối tượng có tên được tính toán, bạn phải thực hiện điều này:
var x = 'hello world', y = 25
var 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ả chỉ trong một lần định hướng:
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ể định nghĩa nó với tên:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Cú pháp định nghĩa lớp chính thức
Định nghĩa lớp
Và cuối cùng, JavaScript nhận được một cú pháp định nghĩa lớp chính thức. Mặc dù nó chỉ đơn thuần là đường cú pháp trên các lớp dựa trên nguyên mẫu đã có sẵn, nhưng nó phục vụ để tăng cường độ rõ ràng của mã. Điều đó có nghĩa là điều này có không phải thêm một mô hình đối tượng mới hoặc bất cứ thứ gì lạ mắt như vậy.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Khai báo phương thức
Việc xác định một phương thức cũng khá đơn giản. Không có gì ngạc nhiê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
Người nhận và người định cư
Bây giờ chúng tôi cũng có getters và setters, với một bản cập nhật đơn giản cho cú pháp. Hãy để chúng tôi xác định lại Khoanh tròn lớp học với một khu vực bất động sản.
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.26548245743669
Bây giờ chúng ta hãy thêm một người định vị. Để có thể xác định bán kính như một thuộc tính có thể thiết lập, chúng tôi nên xác định lại trường thực tế để _radius hoặc thứ gì đó sẽ không xung đột với người thiết lập. Nếu không, chúng ta gặp phải lỗi tràn ngăn xếp.
Đây là lớp được xác định lại:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Nói chung, đây là một bổ sung tuyệt vời cho JavaScript hướng đối tượng.
Di sản
Ngoài việc xác định các lớp bằng cách sử dụng lớp từ khóa, bạn cũng có thể sử dụng mở rộng từ khóa kế thừa từ siêu lớp. Hãy để chúng tôi xem cách này hoạt động như thế nào với một ví dụ.
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 circle
var 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.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
Và đó là phần giới thiệu ngắn về một số tính năng của JavaScript ES6.
Tiếp theo: làm quen với một vài phương pháp mảng JavaScript quan trọng và viết kịch bản hoạt hình rô bốt nhạy cảm bằng giọng nói! Ngoài ra, hãy tìm hiểu về một khuôn khổ giao diện người dùng tuyệt vời có tên là Vue.
Tín dụng hình ảnh: micrologia / Tiền gửi
Đăng lại Đăng lại tiếng riu ríu E-mail Canon so với Nikon: Thương hiệu máy ảnh nào tốt hơn?Canon và Nikon là hai tên tuổi lớn nhất trong ngành máy ảnh. Nhưng thương hiệu nào cung cấp dòng máy ảnh và ống kính tốt hơn?
cách tăng tốc độ internet trên điện thoạiĐọc tiếp Chủ đề liên quan
- Lập trình
- JavaScript
Theo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký