Tổng quan về các phương thức mảng trong ECMAScript 6

ECMAScript 6 (ES6) đã mang đến những cải tiến đột phá cho cách xử lý mảng trong JavaScript, giúp lập trình viên làm việc với tập hợp dữ liệu hiệu quả hơn bao giờ hết. Bài viết này sẽ phân tích chi tiết các tính năng mới quan trọng nhất của mảng trong ES6.

Sự chuyển đổi từ lập trình mệnh lệnh sang lập trình khai báo

Trong JavaScript truyền thống, việc xử lý mảng thường dựa vào vòng lặp for và biến tạm, khiến code trở nên dài dòng và khó đọc. Các phương thức mảng mới trong ES6 đã đưa tư duy lập trình hàm vào JavaScript, làm cho code ngắn gọn và dễ hiểu hơn.

Phương thức map() - Biến đổi phần tử dễ dàng

Phương thức map() cho phép chuyển đổi mỗi phần tử trong mảng thành giá trị mới thông qua một hàm, trả về một mảng hoàn toàn mới.

// Cách viết cũ trong ES5
var danhSach = [5, 10, 15];
var ketQua = [];
for (var i = 0; i < danhSach.length; i++) {
  ketQua.push(danhSach[i] * 3);
}

// Cách viết hiện đại với ES6
const danhSach = [5, 10, 15];
const ketQua = danhSach.map(giaTri => giaTri * 3); // [15, 30, 45]

Phương thức filter() - Lọc dữ liệu chính xác

Phương thức filter() tạo ra một mảng mới chứa các phần vượt qua bài kiểm tra của hàm được cung cấp.

const diemSo = [85, 92, 78, 95, 88];
const diemTren80 = diemSo.filter(diem => diem >= 80); // [85, 92, 95, 88]

Phương thức reduce() - Công cụ đa năng

Phương thức reduce() là "con dao đa năng" trong bộ công cụ mảng của ES6, cho phép thu gọn mảng thành một giá trị duy nhất.

// Tính tổng các phần tử
const soNguyen = [10, 20, 30, 40];
const tong = soNguyen.reduce((tongHienTai, giaTriHienTai) => tongHienTai + giaTriHienTai, 0); // 100

// Nhóm dữ liệu theo tiêu chí
const nhanVien = [
  { ho: 'Nguyen', tuoi: 28 },
  { ho: 'Tran', tuoi: 35 },
  { ho: 'Le', tuoi: 28 }
];
const nhomTheoTuoi = nhanVien.reduce((nhom, nhanVienHienTai) => {
  const key = nhanVienHienTai.tuoi;
  if (!nhom[key]) nhom[key] = [];
  nhom[key].push(nhanVienHienTai);
  return nhom;
}, {});

Tìm kiếm phần tử: find() và findIndex()

Trước ES6, việc tìm kiếm phần tử thỏa mãn điều kiện đòi hỏi phải duyệt qua toàn bộ mảng. Hai phương thức find() và findIndex() cung cấp giải pháp trực tiếp hơn.

const danhSachSanPham = [
  { ma: 101, ten: 'Laptop' },
  { ma: 102, ten: 'DienThoai' },
  { ma: 103, ten: 'MayTinhBang' }
];

// Tìm phần tử đầu tiên thỏa mãn
const sanPham = danhSachSanPham.find(sp => sp.ten === 'DienThoai'); // { ma: 102, ten: 'DienThoai' }

// Tìm vị trí của phần tử
const viTri = danhSachSanPham.findIndex(sp => sp.ten === 'DienThoai'); // 1

Điền và sao chép mảng: fill() và copyWithin()

ES6 giới thiệu hai phương thức hữu ích để thao tác với mảng: fill() và copyWithin().

// Điền giá trị vào mảng
const mang = [1, 2, 3, 4, 5];
mang.fill(9, 1, 4); // [1, 9, 9, 9, 5]

// Sao chép các phần tử trong mảng
const mangGoc = [1, 2, 3, 4, 5, 6];
mangGoc.copyWithin(2, 0, 3); // [1, 2, 1, 2, 3, 6]

Tạo mảng linh hoạt: from() và of()

Hai phương thức Array.from() và Array.of() mang đến sự linh hoạt trong việc khởi tạo mảng.

// Tạo mảng từ đối tượng giả mảng
const theDiv = document.querySelectorAll('div');
const mangDiv = Array.from(theDiv);

// Tạo mảng với số lượng tham số thay đổi
const mangSo = Array.of(7, 8, 9); // [7, 8, 9]

Kiểm tra sự tồn tại: phương thức includes()

Phương thức includes() cung cấp cách trực quan để kiểm tra xem mảng có chứa một phần tử cụ thể hay không.

const cacLoaiQua = ['tao', 'nho', 'cam'];
console.log(cacLoaiQua.includes('nho')); // true
console.log(cacLoaiQua.includes('xoai')); // false

Ứng dụng thực tế: Kết hợp các phương thức mảng

Sức mạnh thực sự của các phương thức mảng ES6 nằm ở khả năng gọi liên tiếp (chaining), tạo ra các pipeline xử lý dữ liệu hiệu quả.

const duLieuSanPham = [
  { ma: 1, ten: 'Ao Thun', gia: 150000, loai: 'thoiTrang' },
  { ma: 2, ten: 'DienThoai', gia: 5000000, loai: 'dienTu' },
  { ma: 3, ten: 'QuanJean', gia: 300000, loai: 'thoiTrang' },
  { ma: 4, ten: 'MayTinh', gia: 15000000, loai: 'dienTu' }
];

// Tính giá trung bình của sản phẩm điện tử
const giaTrungBinhDienTu = duLieuSanPham
  .filter(sanPham => sanPham.loai === 'dienTu')
  .map(sanPham => sanPham.gia)
  .reduce((tong, gia, chiSo, mang) => tong + gia / mang.length, 0);

Bắt đầu với ES6

Để sử dụng các tính năng mảng ES6, bạn cần đảm bảo môi trường phát triển hỗ trợ ES6. Hầu hết các trình duyệt hiện đại đã hỗ trợ native các tính năng này. Nếu cần hỗ trợ các trình duyệt cũ, bạn có thể sử dụng các công cụ transpile như Babel.

Bằng cách nắm vững các phương thức mảng ES6, bạn sẽ viết được code JavaScript ngắn gọn hơn, dễ đọc hơn và hiệu quả hơn.