JavaScript ES6 (còn được gọi là ECMAScript 2015 hoặc ECMAScript 6) là phiên bản JavaScript mới hơn được giới thiệu vào năm 2015.
ECMAScript là tiêu chuẩn mà ngôn ngữ lập trình JavaScript sử dụng. ECMAScript cung cấp quy định về cách ngôn ngữ lập trình JavaScript hoạt động.
Hướng dẫn này cung cấp một tóm tắt ngắn gọn về các tính năng thường được sử dụng của ES6 để bạn có thể bắt đầu nhanh chóng với ES6.
JavaScript let
JavaScript let được sử dụng để khai báo biến. Trước đây, biến được khai báo bằng từ khóa var.
Các biến được khai báo bằng let là phạm vi khối. Điều này có nghĩa rằng chúng chỉ có thể truy cập trong một khối cụ thể. Ví dụ,
// variable declared using let
let name = 'Sara';
{
// can be accessed only inside
let name = 'Peter';
console.log(name); // Peter
}
console.log(name); // Sara
JavaScript const
Lệnh const được sử dụng để khai báo hằng số trong JavaScript. Ví dụ,
// name declared with const cannot be changed
const name = 'Sara';
Một khi đã khai báo, bạn không thể thay đổi giá trị của biến const.
JavaScript Arrow Function
Trong phiên bản ES6, bạn có thể sử dụng hàm mũi tên để tạo biểu thức hàm. Ví dụ,
Hàm này
// function expression
let x = function(x, y) {
return x * y;
}
có thể được viết như sau
// function expression using arrow function
let x = (x, y) => x * y;
JavaScript Classes
class Person {
constructor(name) {
this.name = name;
}
}
Từ khóa class được sử dụng để tạo một lớp. Các thuộc tính được gán trong hàm tạo.
Bây giờ bạn có thể tạo một đối tượng. Ví dụ,
class Person {
constructor(name) {
this.name = name;
}
}
const person1 = new Person('John');
console.log(person1.name); // John
Giá trị Tham số Mặc định
Trong phiên bản ES6, bạn có thể truyền giá trị mặc định trong các tham số của hàm. Ví dụ,
function sum(x, y = 5) {
// take sum
// the value of y is 5 if not passed
console.log(x + y);
}
sum(5); // 10
sum(5, 15); // 20
Trong ví dụ trên, nếu bạn không truyền tham số cho y, nó sẽ lấy mặc định là 5.
JavaScript Template Literals
Template literal đã làm cho việc bao gồm biến trong một chuỗi dễ dàng hơn. Ví dụ, trước đây bạn phải làm như sau:
const first_name = "Jack";
const last_name = "Sparrow";
console.log('Hello ' + first_name + ' ' + last_name);
Điều này có thể được thực hiện bằng cách sử dụng template literal:
const first_name = "Jack";
const last_name = "Sparrow";
console.log(`Hello ${first_name} ${last_name}`);
JavaScript Destructuring
Cú pháp destructuring làm cho việc gán giá trị cho biến mới dễ dàng hơn. Ví dụ,
// before you would do something like this
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
let name = person.name;
let age = person.age;
let gender = person.gender;
console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female
Sử dụng cú pháp ES6 Destructuring, mã trên có thể được viết như sau:
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
let { name, age, gender } = person;
console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female
JavaScript import và export
Bạn có thể xuất một hàm hoặc một chương trình và sử dụng nó trong chương trình khác bằng cách import. Điều này giúp tạo thành phần có thể tái sử dụng. Ví dụ, nếu bạn có hai tệp JavaScript có tên contact.js và home.js.
Trong tệp contact.js, bạn có thể xuất hàm contact() như sau:
// export
export default function contact(name, age) {
console.log(`The name is ${name}. And age is ${age}.`);
}
Sau đó, khi bạn muốn sử dụng hàm contact() trong một tệp khác, bạn có thể đơn giản là import hàm đó. Ví dụ, trong tệp home.js:
import contact from './contact.js';
contact('Sara', 25);
// The name is Sara. And age is 25
JavaScript Promises
Promises được sử dụng để xử lý các nhiệm vụ không đồng bộ. Ví dụ,
// returns a promise
let countValue = new Promise(function (resolve, reject) {
reject('Promise rejected');
});
// executes when promise is resolved successfully
countValue.then(
function successValue(result) {
console.log(result); // Promise resolved
},
)
JavaScript Rest Parameter và Spread Operator
Bạn có thể sử dụng tham số nghỉ ngơi để đại diện cho một số lượng không xác định các đối số dưới dạng một mảng. Ví dụ,
function show(a, b, ...args) {
console.log(a); // one
console.log(b); // two
console.log(args); // ["three", "four", "five", "six"]
}
show('one', 'two', 'three', 'four', 'five', 'six')
Bạn truyền các đối số còn lại bằng cú pháp .... Do đó, gọi là tham số nghỉ ngơi.
Bạn sử dụng cú pháp spread ... để sao chép các mục vào một mảng duy nhất. Ví dụ,
let arr1 = ['one', 'two'];
let arr2 = [...arr1, 'three', 'four', 'five'];
console.log(arr2); // ["one", "two", "three", "four", "five"]
Cả tham số nghỉ ngơi và toán tử spread sử dụng cùng cú pháp. Tuy nhiên, toán tử spread được sử dụng với mảng (giá trị có thể lặp).
- Bài đăng blog này được xuất bản ban đầu tại:https://www.programiz.com/
