5 mẹo để tối ưu hóa mảng JavaScript

Có một số phương pháp bạn có thể sử dụng để tối ưu hóa các mảng JavaScript để có hiệu suất và hiệu quả tốt hơn. Một trong những cấu trúc dữ liệu được sử dụng thường xuyên nhất trong JavaScript là mảng. Đó là một lựa chọn phổ biến của nhiều nhà phát triển vì nó rất linh hoạt và dễ sử dụng.

Tuy nhiên, mảng có thể nhanh chóng trở thành nút cổ chai hiệu suất nếu bạn không sử dụng chúng đúng cách. Dưới đây là năm cách bạn có thể tối ưu hóa các mảng JavaScript của mình và tăng hiệu suất mã tổng thể.

1. Sử dụng Toán tử Spread

Bạn có thể tạo một mảng mới chứa các phần tử từ một mảng khác bằng toán tử trải rộng, là ba dấu chấm (…).

Toán tử trải rộng có thể kết hợp hai mảng, như thế này:

 const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = [...array1, ...array2];
console.log(concatenatedArray);  

Trong trường hợp này, toán tử trải phổ nối hai mảng—mảng1 và mảng2—thành một mảng mới được gọi là Mảng nối. Mảng kết quả chứa tất cả các phần tử của mảng1 theo sau là tất cả các phần tử của mảng2.

Toán tử trải rộng cũng có thể tạo một mảng mới với nhiều phần tử hơn. Ví dụ:

 const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4, 5];
console.log(newArray);  

Bạn tạo một mảng mới gọi là Mảng mới bằng cách sử dụng toán tử trải rộng. Nó chứa tất cả các phần tử của mảng ban đầu, tiếp theo là các phần tử 4 và 5. Khi xử lý các mảng lớn, toán tử trải rộng có thể hiệu quả hơn các phương thức như concat() hoặc xô(). Ngoài ra, nó làm cho mã dễ đọc và ngắn gọn hơn.

Bạn có thể sử dụng mảng của JavaScript hiệu quả hơn với toán tử trải rộng, điều này cũng giúp dễ dàng tạo một mảng mới có nhiều mục hơn.

2. Tránh sử dụng toán tử xóa

Bạn có thể xóa thuộc tính của đối tượng bằng toán tử xóa. Mặc dù bạn có thể sử dụng tính năng xóa để xóa một phần tử mảng, nhưng điều này không được khuyến khích vì nó có thể để lại khoảng trống hoặc khoảng trống trong mảng. Điều này có thể ảnh hưởng đến hiệu suất của mảng khi bạn lặp lại mảng đó hoặc cố gắng truy cập các phần tử cụ thể.

Thay vì sử dụng xóa bỏ nhà điều hành, xem xét sử dụng mối nối phương pháp. Phương thức này có thể loại bỏ các phần tử của một mảng và sẽ trả về một mảng mới không có khoảng trống.

Bạn có thể dùng mối nối phương pháp theo cách sau:

 const originalArray = [1, 2, 3, 4, 5];

const newArray = originalArray.splice(2, 1); 

Ví dụ này loại bỏ phần tử tại chỉ số 2 từ ban đầuArray sử dụng phương pháp nối. Mảng vừa tạo (Mảng mới) chứa phần tử đã loại bỏ mối nối. Phần tử tại chỉ số 2 không còn hiện diện trong ban đầuArrayvà không có khoảng trống nào trong mảng.

3. Sử dụng 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 sử dụng các mảng đã nhập. Các mảng này cho phép thao tác trực tiếp với bộ nhớ bên dưới và sử dụng các phần tử có độ dài cố định; chúng hiệu quả hơn các mảng tiêu chuẩn.

Đây là một ví dụ về cách tạo một mảng đã nhập:

 const myArray = new Int16Array(4);
console.log(myArray);  

Ví dụ này tạo ra một thương hiệu mới Int16Array với bốn phần tử được đặt thành không.

Int8Array, Int16Array, Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32ArrayVà Float64Array là tất cả các ví dụ về các loại mảng đã nhập. Mỗi phân loại liên quan đến một loại thông tin được ghép nối cụ thể và có kích thước byte tương ứng.

Đây là một ví dụ về cách sử dụng một Float32Array.

 const myArray = new Float32Array([1.0, 2.0, 3.0, 4.0]);
