Những tính năng mới của ECMAScript 2016 (ES7) trong JavaScript

ECMAScript (ES) là tiêu chuẩn chính thức của JavaScript, định nghĩa các tính năng và cú pháp của ngôn ngữ này. Sau sự ra đời của ECMAScript 2015 (ES6) với nhiều cải tiến lớn, phiên bản ECMAScript 2016 (ES7) tiếp tục bổ sung một số tính năng quan trọng giúp lập trình JavaScript trở nên đơn giản và hiệu quả hơn.

Mặc dù ES7 không có quá nhiều thay đổi so với ES6, nhưng hai tính năng chính – Array.prototype.includes() và toán tử lũy thừa ** – đã giúp tối ưu hóa cú pháp và cải thiện khả năng xử lý dữ liệu. Những cải tiến này giúp code ngắn gọn hơn, dễ đọc hơn và phù hợp với các tiêu chuẩn lập trình hiện đại.

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về các tính năng mới của ES7, ứng dụng thực tế của chúng và sự khác biệt so với các phiên bản trước đó.

ECMAScript 2016 (ES7) là gì?

ECMAScript (ES) là tiêu chuẩn chính thức của JavaScript, được duy trì bởi tổ chức ECMA International. Tiêu chuẩn này xác định cú pháp, quy tắc và tính năng của JavaScript, giúp ngôn ngữ này phát triển mạnh mẽ trong lập trình web và các ứng dụng khác.

Trước năm 2015, ECMAScript cập nhật theo chu kỳ dài (ES3 năm 1999, ES5 năm 2009). Tuy nhiên, từ ECMAScript 2015 (ES6) trở đi, JavaScript bắt đầu có những bản cập nhật hàng năm, với mỗi phiên bản mới bổ sung những tính năng quan trọng giúp lập trình viên viết code dễ dàng hơn, tối ưu hiệu suất và cải thiện khả năng bảo trì mã nguồn.

ECMAScript 2016, hay còn gọi là ES7, là phiên bản tiếp theo của ES6, được phát hành vào tháng 6 năm 2016. Mặc dù không có nhiều thay đổi lớn như ES6, nhưng ES7 đã bổ sung hai tính năng quan trọng giúp lập trình JavaScript trở nên đơn giản và hiệu quả hơn:

• Array.prototype.includes() – Giúp kiểm tra xem một mảng có chứa một phần tử cụ thể hay không, thay thế cách sử dụng indexOf().
• Toán tử lũy thừa (**) – Một cách viết ngắn gọn hơn thay vì sử dụng Math.pow().

Những cải tiến trong ES7 so với ES6

Mặc dù ES7 không có nhiều thay đổi lớn, nhưng những cải tiến này giúp code JavaScript dễ đọc hơn, trực quan hơn và phù hợp với các tiêu chuẩn lập trình hiện đại. ES7 cũng đặt nền tảng cho các phiên bản sau này như ES8, ES9, ES10, tiếp tục cải thiện hiệu suất và tính tiện dụng của JavaScript.

Các tính năng mới trong ES7 trong Javascript

Mặc dù ES7 (ECMAScript 2016) không có nhiều thay đổi lớn như ES6, nhưng nó đã bổ sung hai tính năng quan trọng giúp code JavaScript dễ viết hơn, ngắn gọn hơn và trực quan hơn.

Array.prototype.includes() – Kiểm tra phần tử trong mảng

Trước khi ES7 ra đời, để kiểm tra xem một phần tử có tồn tại trong một mảng hay không, chúng ta phải sử dụng phương thức indexOf(). Tuy nhiên, phương thức này không trực quan vì nó trả về chỉ số của phần tử nếu tìm thấy và -1 nếu không tìm thấy.

ES7 giới thiệu phương thức includes(), giúp kiểm tra một cách rõ ràng và dễ hiểu hơn.

Lợi ích của .includes()

• Dễ đọc hơn: Thay vì kiểm tra điều kiện indexOf() !== -1, ta có thể viết trực tiếp includes().
• Hỗ trợ tốt hơn với NaN: indexOf() không thể tìm NaN, nhưng includes() có thể.
• Giúp code gọn gàng hơn: Tránh viết điều kiện dài dòng và phức tạp.

Ví dụ sử dụng .includes()

