Những kỹ thuật cao ít được biết đến nhưng thực dụng trong ES6

1. Phương thức Object.entries() và Object.fromEntries()

Phương thức này cho phép chuyển đổi giữa đối tượng và mảng các cặp key-value:

Object.entries()

Chuyển đổi một đối tượng sang mảng các cặp key-value:

const thongTinNguoiDung = { ten: 'John', tuoi: 30, quequan: 'New York' };
const danhSachThuocTinh = Object.entries(thongTinNguoiDung);
console.log(danhSachThuocTinh); // [["ten", "John"], ["tuoi", 30], ["quequan", "New York"]]

Object.fromEntries()

Chuyển đổi ngược lại từ mảng các cặp key-value sang đối tượng:

const danhSachThuocTinh = [["ten", "John"], ["tuoi", 30], ["quequan", "New York"]];
const thongTinNguoiDung = Object.fromEntries(danhSachThuocTinh);
console.log(thongTinNguoiDung); // { ten: "John", tuoi: 30, quequan: "New York" }

Tiện ích: Rút gọn xử lý dữ liệu, chuyển đổi giữa Map và Object.

2. Kiểu dữ liệu Symbol và ứng dụng trong đối tượng

Symbol là một loại dữ liệu nguyên thủy mới trong ES6, đảm bảo mỗi Symbol đều duy nhất:

const maNguoiDung = Symbol('id');
const thongTin = {
  [maNguoiDung]: 'nguoi_dung_001'
};

console.log(thongTin[maNguoiDung]); // "nguoi_dung_001"

Thuộc tính:

  • Mỗi Symbol được tạo ra đều khác nhau
  • Không xuất hiện trong các vòng lặp for...in
  • Phù hợp để làm các thuộc tính "riêng tư" trong đối tượng

3. WeakMap và WeakSet

WeakMap

WeakMap là một phiên bản của Map nhưng chỉ accepts các object làm key và không ràng buộc garbage collection:

const weakMap = new WeakMap();
const nguoiDung = {};
weakMap.set(nguoiDung, 'thongTinNguoiDung');
console.log(weakMap.get(nguoiDung)); // "thongTinNguoiDung"

WeakSet

WeakSet tương tự Set nhưng chỉ accepts object và cũng không ràng buộc garbage collection:

const weakSet = new WeakSet();
const item = {};
weakSet.add(item);
console.log(weakSet.has(item)); // true

Điểm mạnh: Không làm cản trở quá trình garbage collection, thích hợp để lưu trữ dữ liệu tạm thời.

4. Phương thức Promise.allSettled()

Khác với Promise.all(), Promise.allSettled() sẽ đợi tất cả các promise hoàn thành, kể cả resolve hay reject:

const danhSachPromise = [
  Promise.resolve('thongTinNguoiDung'),
  Promise.reject('loi'),
  Promise.resolve('thongTinThem')
];

Promise.allSettled(danhSachPromise)
  .then(ketQua => {
    console.log(ketQua);
    // Output:
    // [
    //  { status: 'fulfilled', value: 'thongTinNguoiDung' },
    //  { status: 'rejected', reason: 'loi' },
    //  { status: 'fulfilled', value: 'thongTinThem' }
    // ]
  });

Ứng dụng: Xác định kết quả cuối cùng của nhiều thao tác asynchronous cùng lúc.

5. Kiểu dữ liệu BigInt

BigInt cho phép xử lý các số nguyên với精度 vô hạn:

const soLon = BigInt(9007199254740991n) + BigInt(1n);
console.log(soLon); // 9007199254740992n

// Ví dụ về toán tửBigInt
const soKhongDinh = 1234567890123456789012345678901234567890n;
console.log(soKhongDinh * 2n); // 2469135780246913578024691357802469135780n

6. Phương thức Array.of() và Array.from()

Array.of()

Tạo một mảng mới với các phần tử được chỉ định:

const arr1 = Array.of(10, 20, 30);
console.log(arr1); // [10, 20, 30]

// So sánh với cách tạo mảng thông thường
console.log(new Array(3)); // [empty × 3] thay vì [3]

Array.from()

Chuyển đổi các đối tượng có thể iterable sang mảng:

// Chuyển đổi chuỗi sang mảng
const chuoi = 'Xin chào';
const mangKyTu = Array.from(chuoi);
console.log(mangKyTu); // ['X', 'i', 'n', ' ', 'c', 'h', 'a', 'u']

// Chuyển đổi có sử dụng hàm map
const soSanh = [1, 2, 3, 4, 5];
const soDouble = Array.from(soSanh, so => so * 2);
console.log(soDouble); // [2, 4, 6, 8, 10]

7. Phương thức .at() và .flat()

Phương thức .at()

Phương thức này cho phép truy cập các phần tử của mảng một cách trực quan hơn, bao gồm cả索引 âm:

const danhSach = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
console.log(danhSach.at(2));  // "Cherry"
console.log(danhSach.at(-1)); // "Elderberry" (phần tử cuối cùng)
console.log(danhSach.at(-3)); // "Cherry" (phần tử cách cuối cùng 2)

Phương thức .flat()

Phương thức này giúp phẳng hóa các mảng嵌套:

const mangDem = [1, [2, [3, [4]]]];
console.log(mangDem.flat());    // [1, 2, [3, [4]]]
console.log(mangDem.flat(2));   // [1, 2, 3, [4]] (chỉ phẳng hóa 2 cấp độ)

// Phẳng hóa hoàn toàn với Infinity
const mangPhanTran = [1, [2, [3, [4, [5]]]]];
console.log(mangPhanTran.flat(Infinity)); // [1, 2, 3, 4, 5]

Thẻ: es6 JavaScript Kỹ thuật cao

Đăng vào ngày 2 tháng 7 lúc 03:49