console.log(myArray);  

Ví dụ này tạo ra một cái mới Float32Array với bốn phần tử được đặt thành 1.0, 2.0, 3.0 và 4.0.

Các mảng đã 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ể nhanh hơn nhiều so với các mảng tiêu chuẩn vì chúng cho phép bạn thao tác trực tiếp với bộ nhớ.

Bằng cách giúp làm việc với dữ liệu nhị phân và thực hiện các phép tính toán học dễ dàng hơn, việc sử dụng các mảng đã nhập có thể giúp tối ưu hóa mã JavaScript của bạn.

4. Giảm thiểu số lần lặp lại

Việc sử dụng một vòng lặp JavaScript để lặp qua một mảng là điều phổ biến. Trong mọi trường hợp, việc lặp lại trên các mảng lớn có thể là một nút thắt cổ chai về hiệu năng. Giảm số lần bạn lặp lại các mảng JavaScript để tối ưu hóa chúng.

Một cách để thực hiện điều này là sử dụng lọc, bản đồVà giảm bớt thay vì các vòng lặp truyền thống. Các chiến lược này cải thiện khả năng thực thi mã và thường nhanh hơn so với việc lặp lại thủ công trên một mảng.

Bạn có thể sử dụng phương pháp bản đồ theo cách sau:

 const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.map((element) => element * 2) 

Trong trường hợp này, đoạn mã tạo một mảng mới gọi là Mảng mới sử dụng phương pháp bản đồ. Phương pháp bản đồ áp dụng một chức năng cho từng thành phần của ban đầuArray và trả về kết quả trong một mảng mới.

5. Sử dụng cú pháp hủy cấu trúc

Tính năng phá hủy của JavaScript là một tính năng mạnh mẽ trong JavaScript cho phép bạn trích xuất các giá trị từ mảng và đối tượng. Phương pháp này làm cho mã hiệu quả hơn bằng cách thực hiện ít phép gán biến hơn và ít truy cập mảng hơn. Những lợi thế của việc sử dụng phá hủy mở rộng đến khả năng đọc và giảm nỗ lực viết.

Một minh họa về cách trích xuất các giá trị từ một mảng bằng cách hủy như sau:

 const myArray = [1, 2, 3, 4, 5];

const [first, , third] = myArray;
console.log(first); 
console.log(third);  

Ví dụ này sử dụng hàm hủy để trích xuất phần tử thứ nhất và thứ ba từ myArray. Nó gán giá trị của phần tử đầu tiên của mảng cho Đầu tiên biến và giá trị của phần tử thứ ba đối với ngày thứ ba Biến đổi. Bằng cách để lại một khoảng trống trong mẫu phá hủy, nó sẽ bỏ qua phần tử thứ hai.

Bạn cũng có thể sử dụng hàm hủy với các đối số hàm để trích xuất các giá trị từ mảng:

 function myFunction([first, second]) {
    console.log(first);
    console.log(second);
}
const myArray = [1, 2, 3, 4, 5];
myFunction(myArray);  

Ví dụ này định nghĩa một chức năng gọi là chức năng của tôi lấy một mảng làm tham số. Sau đó, nó sử dụng hàm hủy để ghi nhật ký phần tử thứ nhất và thứ hai của mảng vào bảng điều khiển.

Tối ưu hóa mảng JavaScript cho ứng dụng nhanh hơn

Hợp lý hóa các mảng JavaScript là điều cần thiết để cải thiện hiệu suất mã của bạn. Bạn có thể tăng đáng kể khả năng phản hồi và tốc độ của các ứng dụng của mình bằng cách làm như vậy.

Để tận dụng tối đa mảng của bạn, hãy nhớ sử dụng toán tử trải rộng, tránh toán tử xóa, sử dụng mảng đã nhập, giảm số lần lặp và sử dụng hàm hủy. Ngoài ra, hãy thử đánh giá hiệu suất mã của bạn và thực hiện các cải tiến cơ bản để đảm bảo ứng dụng của bạn chạy trơn tru.

Bạn có thể tạo các ứng dụng nhanh hơn, đáng tin cậy hơn và cung cấp trải nghiệm người dùng tốt hơn bằng cách tối ưu hóa các mảng của mình.