如何在JavaScript中用另一个数组的元素替换数组中的元素？

给定的任务是用另一个数组的元素替换数组中的元素。

输入-输出场景

让我们来看一些输入-输出场景。假设有两个包含元素的数组。第一个数组的元素比第二个数组多，我们用第二个数组的元素替换第一个数组的一部分元素。

Array1 = [1, 3, 5, 7, 2, 4];
Array2 = [3, 6];
Output = [3, 6, 5, 7, 2, 4] // elements got replaced

让我们考虑另一种情况，其中第一个数组中的元素多于第二个数组中的元素。第二个数组的元素将填充第一个数组。

Array1 = [3, 6];
Array2 = [1, 3, 5, 7, 2, 4];
Output = [1, 3, 5, 7, 2, 4]

使用splice()方法

splice() 方法通过替换或删除元素以及添加元素来修改或更改数组的项目。

语法

以下是splice()方法的语法：

splice(start, deleteCount, item1, item2, itemN)

我们可以使用splice() 方法用另一个数组的元素替换数组的一部分元素。但在这种情况下，我们需要将元素作为参数传递，而不是将数组作为参数传递。

为了完成上述任务，splice() 方法除了参数如 (0, anotherArr.Length, 1, 2, 3) 之外，我们需要创建一个包含上述参数的数组，并使用apply方法来调用带有参数的splice方法。我们还使用concat() 方法来连接两个数组。

以下是上述预期参数的语法：

Array.prototype.splice.apply(arr, [0, anotherArr.length].concat(anotherArr));

示例1

以下是一个用另一个数组的元素替换一个数组中的元素的示例：

<!DOCTYPE html>
<html>
<head>
   <title>Replace elements in array with elements of another array</title>
</head>
<center>
<body>
   <p id = "para1"></p>
   <p id = "para2"></p>
   <button onClick="fun()"> Click to replace elements</button>
   <h3 id="demo"></h3>
   <script>
      var arr = ["Sharukh","Khan","toh", "suna", "hoga"];
      document.getElementById("para1").innerHTML = arr;
      var anotherArr = [ "Rahul", "naam" ];
      document.getElementById("para2").innerHTML = anotherArr;
      function fun() {
         Array.prototype.splice.apply(arr, [0, anotherArr.length].concat(anotherArr));
         document.getElementById("demo").innerHTML = arr;
      };
   </script>
</body>
</center>
</html>

在上面的输出中，我们将arr作为第一个参数，其中第二个数组中的[0, anotherArr.length]（所有元素）将从第一个数组的起始索引开始替换，而concat() 方法将连接两个数组。

示例2

在下面的示例中，我们创建了两个数组。第一个数组的元素比第二个数组多。通过使用splice()方法，我们将索引设置为0，并传递arr2.length，并用展开运算符(…)提取它们，因此元素将从arr1的第0个索引开始替换。

<!DOCTYPE html>
<html>
<head>
   <title>Replace elements in array with elements of another array</title>
</head>
<center>
<body>
   <p id = "para1"></p>
   <p id = "para2"></p>
   <button onClick="func()"> Click to replace elements</button>
   <h3 id="demo"></h3>
   <script>
      let arr1 = [6, 31, 8, 21, 20 , 22];
      document.getElementById("para1").innerHTML = arr1;
      let arr2 = ["hello", "numbers"];
      document.getElementById("para2").innerHTML = arr2;
      function func(){
         arr1.splice(0, arr2.length, ...arr2);
         document.getElementById("demo").innerHTML = arr1;
      };
   </script>
</body>
</center>
</html>

正如我们在输出中看到的，第一个数组中的元素被替换了。

示例3

在下面的示例中，我们有两个数组。第一个数组中的元素少于第二个数组中的元素。我们使用splice方法替换了元素。第二个数组的元素将填充整个第一个数组，因为第一个数组中元素的大小小于第二个数组。

<!DOCTYPE html>
<html>
<head>
   <title>OReplace elements in array with elements of another array</title>
</head>
   <center>
      <body>
         <p id = "para1"></p>
         <p id = "para2"></p>
         <button onClick="func()"> Click to replace elements</button>
         <h3 id="demo"></h3>
         <script>
            let arr1 = [6, 31];
            document.getElementById("para1").innerHTML = arr1;
            let arr2 = [66, 88, 23, 53, 54];
            document.getElementById("para2").innerHTML = arr2;
            function func(){
               arr1.splice(0, arr2.length, ...arr2);
               document.getElementById("demo").innerHTML = arr1;
            };
         </script>
      </body>
   </center>
</html>

在输出中，我们可以看到第二个数组中的元素替换并填充了第一个数组。

更新于：2022年9月22日

7000+ 次浏览

启动你的职业生涯

完成课程后获得认证

开始学习
广告