Mảng là một cấu trúc dữ liệu mạnh mẽ và cực kỳ linh hoạt trong code JavaScript. Thế nhưng bạn đã biết cách dùng mảng hiệu quả trong JavaScript chưa?
Bạn có một số phương thức để tối ưu hóa mảng trong JavaScript để đạt hiệu suất và hiệu quả tốt hơn. Một trong số cấu trúc dữ liệu thường dùng nhất ở JavaScript là mảng. Nó là một lựa chọn phổ biến đối với nhiều lập trình viên nhờ tính linh hoạt và dễ dùng.
Tuy nhiên, mảng có thể nhanh chóng trở thành một “nút thắt cổ chai” hiệu suất nếu bạn không dùng chúng đúng cách. Dưới đây là mẹo tối ưu hóa mảng và tăng hiệu suất code tổng thể.
Dùng toán tử lan rộng
Bạn có thể tạo một mảng mới chứa các nhân tố từ mảng khác bằng toán tử lan rộng (là 3 chấm (…)).
Toán tử lan rộng có thể kết hợp hai mảng như sau:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = [...array1, ...array2];
console.log(concatenatedArray); // Output: [1, 2, 3, 4, 5, 6]Trong trường hợp này, toán tử lan rộng nối hai mảng – array1 và array2 – thành một mảng tên concatenatedArray. Mảng kết quả chứa tất cả nhân tố của array1 được theo sau bởi tất cả thành phần của array2.
Toán tử lan rộng cũng có thể tạo một mảng mới với nhiều thành phần hơn. Ví dụ:
const originalArray = [1, 2, 3]; const newArray = [...originalArray, 4, 5]; console.log(newArray); // Output: [1, 2, 3, 4, 5]
Bạn tạo một mảng mới tên newArray bằng cách triển khai toán tử trải rộng. Nó chứa tất cả các thành phần của mảng ban đầu, được theo sau bởi 4 và 5. khi xử lý các mảng lớn, toán tử này có thể hiệu quả hơn các phương pháp như concat() hoặc push(). Ngoài ra, nó làm code dễ đọc và chính xác hơn.
Bạn có thể dùng các mảng của JavaScript hiệu quả hơn với toán tử trải rộng. Nó cũng khiến việc tạo mảng mới với nhiều mục hơn trở nên dễ dàng.
Tránh dùng toán tử xóa
Bạn có thể xóa một thuộc tính của đối tượng bằng toán tử delete. Dù dùng được nó để loại bỏ thành phần mảng nhưng hành động này không được khuyến khích bởi nó có thể để lại khoảng trống trong mảng. Điều này có thể ảnh hưởng tới hiệu suất của mảng khi bạn lặp lại mảng đó trên nó hoặc cố gắng truy cập những phần tử cụ thể.
Thay vì dùng toán tử delete, cân nhắc dùng phương thức splice. Cách này có thể loại bỏ các nhân tố của mảng và sẽ trả về một mảng mới và không có khoảng trống.
Bạn có thể dùng splice theo cách sau:
const originalArray = [1, 2, 3, 4, 5];
// Remove the element at index 2
const newArray = originalArray.splice(2, 1);Ví dụ này loại bỏ nhân tố ở index 2 từ originalArray bằng hàm splice. Mảng được tạo mới (newArray) chứa thành phần mà splice đã loại bỏ. Thành phần ở index 2 không còn hiện ở originalArray và không có khoảng trống ở mảng này.
Dùng các mảng đã nhập
Trong JavaScript, bạn có thể làm việc với dữ liệu nhị phân bằng cách dùng các mảng được nhập. Những mảng này cho phép thao tác trực tiếp với bộ nhớ bên dưới và dùng các thành phần có độ dài cố định. Chúng hiệu quả hơn các mảng tiêu chuẩn.
Ví dụ về cách tạo một mảng được nhập:
const myArray = new Int16Array(4);
console.log(myArray); // Output: Int16Array [0, 0, 0, 0]Ví dụ này tạo một Int16Array mới với 4 nhân tố được đặt thành 0.
Int8Array, Int16Array, Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32Array, và Float64Array là tất cả ví dụ của kiểu mảng đã được nhập. Mỗi phân loại liên quan tới một loại thông tin được ghép nối cụ thể và có kích thước byte tương ứng.
Ví dụ về cách dùng Float32Array.
const myArray = new Float32Array([1.0, 2.0, 3.0, 4.0]);
console.log(myArray); // Output: Float32Array [1, 2, 3, 4]Ví dụ này tạo một Float32Array với 4 nhân tố được thiết lập sang 1.0, 2.0, 3.0, và 4.0. Các mảng được nhập đặc biệt hữu ích khi làm việc với các tập dữ liệu lớn hoặc thực hiện các phép tính toán học. Chúng có thể chạy nhanh hơn các mảng tiêu chuẩn vì cho phép bạn trực tiếp thao tác bộ nhớ.
Bằng cách khiến việc xử lý dữ liệu nhị phân dễ hơn và thực hiện các phép tính toán học, dùng các mảng đã nhập có thể giúp bạn tối ưu hóa code JavaScript.
Giảm thiểu lặp đi lặp lại
Lập trình viên thường dùng loop trong JavaScript để lặp qua một mảng. Trong trường hợp bất kỳ, lặp trên các mảng lớn có thể là “nút thắt cổ chai”. Giảm số lần bạn lặp trên mảng JavaScript để tối ưu hóa chúng.
Một cách để thực hiện việc này là dùng filter, map và reduce thay cho các vòng lặp truyền thống. Những chiến thuật này cải thiện khả năng chạy mã và thường nhanh hơn việc lặp thủ công trên một mảng.
Bạn có thể dùng phương thức map theo cách sau:
const originalArray = [1, 2, 3, 4, 5];
// Nhân từng nhân tố với 2
const newArray = originalArray.map((element) => element * 2)Trong trường hợp này, code tạo một mảng mới tên newArray bằng phương thức map. Nó áp dụng một hàm cho từng thành phần của originalArray và trả về kết quả trong một mảng mới.
Dùng cú pháp hủy cấu trúc
Tính năng hủy cấu trúc của JavaScript thật sự mạnh mẽ, cho phép bạn trích xuất các giá trị từ mảng và đối tượng. Phương thức này làm code hiệu quả hơn bằng cách chạy ít các phép gán biến và truy cập mảng hơn. Ưu điểm của việc dùng hủy cấu trúc mở rộng tới khả năng đọc và đơn giản hóa quá trình viết code.
Ví dụ cách trích xuất giá trị từ một mảng bằng hủy cấu trúc như sau:
const myArray = [1, 2, 3, 4, 5];
// Hủy cấu trúc nhân tố đầu tiên và thứ ba
const [first, , third] = myArray;
console.log(first); // Output: 1
console.log(third); // Output: 3Ví dụ này dùng hủy cấu trúc để trích xuất nhân tố đầu tiên và thứ ba từ myArray. Nó gắn giá trị của nhân tố đầu tiên của mảng cho biến first và giá trị của nhân tố thứ ba cho biến third. Bằng cách để lại khoảng trống trong mẫu phá hủy, nó bỏ qua thành phần thứ hai.
Bạn cũng có thể dùng hủy cấu trúc với các đối số hàm để trích xuất giá trị từ mảng:
function myFunction([first, second]) {
console.log(first);
console.log(second);
}
const myArray = [1, 2, 3, 4, 5];
myFunction(myArray); // Output: 1\n2Ví dụ này định nghĩ một hàm tên myFunction, lấy một mảng làm tham số. Sau đó, nó dùng hủy cấu trúc để đăng nhập thành phần đầu tiên và thứ hai của mảng cho console này.
Trên đây là một số cách tối ưu hóa mảng trong JavaScript. Hi vọng bài viết hữu ích với các bạn.