如何在 JavaScript 中交换两个数组元素?
front end technologyjavascriptweb development
在本教程中，我们使用不同的方法在 JavaScript 中交换两个数组元素。例如，我们将数组的第一个和第二个元素交换为
输入 −
["first", "second", "third", "fourth", "fifth"]
输出 −
["second", "first", "third", "fourth", "fifth"]
在这里我们交换了“first”和“second”数组的值。
现在我们将研究交换两个元素的不同方法 -
使用额外变量
使用数组 Splice() 方法
使用解构
方法 1:使用额外变量
在此方法中，我们将借助额外变量名"temp"然后我们执行以下操作
我们将第一个元素复制到 temp。
将第二个元素值复制到第一个元素。
将 temp 值复制到第二个值。
示例
在下面的程序中，我们使用一个额外的变量交换数组的两个元素。
<!DOCTYPE html>
<html>
<head>
<title>Swapping two array elements in a single line -TutorialsPoint</title>
</head>
<body>
<p id = "before">Before swap array elements are:<br> </p>
<p id="after">After swapping array elements are: <br></p>
<script>
var arr=["first", "second", "third", "fourth", "fifth"]
document.getElementById("before").innerHTML+= arr
var temp=arr[0];
arr[0]=arr[1];
arr[1]=temp;
document.getElementById("after").innerHTML+=arr
</script>
</body>
</html>
方法 2:使用数组 Splice() 方法
使用 splice() 我们可以实现数组的交换。我们只需取出指定位置的元素，然后 splice 将返回被移除的数组值，末尾的 [0] 是数组 splice 方法的必要条件，表示 splice 将返回单个元素。
示例
以下程序演示如何使用数组 splice 方法交换数组中的两个元素。
<html>
<head>
<title>Swapping two array elements in a single line -TutorialsPoint</title>
</head>
<body>
<h3>arr=["first", "second", "third", "fourth", "fifth"]</h3>
<input type="button" value="Click to Swap" onclick="swap()"/>
<h3 id="writeHere">After swapping array is:</h3>
<script>
function swap(){
var arr=["first", "second", "third", "fourth", "fifth"]
x=0, y=1
var returnFromSplice=arr.splice(y, 1, arr[x])[0]
arr[0]=returnFromSplice
document.getElementById("writeHere").innerHTML=JSON.stringify(arr)
}
</script>
</body>
</html>
方法 3:一行使用解构
我们可以使用解构来交换数组中的两个元素。交换两个元素的主要逻辑可以在一行中完成。
以下是在一行中交换两个数组元素的语法 -
arr[n]=[arr[m], arr[m]=arr[n]][0]
这里 n、m 是要交换元素的索引。
示例
一行交换两个元素。
<html>
<body>
<h3>arr=[&"first", &"second", &"third", &"fourth", &"fifth"]</h3>
<input type=&"button" value=&"Click to Swap" onclick=&"swap()"/>
<h3 id=&"writeHere">交换后的数组为:</h3>
<script>
function swap(){
let arr=["first", "second", "third", "fourth", "fifth"]
arr[0]=[arr[1], arr[1]=arr[0]][0]
document.getElementById("writeHere").innerHTML=JSON.stringify(arr)
}
</script>
</body>
</html>
这里我们将第 0 个元素分配给第 1 个元素，并使用解构概念将第 1 个数组元素分配给第 0 个元素，最后 [0] 表示将以数组的形式返回 1 个值，并且它将被交换。
所以，这是一些方法，我们可以使用这些方法在最后一种方法中交换两个数组元素，仅使用一行我们就可以完成工作。
