如何在 JavaScript 中从多个数组中获取单个数组

javascriptweb developmentfront end technologyobject oriented programming

在这个问题中,我们将了解如何从多个数组中获取单个数组以及解决此问题的不同方法。

我们将使用三种方法来解决这个问题:第一种方法是借助扩展运算符,第二种是连接方法,最后一种方法是使用扩展运算符进行推送。

理解问题

我们给出了两个或更多个数组,我们必须将它们连接到一个数组中。可以给出多个数组,将它们连接起来后应该显示为单个数组。

让我们通过下面的示例来理解:

在上面的示例中,我们给出了三个数组,array1、array2 和 array3,将它们组合起来后,我们得到了一个数组 [2,4,5,6,3,7,1,8,9]。请注意,这里的顺序与我们在开始时传递的顺序相同,即 [array1, array2, array3]。

问题代码

正如我们上面所讨论的,我们将逐一使用三种方法解决这个问题。

通过使用扩展运算符

扩展运算符是在 javascript ES6 中引入的。扩展运算符的主要操作是将数组的一部分或数组的所有部分复制到另一个数组中。扩展运算符的语法用三个点 (...) 表示。当需要将数组或对象的所有元素添加到新创建的数组中时,使用此运算符。

算法

步骤 1:定义数组并在其中分配值。

步骤 2:使用扩展运算符创建另一个数组,并将两个创建的数组传递到其中。

步骤 3:返回组合后的数组。

示例

// 定义数组
var name1 = ['Nick', 'John', 'Mili'];
var name2 = ['Peter', 'Abraham', 'Avi'];

//使用扩展运算符
var Combine = [...name1, ...name2];
console.log(combine);

输出

['Nick', 'John', 'Mili', 'Peter', 'Abraham', 'Avi']

通过使用 concat 方法

在 javascript 中,有一个预定义的方法叫做 concat()。使用这种方法,我们可以将多个数组合并为一个数组。在下面的代码中,我们可以理解这种方法。如代码所示,有三个数组定义为 arr1、arr2 和 arr3。然后我们有一个名为 combinedArray 的新数组,它在执行连接操作后存储一个数组。我们可以通过两种方式执行 concat 操作 [].concat(arr1, arr2, arr3) 或 arr1.concat(arr2, arr3),这两行都会给出相同的结果。

算法

步骤 1:定义数组 arr1、arr2、arr3 并在其中赋值。

步骤 2:创建另一个数组"combinedArray"并使用 concat 方法赋值,并添加我们在步骤 1 中创建的所有数组。

步骤 3:返回组合数组。

示例

// 定义数组
var arr1 = [100, 200, 300]

var arr2 = [400, 500, 600];

var arr3 = [700, 800, 900];

// 使用 concat 方法之前

console.log("合并数组之前");
console.log(arr1, arr2, arr3);

//使用 concat 方法

var combinedArray = [].concat(arr1, arr2, arr3); // 或者我们可以写成 arr1.concat(arr2, arr3);

console.log("合并数组之后", combinedArray);

输出

合并数组前
[ 100, 200, 300 ] [ 400, 500, 600 ] [ 700, 800, 900 ]
合并数组后 [ 100, 200, 300, 400, 500, 600, 700, 800, 900 ]

通过使用推送和扩展运算符

在此步骤中,我们将使用扩展运算符来扩展所有元素,然后我们将使用 javascript 的预定义方法推送将扩展的元素添加到数组中。

在下面的代码中,我们在函数 CombineArrays 中使用 rest 参数来接收任意数量的参数(...multipleArrays)。然后,我们使用 for 循环,以便函数中传递的所有参数都将使用扩展运算符扩展数组。最后,我们将扩展的元素推送到新创建的名为 singleArray 的数组中。

算法

步骤 1:定义数组并在其中分配值。

步骤 2:创建函数 CombineArrays 并使用扩展运算符将参数传递给该函数。

步骤 3:创建一个名为 singleArray 的空数组。

步骤 4:定义一个 for 循环,通过计算数组的长度将 arr1、arr2 和 arr3 中的所有元素推送到 singleArray。

步骤 5:返回 singleArray 值。

步骤 6:现在打印以查看组合数组。

示例

//定义多个数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];

//定义函数执行合并操作
function CombineArrays(...MultipleArrays) {
    let SingleArray = [];
    for(let i = 0; i < multipleArrays.length; i++) {
        singleArray.push(...multipleArrays[i]);
    }
    return singleArray;
}

console.log("多个数组中的单个数组")
console.log(combineArrays(arr1, arr2, arr3))

输出

多个数组中的单个数组
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

复杂度

由于我们已经用三种方法实现了这个问题,我们将逐一讨论以下每种方法的时间复杂度。

首先我们讨论扩展运算符方法。扩展运算符几乎需要 O(n) 时间,因此第一种方法的总时间复杂度为 O(n2)。

第二种方法将需要 O(n) 时间,因为数组中有 n 个元素。

在最后一种方法中,我们使用了一个名为 CombineArrays 的函数,其中我们使用了 for 循环。for 循环将运行,直到数组的所有元素都添加到名为 SingleArray 的新数组中。因此,如果 arr1 的长度为 l,arr2 的长度为 m,arr3 的长度为 n,那么时间复杂度将为 O(l*m*n) 或 O(N),其中 N 是 l、m 和 n 的乘积。

结论

正如我们上面所见,您可以通过三种不同的方式解决给定的问题。第一种是使用 javascript ES6 的扩展运算符,第二种是使用预定义函数 concat,最后是使用扩展和推送方法。因此,有很多方法可以解决单个问题。


相关文章