Đả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: