Cập nhật mảng bất biến bằng Array.prototype.with

Jad Joubran

Các trình duyệt gần đây đã có một phương thức có khả năng tương tác mới mà bạn có thể gọi trên Arrays: Array.prototype.with().

Bài viết này khám phá cách hoạt động của phương thức này và cách sử dụng nó để cập nhật một mảng mà không làm thay đổi mảng ban đầu.

Giới thiệu về Array.prototype.with(index, value)

Phương thức Array.prototype.with(index, value) trả về một bản sao của mảng mà nó đang chứa được gọi bằng index được đặt thành value mới mà bạn cung cấp.

Ví dụ sau đây cho thấy một mảng độ tuổi. Bạn muốn tạo một bản sao mới của mảng trong khi thay đổi tuổi thứ hai từ 15 thành 16:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Chia nhỏ mã:: ages.with(...) trả về bản sao của biến ages mà không sửa đổi mảng ban đầu. ages.with(1, …) thay thế mục thứ hai (index = 1). ages.with(1, 16) chỉ định mục thứ hai cho 16.

Đây là cách bạn có thể tạo bản sao mới của mảng có sửa đổi.

Điều này khá hữu ích khi bạn muốn đảm bảo rằng mảng gốc được giữ lại không thay đổi. Bài viết này trình bày một số trường hợp sử dụng. Tuy nhiên, hiện tại, hãy xem điều gì sẽ xảy ra nếu bạn sử dụng ký hiệu dấu ngoặc:

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

Như bạn có thể thấy, biến ages cũng được sửa đổi trong ví dụ này. Đó là vì khi bạn chỉ định ages = newAges, JavaScript sẽ không sao chép mảng mà thay vào đó sẽ tạo tham chiếu đến mảng khác. Vì vậy, mọi thay đổi trong một đơn đặt hàng cũng sẽ ảnh hưởng đến cái còn lại vì cả hai đều trỏ đến cùng một mảng.

Array.prototype.with() và tính bất biến

Tính bất biến là trọng tâm của nhiều thư viện và khung giao diện người dùng, v.v. một vài: React (và Redux) và Vue

Ngoài ra, các thư viện và khung khác không nhất thiết đòi hỏi tính bất biến, nhưng khuyến khích nó để có hiệu suất tốt hơn: Angular và Lit

Vì vậy, nhà phát triển thường phải sử dụng các phương thức khác để trả về bản sao của mảng khiến mã dễ đọc:

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

Sau đây là một ví dụ về Codepen về cách kết hợp .with() trong React bằng useState để cập nhật một mảng các mục bất biến:

Vì phương thức .with() trả về một bản sao của mảng, nên bạn có thể liên kết nhiều mảng Lệnh gọi .with() hoặc thậm chí là các phương thức mảng khác. Ví dụ sau minh hoạ làm tăng độ tuổi thứ hai và thứ ba từ mảng:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

Các phương thức bất biến mới khác

Ba phương thức khác gần đây có khả năng tương tác:

• Array.prototype.toReversed() đảo ngược mảng mà không làm thay đổi giá trị mảng gốc.
• Array.prototype.toSorted() để sắp xếp mảng mà không cần thay đổi mảng ban đầu.
• Array.prototype.toSpliced() Cách hoạt động như .splice() nhưng không làm thay đổi mảng ban đầu.

Ba phương pháp này, theo MDN, là phiên bản sao chép của bản sao. Các phương thức này cũng có thể được sử dụng trong trường hợp tính bất biến được mong đợi hoặc ưu tiên.

Tóm lại, các bản cập nhật bất biến có thể đạt được dễ dàng hơn trong JavaScript bằng một trong 4 phương thức được trình bày trong bài viết này. Cụ thể, phương thức .with() giúp cập nhật một phần tử của mảng dễ dàng hơn mà không làm thay đổi mảng ban đầu.