Cách JavaScript Array Methods mới giúp bạn "xử đẹp" dữ liệu và né lỗi "bay màu" mảng gốc

Bạn đã bao giờ gặp cảnh muốn sắp xếp lại một danh sách để hiển thị lên giao diện, nhưng lỡ tay dùng hàm sort() truyền thống và rồi cái mảng gốc cũng "đi đời nhà ma" luôn chưa? Kết quả là data ở các component khác bỗng nhiên nhảy loạn xạ, giao diện hiển thị sai bét nhè mà debug cả buổi mới ra nguyên nhân. Đừng lo, bộ tứ JavaScript Array Methods mới vừa cập bến sẽ giúp bạn giải quyết triệt để nỗi đau này.

Nỗi đau mang tên "Mutating" khi xử lý mảng trong JavaScript

Trong JavaScript từ xưa đến nay, các phương thức như sort(), reverse() hay splice() có một đặc tính khá "nguy hiểm" là thay đổi trực tiếp (mutate) mảng ban đầu. Điều này thường gây ra các tác dụng phụ (side effects) khó lường, đặc biệt là khi bạn làm việc với React hay Vue — nơi mà tính bất biến của dữ liệu (immutability) luôn được ưu tiên hàng đầu.

Trước đây, để né lỗi này, chúng ta thường phải dùng thủ thuật Copy mảng bằng cú pháp Spread Operator (dấu ba chấm) kiểu như [...arr].sort(). Cách này tuy chạy được nhưng trông code hơi rối và đôi khi khiến những bạn mới vào nghề cảm thấy khó hiểu. Liệu có cách nào viết code vừa sạch, vừa "sang" mà vẫn đảm bảo an toàn cho dữ liệu không?

Chào đón "Bộ tứ siêu đẳng" giúp bạn bảo toàn dữ liệu mảng

Kể từ phiên bản ES2023, JavaScript đã chính thức bổ sung 4 phương thức mới cực kỳ xịn sò. Điểm chung của chúng là: thực hiện thay đổi nhưng trả về một mảng mới hoàn toàn, giữ nguyên mảng gốc ban đầu.

• toSorted(): Sắp xếp mảng mà không làm đảo lộn mảng gốc.
• toReversed(): Đảo ngược mảng một cách êm đềm.
• toSpliced(): Thêm, sửa, xóa phần tử mà không gây chấn thương cho mảng cũ.
• with(): Thay đổi một phần tử tại vị trí cụ thể (index) cực kỳ gọn gàng.

Hãy xem thử sự khác biệt khi dùng toSorted() so với hàm cũ nhé:

const users = ['An', 'Bình', 'Cường'];

// Cách cũ (làm hỏng mảng users)
// users.sort();

// Cách mới (users vẫn giữ nguyên)
const sortedUsers = users.toSorted();

console.log(users); // ['An', 'Bình', 'Cường']
console.log(sortedUsers); // ['An', 'Bình', 'Cường'] đã được sắp xếp

Code bây giờ nhìn chuyên nghiệp hơn hẳn đúng không? Bạn không còn phải lo lắng về việc vô tình thay đổi state hay props trong các framework frontend nữa.

Phương thức with() — "Vũ khí" bí mật cho React State

Nếu bạn thường xuyên phải cập nhật một phần tử trong mảng khi dùng useState của React, chắc hẳn bạn đã quá quen với đống logic map() dài dòng chỉ để đổi một giá trị. Phương thức with() sinh ra chính là để giải cứu bạn.

Thay vì viết 3-4 dòng code, giờ đây bạn chỉ cần đúng 1 dòng để tạo ra mảng mới với giá trị đã được cập nhật. Đây là cách tuyệt vời để kết hợp khi bạn muốn chia tay đống logic rối rắm trong các dự án thực tế.

const colors = ['red', 'green', 'blue'];

// Muốn đổi 'green' thành 'yellow' ở vị trí index 1
const newColors = colors.with(1, 'yellow');

console.log(newColors); // ['red', 'yellow', 'blue']

Mẹo nhỏ này giúp code của bạn vừa ngắn gọn, vừa dễ đọc cho cả những người đồng nghiệp sau này khi tiếp quản dự án. Bạn có thể tìm hiểu thêm chi tiết về cách hoạt động của các hàm này trên trang tài liệu chính thức của MDN Web Docs.

Đừng để code của bạn bị "lỗi thời"

Việc nắm vững những tính năng mới của JavaScript Array Methods không chỉ giúp bạn tránh được những bug ngớ ngẩn mà còn chứng minh bạn là một lập trình viên luôn cập nhật xu hướng công nghệ. Code sạch (Clean code) không chỉ là code chạy đúng, mà là code khiến người khác nhìn vào thấy nể phục sự tinh tế của bạn.

Vậy còn những phương thức xử lý mảng lồng nhau (nested array) thì sao? Liệu chúng có giữ được tính bất biến hay không? Hãy cùng chờ đón ở bài viết tiếp theo nhé!