Tuanxt

Tổng hợp những tính năng ES6 nổi bật trong JS

Thứ Ba, 29/08/2023 · 4 phút đọc

ES6 là gì?
ECMAScript 6 (ES6), còn được gọi là ECMAScript 2015, đã mang lại nhiều tính năng mới và nâng cấp cho JavaScript. Dưới đây là một số tính năng nổi bật trong ES6:

Khai báo biến với let và const: let và const thay thế cho var trong việc khai báo biến. let cho phép bạn khai báo biến có phạm vi (scope) block, trong khi const khai báo biến hằng số.

let x = 10;
const PI = 3.1415;

Template Literals: Template literals cho phép bạn tạo các chuỗi dễ đọc và dễ quản lý bằng cách sử dụng ${} để nhúng biến và biểu thức vào chuỗi.

const name = "Alice";
console.log(`Hello, ${name}!`);

Arrow Functions: Arrow functions cung cấp cú pháp ngắn gọn để khai báo hàm. Chúng thường được sử dụng trong việc định nghĩa hàm ngắn gọn như callback functions.

const add = (a, b) => a + b;

Default Parameters: ES6 cho phép bạn định nghĩa giá trị mặc định cho các tham số hàm.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

Rest Parameters: Rest parameters cho phép bạn truyền một danh sách biến số (variable-length argument list) vào hàm.

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

Spread Operator: Spread operator (...) cho phép bạn trải dãn các phần tử của một mảng hoặc thuộc tính của một đối tượng.

const numbers = [1, 2, 3];
const combined = [...numbers, 4, 5];

Destructuring Assignment: Destructuring assignment cho phép bạn trích xuất giá trị từ mảng hoặc đối tượng và gán chúng vào biến.

const person = { name: "Alice", age: 30 };
const { name, age } = person;

Classes: ES6 giới thiệu cú pháp để tạo lớp và đối tượng, giúp tạo ra mã sạch sẽ hơn cho việc kế thừa và tạo đối tượng.

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

Modules: ES6 hỗ trợ modules, cho phép bạn chia ứng dụng của mình thành các module riêng biệt để quản lý mã dễ dàng hơn.

// Import module
import { sum } from "./math";

// Export module
export function multiply(a, b) {
  return a * b;
}

Promises: Promises là một cách tiện lợi để xử lý các tác vụ bất đồng bộ. Chúng giúp tránh callback hell và làm cho mã dễ đọc hơn.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Lưu ý rằng ES6 chỉ là một phiên bản của JavaScript và có thêm nhiều tính năng mới trong các phiên bản sau này (như ES7, ES8, v.v.). Việc sử dụng ES6 giúp mã của bạn trở nên sáng sủa và dễ bảo trì hơn.

- Ảnh đại diện bài viết -