原文: How to Swap Two Array Elements in JavaScript – Switch Elements in JS

当你在处理数组时,有时你需要在 JavaScript 中交换数组中的两个元素。

也许你正在研究一个算法问题,比如气泡排序算法,你需要比较两个值,然后在条件为真时交换它们。

除此之外,许多其他情况可能需要你交换数组元素。

如果你还不明白我说的“交换”是什么意思,这里有一个例子。假设你有一个数字数组,你想把索引 1 的元素 -2 和索引 0 的元素 12 互换,如下图所示:

s_B08002E277AA9EEDFC6B2A9D153D5485AA9F9B4567270177E695FBE6032A1880_1664460747763_Untitled.drawio+14

如果你还不熟悉 JS 是如何做这些事情的,在 JavaScript 中实现这一点可能会让你感到困惑。你可能也在寻找更好的方法来处理这个问题。

这篇文章将教你三种方法:使用临时变量、解构赋值和使用 splice() 数组方法。

如何用一个临时变量来交换两个数组元素

为了交换元素,你可以使用一个临时变量并经过三个步骤。

第一步是创建一个临时变量来保存第一个元素的值。第二步是将第一个元素的值设置为第二个元素的值。第三步是将第二个元素的值设置为临时变量中的值。

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]

你也可以创建一个可重复使用的函数来处理这个问题,你可以指定数组和你希望交换的两个索引。

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]

如何通过解构赋值交换两个数组元素

一个更好的交换数组元素的方法是解构赋值,因为它只需一行代码就能完成工作。

你只需创建一个新的数组,其中包含按特定顺序排列的两个元素,然后将其分配给一个新的数组,其中包含按相反顺序排列的两个元素。

let myArray = [12, -2, 55, 68, 80];

[myArray[0], myArray[1]] = [myArray[1], myArray[0]];

console.log(myArray); // [-2,12,55,68,80]

你也可以创建一个可重复使用的函数来处理这个问题,你可以指定数组和你希望交换的两个索引。

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]

如何用 Splice() 方法交换两个数组元素

最后,你可以使用 splice() 数组方法。你可以用这个方法从一个数组中移除一个或多个元素,然后用任何指定的元素替换这些元素。

// 语法
array.splice(index, howmany, element1, ....., elementX)

例如,如果你有一个数组,你想删除一个特定的元素,你将指定它的 id 和想删除的元素的数量。在我们的例子中,这两个值是 1。

let myArray = [12, -2, 55, 68, 80];

myArray.splice(1, 1);
console.log(myArray); // 12,55,68,80]

另外,如果你想用另一个元素替换掉被删除的元素,你的代码会是这样的:

let myArray = [12, -2, 55, 68, 80];

myArray.splice(1, 1, 32);
console.log(myArray); // [12,32,55,68,80]

但如果你想交换两个元素,代码应该是这样:

let myArray = [12, -2, 55, 68, 80];

myArray[0] = myArray.splice(1, 1, myArray[0])[0];

console.log(myArray); // [-2,12,55,68,80]

你也可以创建一个可重复使用的函数来处理这个问题,你可以指定数组和希望交换的两个索引。

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]

小结

在这篇文章中,你学习了在 JavaScript 中交换数组元素的三种方法。

你可以使用任何方法,但最好是使用 ES6 的解构赋值方法,因为它更容易被大家理解和使用。

祝你编程愉快!