数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用另一个数组扩展现有的 JavaScript 数组？
在本教程中，让我们了解如何使用另一个数组扩展现有的 JavaScript 数组。在解释步骤之前，我们需要知道在各种情况下需要多个数组，学习正确的方法可以节省我们的编码时间。您会发现四种以上使用另一个数组扩展数组的方法。因此，很可能在本教程中找到一种易于记忆的方法。
使用 Array push() 方法和扩展语法
push() 方法在向现有的 JavaScript 数组添加项目方面非常有用。此外，您可以根据所需的输出传递各种不同的参数。
在此场景中，可以使用扩展运算符将一个数组中的项目与另一个数组扩展。
语法
array1.push( ...array2 )
在上面的语法中，我们使用 array2 的值扩展 array1。
算法
步骤 1 - 创建一个数组。
步骤 2 - 创建另一个可能添加到先前数组的数组。
步骤 3 - 使用 push() 方法和第一个数组。
步骤 4 - 在括号中提及另一个数组。
示例
在这个例子中，我们创建了两个数组，并使用 push 方法将数组 2 中列出的数字扩展到数组 1 中。您也可以使用多个数组，并使用“if 和 else”方法提供条件。
<html> <body> <div id = "my"> </div> <script> const number1 = [1, 2, 3] const number2 = [4, 5, 6] const text = "New Array is: " document.getElementById("my").innerHTML = text + number1; </script> </body> </html>
使用 Array push.apply() 方法
虽然 push 方法常用，但 apply 方法也可以提供类似的输出。此方法可能会将提到的数组视为第一个参数，并使用 push 方法扩展其他参数。
语法
array1.push.apply(array1, array2)
算法
步骤 1 - 创建一个新的数字或单词数组。
步骤 2 - 创建另一个将用于扩展的数组。
步骤 3 - 使用 apply 方法和 push 方法，使用需要用另一个数组扩展的数组。
步骤 4 - 按正确的顺序提及需要添加的数组列表。
示例
在下面的示例中，我们使用了 array.push.apply() 方法来扩展 JavaScript 数组。
<html> <body> <h4> Extend JavaScript array Using <i> array.push.apply()</i> method.</h4> <div id = "my"> </div> <script> const number1 = [1, 2, 3] const number2 = [4, 5, 6] number1.push.apply(number1, number2) const text = "New Array are: " document.getElementById("my").innerHTML = text + number1; </script> </body> </html>
数组的输出与我们之前使用 Push 方法获得的输出类似。您也可以将原型与 push 和 apply 方法一起使用以获得相同的结果。
使用 Array concat() 方法
在这里，我们将编写四个数组并两次使用 concat() 方法来查看数组如何用另一个数组扩展。
语法
array1.concat(array2)
示例
这是一个使用 concat() 方法编写 JavaScript 代码的示例。您必须记住的一件事是，对于将在 concat 方法中使用的数组，您必须使用“let”或“var”而不是“const”。例如，这里我们使用了“number1”数组和“num1”数组。
<html> <body> <h4> Extend JavaScript array Using <i> array.concat()</i> method. </h4> <div id="result"></div> <script> const number1 = [3, 6, 9] const number2 = [12, 15, 18] num1 = number1.concat(number2) const text = "New Array of numbers is : " document.getElementById("result").innerHTML = text + num1; </script> </body> </html>
使用扩展运算符扩展数组
与其他方法相比，扩展运算符易于记忆，并使代码看起来更清晰。
语法
array1 = [...array1, ...array2]
示例
在这里，我们使用了两个 let 变量，因为 const 变量不能用于扩展运算符方法。运行此脚本后，您会发现数组“number2”重复了数组“number1”的扩展方法的输出和数组“number2”的数字。
原因是数组 number1 首先使用该方法赋值，当它在第二种方法中使用时，它会重复输出。
<html> <body> <h4> Extend JavaScript array Using <i> Spread Operator. </i> </h4> <div id ="result1"></div> <div id ="result2"></div> <script> let number1 = [4, 5, 6] let number2 = [1, 2, 3] number1 = [...number2, ...number1] number2 = [...number2, ...number1] const text = "New number are: " document.getElementById("result1").innerHTML = text + number1; document.getElementById("result2").innerHTML = text + number2; </script> </body> </html>
在编写代码之前实现预期的输出是第一步。您可以获得持久的结果，并将这些方法用于各种网站。
扩展运算符和 concat() 等方法可用于试验数组并获得不同的输出。尽管这些方法看起来很简单，但只有通过反复试验才能最好地利用它们。
3K+ 次浏览