Trước ES7 (cách dùng indexOf() không trực quan):

const fruits = ['apple', 'banana', 'orange'];

if (fruits.indexOf('banana') !== -1) {
  console.log('Có banana trong danh sách!');
} else {
  console.log('Không tìm thấy banana');
}

Sau ES7 (sử dụng includes() trực quan hơn):

const fruits = ['apple', 'banana', 'orange'];

if (fruits.includes('banana')) {
  console.log('Có banana trong danh sách!');
} else {
  console.log('Không tìm thấy banana');
}

Kết quả: Có banana trong danh sách!

Lưu ý:

• includes() phân biệt chữ hoa chữ thường ('Apple' khác 'apple').
• includes() có thể tìm NaN, trong khi indexOf() không thể.

Ví dụ:

const numbers = [1, 2, NaN, 4];

console.log(numbers.includes(NaN)); // true
console.log(numbers.indexOf(NaN));  // -1 (indexOf không tìm thấy NaN)

Toán tử lũy thừa (**) – Exponentiation Operator

Trước ES7, nếu muốn tính lũy thừa trong JavaScript, chúng ta phải sử dụng hàm Math.pow(), điều này làm code dài hơn và khó đọc hơn.

ES7 giới thiệu toán tử lũy thừa **, giúp viết gọn hơn và dễ hiểu hơn.

Cú pháp:

base ** exponent  // Tương đương Math.pow(base, exponent)

Ví dụ trước ES7 (sử dụng Math.pow()):

console.log(Math.pow(2, 3)); // 8
console.log(Math.pow(5, 2)); // 25

Sau ES7 (sử dụng ** gọn hơn):

console.log(2 ** 3); // 8
console.log(5 ** 2); // 25

Ưu điểm của toán tử **

• Viết code ngắn gọn hơn so với Math.pow().
• Dễ đọc hơn: Biểu diễn rõ ràng toán tử lũy thừa.
• Hoạt động giống với các ngôn ngữ lập trình khác như Python (**), Ruby (**).

Ứng dụng thực tế của toán tử lũy thừa

Tính toán số mũ trong công thức toán học

const square = (x) => x ** 2;
console.log(square(4)); // 16

const fibonacciGrowth = (n) => (1.618 ** n) / Math.sqrt(5);
console.log(fibonacciGrowth(10)); // 55.00363657 (xấp xỉ số Fibonacci thứ 10)

const fileSizeInBytes = 2 ** 10; // 1024 bytes (1 KB)
console.log(fileSizeInBytes); // 1024

const numbers = [10, 20, 30, 40];

if (numbers.indexOf(30) !== -1) {
  console.log("Số 30 có trong mảng!");
}
console.log(Math.pow(2, 3)); // 8

const numbers = [10, 20, 30, 40];

if (numbers.includes(30)) {
  console.log("Số 30 có trong mảng!");
}
console.log(2 ** 3); // 8

const userRoles = ['user', 'editor', 'admin'];

if (userRoles.includes('admin')) {
  console.log("Người dùng có quyền admin.");
} else {
  console.log("Người dùng không có quyền admin.");
}

const blockedEmails = ['[email protected]', '[email protected]'];

const userEmail = '[email protected]';

if (blockedEmails.includes(userEmail)) {
  console.log("Email bị chặn, không thể đăng ký.");
} else {
  console.log("Email hợp lệ.");
}

const principal = 1000; // Số tiền gốc
const rate = 1.05; // Lãi suất 5%
const years = 10;

const futureValue = principal * (rate ** years);
console.log(`Số tiền sau ${years} năm: ${futureValue.toFixed(2)}`);

const fruits = ["apple", "banana", "orange"];

if (fruits.indexOf("banana") !== -1) {
  console.log("Có chuối trong danh sách!");
} else {
  console.log("Không có chuối!");
}

const fruits = ["apple", "banana", "orange"];

if (fruits.includes("banana")) {
  console.log("Có chuối trong danh sách!");
} else {
  console.log("Không có chuối!");
}

console.log(Math.pow(2, 3)); // Kết quả: 8
console.log(Math.pow(5, 2)); // Kết quả: 25

console.log(2 ** 3); // Kết quả: 8
console.log(5 ** 2); // Kết quả: 25