Đảo ngược một mảng với những hạn chế nhất định là một trong những thách thức phổ biến nhất mà bạn sẽ gặp phải trong các cuộc phỏng vấn xin việc và các câu đố viết mã.
Hướng dẫn này sẽ cho bạn thấy năm các cách để đảo ngược một mảng trong JavaScript có và không có reverse cùng với các đoạn mã mà bạn có thể sử dụng.
Cách đảo ngược một mảng trong JavaScript bằng phương pháp đảo ngược
Khi bạn cần đảo ngược một mảng trong JavaScript, bạn có thể sử dụng reverse phương thức, sẽ đặt phần tử cuối cùng trước và phần tử đầu tiên sau cùng:
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.reverse();
console.log(reversedNumbers);
// [5, 4, 3, 2, 1]Nhưng hãy nhớ rằng các reverse phương thức cũng sẽ sửa đổi mảng ban đầu:
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.reverse();
console.log(reversedNumbers);
// [5, 4, 3, 2, 1]
console.log(numbers);
// [5, 4, 3, 2, 1]Một số thách thức mã hóa có thể muốn bạn giữ lại mảng ban đầu, vì vậy, hãy xem cách bạn có thể đảo ngược một mảng mà không thay đổi mảng ban đầu.
Cách đảo ngược một mảng trong JavaScript bằng Toán tử trải rộng
Bạn có thể sử dụng kết hợp toán tử trải rộng và reverse phương pháp để đảo ngược một mảng mà không thay đổi bản gốc.
Đầu tiên, bạn đặt các phần tử được trả về từ toán tử trải rộng vào một mảng mới bằng cách đặt cú pháp trải rộng bằng dấu ngoặc vuông []:
[...numbers]Sau đó, bạn gọi cho reverse phương thức trên mảng. Bằng cách này, các reverse phương thức sẽ được thực thi trên mảng mới thay vì ban đầu:
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = [...numbers].reverse();
console.log(reversedNumbers);
// [5, 4, 3, 2, 1]
console.log(numbers);
// [1, 2, 3, 4, 5]Lưu ý: các spread phương thức là cú pháp ES6. Khi bạn cần hỗ trợ các trình duyệt cũ hơn hoặc bạn muốn sử dụng cú pháp ES5, bạn có thể kết hợp slice và reverse các phương pháp. Hãy xem xét điều đó ngay bây giờ.
Cách đảo ngược một mảng trong JavaScript bằng các phương thức Slice và Reverse
Các slice phương thức được sử dụng để trả về các phần tử đã chọn dưới dạng một mảng mới. Khi bạn gọi phương thức mà không có bất kỳ đối số nào, nó sẽ trả về một mảng mới giống hệt với phương thức ban đầu (từ phần tử đầu tiên đến phần tử cuối cùng).
Tiếp theo, bạn gọi reverse phương thức trên mảng vừa được trả về. Đây là lý do tại sao mảng ban đầu không bị đảo ngược:
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.slice().reverse();
console.log(reversedNumbers);
// [5, 4, 3, 2, 1]
console.log(numbers);
// [1, 2, 3, 4, 5]Cách đảo ngược một mảng trong JavaScript mà không cần phương pháp đảo ngược
Đôi khi một cuộc phỏng vấn việc làm sẽ thách thức bạn đảo ngược một mảng mà không có reverse phương pháp. Không vấn đề gì! Bạn có thể sử dụng kết hợp một for vòng lặp và một mảng push phương pháp như trong ví dụ dưới đây:
let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = [];
for(let i = numbers.length -1; i >= 0; i--) {
reversedNumbers.push(numbers[i]);
}
console.log(reversedNumbers);Cách viết hàm đảo ngược của riêng bạn trong JS
Cuối cùng, giả sử bạn được giao nhiệm vụ viết hàm đảo ngược của riêng mình, hàm này cần đảo ngược một mảng mà không cần tạo bản sao. Điều này thoạt nghe có vẻ phức tạp, nhưng đừng lo lắng vì nó thực sự khá dễ dàng.
Điều bạn cần làm ở đây là hoán đổi phần tử đầu tiên và phần tử cuối cùng của mảng, sau đó là phần tử thứ hai và phần tử thứ hai với phần tử cuối cùng, v.v. cho đến khi bạn hoán đổi tất cả các phần tử.
Hãy viết một hàm để làm điều đó.
Viết chức năng customReverse và lưu trữ cả chỉ mục đầu tiên tại và chỉ số cuối cùng sử dụng array.length - 1 như các biến.
function customReverse(originalArray) {
let leftIndex = 0;
let rightIndex = originalArray.length - 1;
}Tiếp theo, tạo một while vòng lặp chạy miễn là leftIndex nhỏ hơn so với rightIndex.
Bên trong vòng lặp này, hoán đổi giá trị của leftIndex và rightIndex. Bạn có thể lưu trữ tạm thời một trong các giá trị trong một biến tạm thời:
while (leftIndex < rightIndex) {
// Swap the elements
let temp = originalArray[leftIndex];
originalArray[leftIndex] = originalArray[rightIndex];
originalArray[rightIndex] = temp;
}Cuối cùng, di chuyển leftIndex lên và rightIndex xuống. Khi mà while vòng lặp lặp lại, nó sẽ hoán đổi phần tử thứ hai và thứ hai thành phần tử cuối cùng, v.v.:
function customReverse(originalArray) {
let leftIndex = 0;
let rightIndex = originalArray.length - 1;
while (leftIndex < rightIndex) {
// Swap the elements with temp variable
let temp = originalArray[leftIndex];
originalArray[leftIndex] = originalArray[rightIndex];
originalArray[rightIndex] = temp;
// Move indices to the middle
leftIndex++;
rightIndex--;
}
}Vòng lặp sẽ dừng ngay khi không còn phần tử nào để đảo ngược. Đối với các mảng có kích thước lẻ, giá trị của leftIndex và rightIndex sẽ bằng nhau, vì vậy không trao đổi nữa. Đối với kích thước đồng đều, leftIndex sẽ lớn hơn so với rightIndex.
Bạn có thể kiểm tra chức năng để xem nó có hoạt động bình thường như thế này không:
let myArray = [1, 2, 3, 4, 5];
customReverse(myArray);
console.log(myArray);
// output is [5, 4, 3, 2, 1]Phần kết luận
Xin chúc mừng! Bạn không chỉ học cách đảo ngược một mảng trong JavaScript mà còn học cách viết hàm đảo ngược của riêng bạn.
Dưới đây là một số hướng dẫn JavaScript khác mà bạn có thể quan tâm:
