Thao tác phá hủy của array

Các method của array trong JavaScript có 2 loại: method phá hủy (destructive) và method không phá hủy (non-destructive). Đặc biệt, cần sử dụng cẩn thận các method phá hủy.

Method không phá hủy

Method không phá hủy là method không thay đổi array. Ví dụ, concat là method không phá hủy. Đây là method nối nhiều array. Nó không thay đổi array gốc mà trả về array mới.

ts
const nums1 = [1, 2];
const nums2 = [3, 4];
const all = nums1.concat(nums2);
console.log(nums1);
[ 1, 2 ]
console.log(nums2);
[ 3, 4 ]
console.log(all);
[ 1, 2, 3, 4 ]

ts
const nums1 = [1, 2];
const nums2 = [3, 4];
const all = nums1.concat(nums2);
console.log(nums1);
[ 1, 2 ]
console.log(nums2);
[ 3, 4 ]
console.log(all);
[ 1, 2, 3, 4 ]

Danh sách method không phá hủy

Các method không phá hủy bao gồm:

Method	Thao tác
concat	Trả về array kết hợp từ 2 array trở lên
find	Trả về phần tử đầu tiên trong array thỏa mãn hàm test
findIndex	Trả về vị trí của phần tử đầu tiên trong array thỏa mãn hàm test
lastIndexOf	Trả về index cuối cùng tìm thấy phần tử cho trước trong array
slice	Cắt và trả về một phần của array
includes	Trả về true hoặc false tùy thuộc array có chứa phần tử cho trước hay không
indexOf	Trả về index của phần tử đầu tiên có nội dung giống argument
join	Trả về string nối tất cả phần tử
keys	Trả về các index của array dưới dạng Array Iterator object
entries	Trả về cặp index và value của array dưới dạng Array Iterator object
values	Trả về các value của array dưới dạng Array Iterator object
forEach	Thực thi hàm cho trước một lần cho mỗi phần tử của array
filter	Trả về array mới gồm tất cả phần tử pass test được implement bởi hàm cho trước
flat	Trả về array mới với tất cả phần tử sub-array được nối đệ quy theo độ sâu chỉ định
flatMap	Map từng phần tử bằng mapping function rồi flatten kết quả vào array mới
map	Gọi hàm cho trước với tất cả phần tử của array và trả về array mới từ kết quả
every	Test xem tất cả phần tử trong array có pass test được implement bởi hàm chỉ định hay không
some	Test xem ít nhất một phần tử của array có pass test được implement bởi hàm chỉ định hay không
reduce	Gọi callback function "reduce" do user cung cấp cho từng phần tử của array
reduceRight	Áp dụng hàm cho accumulator và từng value của array (từ phải sang trái) để tạo thành một value

Method phá hủy

Method phá hủy là method thay đổi nội dung hoặc thứ tự phần tử của array. Ví dụ, push là một trong các method phá hủy. Nó thêm phần tử vào cuối array.

ts
const nums = [1, 2];
nums.push(3);
console.log(nums);
[ 1, 2, 3 ]

ts
const nums = [1, 2];
nums.push(3);
console.log(nums);
[ 1, 2, 3 ]

Danh sách method phá hủy

Các method phá hủy bao gồm:

Method	Thao tác
push	Thêm phần tử vào cuối array
unshift	Thêm phần tử vào đầu array
pop	Xóa phần tử cuối cùng của array và trả về phần tử đó
shift	Xóa phần tử đầu tiên của array và trả về phần tử đó
splice	Xóa, thay thế hoặc thêm phần tử mới
sort	Sắp xếp các phần tử của array
reverse	Đảo ngược thứ tự các phần tử của array
fill	Thay đổi tất cả phần tử từ index bắt đầu đến index kết thúc thành một giá trị cố định
copyWithin	Shallow copy một phần của array sang vị trí khác trong cùng array mà không thay đổi size

Method phá hủy cần đặc biệt chú ý

Method reverse trả về array đã đảo ngược. Vì có giá trị trả về nên nhìn qua có vẻ là method không phá hủy. Tuy nhiên, cần chú ý vì method này cũng đảo ngược thứ tự của array gốc.

ts
const nums = [1, 2, 3];
const newNums = nums.reverse();
console.log(nums);
[ 3, 2, 1 ]
console.log(newNums);
[ 3, 2, 1 ]

ts
const nums = [1, 2, 3];
const newNums = nums.reverse();
console.log(nums);
[ 3, 2, 1 ]
console.log(newNums);
[ 3, 2, 1 ]

Hàm array_reverse của PHP có tên giống với method reverse của JavaScript, nhưng phía PHP là thao tác không phá hủy. Nó tạo và trả về array mới được sắp xếp ngược mà không thay đổi array gốc.

array_reverse của PHP
php
$nums = [1, 2, 3];
$reversedNums = array_reverse($nums);
var_dump($nums);
//=> [1, 2, 3]
var_dump($reversedNums);
//=> [3, 2, 1]

array_reverse của PHP
php
$nums = [1, 2, 3];
$reversedNums = array_reverse($nums);
var_dump($nums);
//=> [1, 2, 3]
var_dump($reversedNums);
//=> [3, 2, 1]

Như vậy, có những thao tác array không phá hủy ở ngôn ngữ khác nhưng lại là thao tác phá hủy trong JavaScript. Không nên chỉ dựa vào tên method để phán đoán là phá hủy hay không phá hủy, cần xác nhận cách sử dụng của từng method.

Cách sử dụng an toàn method phá hủy

Để sử dụng method phá hủy một cách không phá hủy, hãy copy array sang array khác trước khi thực hiện thao tác phá hủy. Sử dụng spread syntax ... để copy array.

📄️ Spread syntax của array "..."

Trong JavaScript, với array có thể sử dụng spread syntax "..." để triển khai các phần tử.

Nếu thực hiện thao tác phá hủy trên array đã copy, không cần lo lắng array gốc bị thay đổi.

ts
const original = [1, 2, 3];
const copy = [...original]; // Tạo bản copy
copy.reverse();
console.log(original); // Không bị ảnh hưởng bởi thao tác phá hủy
[ 1, 2, 3 ]
console.log(copy);
[ 3, 2, 1 ]

ts
const original = [1, 2, 3];
const copy = [...original]; // Tạo bản copy
copy.reverse();
console.log(original); // Không bị ảnh hưởng bởi thao tác phá hủy
[ 1, 2, 3 ]
console.log(copy);
[ 3, 2, 1 ]

Ví dụ reverse này có thể viết gọn việc copy và gọi method phá hủy trên 1 dòng.

ts
const original = [1, 2, 3];
const reversed = [...original].reverse();
console.log(original);
[ 1, 2, 3 ]
console.log(reversed);
[ 3, 2, 1 ]

ts
const original = [1, 2, 3];
const reversed = [...original].reverse();
console.log(original);
[ 1, 2, 3 ]
console.log(reversed);
[ 3, 2, 1 ]

Chia sẻ kiến thức

・Các method của array trong JavaScript có loại phá hủy và không phá hủy
・Loại phá hủy thay đổi array
・Loại không phá hủy không thay đổi array
・Cần chú ý vì có method tưởng không phá hủy nhưng thực tế là phá hủy
・Copy array trước rồi thực hiện thao tác phá hủy sẽ an toàn

Từ 『Survival TypeScript』

Đăng nội dung này lên X