Khi bạn đang làm việc với mảng, sẽ có lúc bạn cần hoán đổi hai phần tử trong một mảng trong JavaScript.
Có thể bạn đang giải một câu hỏi về thuật toán, chẳng hạn như thuật toán sắp xếp bong bóng, trong đó bạn cần so sánh hai giá trị rồi hoán đổi chúng nếu điều kiện của bạn là đúng.
Ngoài ra, nhiều tình huống khác có thể yêu cầu bạn hoán đổi các phần tử mảng.
Trong trường hợp bạn chưa hiểu ý tôi khi nói “hoán đổi”, đây là một ví dụ. Giả sử bạn có một dãy số và bạn muốn hoán đổi phần tử tại chỉ mục 1 đó là -2 với phần tử tại chỉ mục đó là 12như trong hình bên dưới:
Việc triển khai điều này trong JavaScript có thể gây nhầm lẫn nếu bạn chưa quen với cách JS thực hiện những loại việc này. Bạn cũng có thể đang tìm kiếm những cách tốt hơn để xử lý việc này.
Bài viết này sẽ hướng dẫn bạn ba cách tiếp cận: sử dụng biến tạm thời, phá hủy và sử dụng biến splice() phương pháp mảng.
Cách hoán đổi hai phần tử mảng với một biến tạm thời
Để hoán đổi các phần tử, bạn có thể sử dụng một biến tạm thời và thực hiện ba bước.
Bước đầu tiên là tạo một biến tạm thời để giữ giá trị của phần tử đầu tiên. Bước thứ hai là đặt giá trị của phần tử đầu tiên thành giá trị của phần tử thứ hai. Bước thứ ba là đặt giá trị của phần tử thứ hai thành giá trị trong biến tạm thời.
let myArray = [12, -2, 55, 68, 80];
const temp = myArray[0];
myArray[0] = myArray[1];
myArray[1] = temp;
console.log(myArray); // [-2,12,55,68,80]
Bạn cũng có thể tạo một hàm có thể tái sử dụng để xử lý việc này, theo đó bạn chỉ định mảng và hai chỉ mục mà bạn muốn hoán đổi.
const swapElements = (array, index1, index2) => {
let temp = array[index1];
array[index1] = array[index2];
array[index2] = temp;
};
let myArray = [12, -2, 55, 68, 80];
swapElements(myArray, 0, 1);
console.log(myArray); // [-2,12,55,68,80]
Cách hoán đổi hai phần tử mảng bằng cách hủy cấu trúc
Một phương pháp tốt hơn nhiều mà bạn có thể sử dụng để hoán đổi các phần tử mảng là phá hủy, vì nó thực hiện công việc chỉ trong một dòng mã.
Bạn chỉ cần tạo một mảng mới chứa cả hai phần tử theo một thứ tự cụ thể, sau đó gán nó cho một mảng mới chứa cả hai phần tử theo thứ tự đảo ngược.
let myArray = [12, -2, 55, 68, 80];
[myArray[0], myArray[1]] = [myArray[1], myArray[0]];
console.log(myArray); // [-2,12,55,68,80]
Bạn cũng có thể tạo một hàm có thể tái sử dụng để xử lý việc này, theo đó bạn chỉ định mảng và hai chỉ mục mà bạn muốn hoán đổi.
const swapElements = (array, index1, index2) => {
[myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
};
let myArray = [12, -2, 55, 68, 80];
swapElements(myArray, 0, 1);
console.log(myArray); // [-2,12,55,68,80]
Cách hoán đổi hai phần tử mảng với Splice() Phương pháp
Cuối cùng, bạn có thể sử dụng splice() phương pháp mảng. Bạn có thể sử dụng phương pháp này để xóa một hoặc nhiều phần tử khỏi một mảng và thay thế (các) phần tử đó bằng bất kỳ phần tử nào được chỉ định.
// Syntax
array.splice(index, howmany, element1, ....., elementX)
Ví dụ: nếu bạn có một mảng và muốn xóa một phần tử cụ thể, bạn sẽ chỉ định id của nó và số lượng phần tử bạn muốn xóa. Trong trường hợp của chúng tôi, nó chỉ là một.
let myArray = [12, -2, 55, 68, 80];
myArray.splice(1, 1);
console.log(myArray); // 12,55,68,80]
Ngoài ra, nếu bạn muốn thay thế phần tử đã xóa bằng một phần tử khác, mã của bạn sẽ như sau:
let myArray = [12, -2, 55, 68, 80];
myArray.splice(1, 1, 32);
console.log(myArray); // [12,32,55,68,80]
Nhưng nếu bạn muốn hoán đổi hai phần tử, bạn sẽ có một cái gì đó như thế này:
let myArray = [12, -2, 55, 68, 80];
myArray[0] = myArray.splice(1, 1, myArray[0])[0];
console.log(myArray); // [-2,12,55,68,80]
Bạn cũng có thể tạo một hàm có thể tái sử dụng để xử lý việc này, theo đó bạn chỉ định mảng và hai chỉ mục mà bạn muốn hoán đổi:
const swapElements = (array, index1, index2) => {
myArray[index1] = myArray.splice(index2, 1, myArray[index1])[0];
};
let myArray = [12, -2, 55, 68, 80];
swapElements(myArray, 0, 1);
console.log(myArray); // [-2,12,55,68,80]
kết thúc
Trong bài viết này, bạn đã học được ba phương pháp để hoán đổi các phần tử của mảng trong JavaScript.
Bạn có thể sử dụng bất kỳ phương pháp nào, nhưng tốt nhất là sử dụng phương pháp phá hủy ES6 vì nó dễ hiểu và dễ sử dụng hơn nhiều đối với mọi người.
Hãy mã hóa vui vẻ!
