JavaScript 如何展开数组

介绍：

将数组展开的技术将数组的n维度减少为1维度。简单来说，就是将多个嵌套数组合并成一个单一的数组，创建一个单一的一维数组。

只减少数组的维度就被称为展开数组。该方法涉及将数组中所有嵌套的组件合并为一个一维数组。

示例：

Original Array : [5,7,[2,1,10],[9,3,4,8],6] 
Flattened Array : [5,7,2,1,10,9,3,4,8,6]

使用concat()和apply()在JavaScript中压平数组

该函数通过使用concat()和apply()方法在JavaScript中压平一个数组。

在JavaScript中的实现

arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
let flattened_array = [].concat.apply([], arr);
console.log("Flattened Array: ", flattened_array)

输出：

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制：

首先，我们创建一个数组，我们希望将其展平。然后使用 concat() 和 apply() 方法来展平数组。concat()函数将参数数组作为参数应用后将结果连接起来，从而将数组减少到一维。现在我们打印出展平后的数组。

使用ES6中的扩展运算符在JavaScript中展平数组的程序

通过这种技术，我们将使用ES6中的 扩展运算符 来展平JavaScript数组。

JavaScript中的实现：

arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
let flattened_array=  [].concat(...arr);
console.log("Flattened Array: ", flattened_array)

输出：

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制：

在第一步中，我们构建了一个我们想要展平的数组。然后使用 ES6中的Spread Operator (‘…’) 将数组展平。当在展平数组之前使用 Spread Operator “…” 时， concat() 函数将连接结果以创建一个单一的数组。我们现在已经打印出展平后的数组。

使用reduce方法展平数组的JavaScript程序

使用 reduce 方法，我们将展平一个JavaScript数组。

JavaScript实现：

arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
let flattened_array = arr.reduce((acc, val) => {
    return acc.concat(val)
}, []);
console.log("Flattened Array: ", flattened_array)

输出：

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制：

我们首先构建了一个数组，我们希望将其展平。然后，我们使用reduce方法展平了数组。现在我们打印了展平后的数组。

使用forEach()方法展平数组的JavaScript程序

在这个程序中，我们将使用 forEach() 循环来展平JavaScript中的一个数组。

javascript中的实现：

const arr = [[1,2],[3,4,5],[6,7,8,9],[10]];
console.log("Original Array: ",arr)
const flattened_array = []
arr.forEach(array => {
flattened_array.push(...array);
});
console.log("Flattened Array: ", flattened_array)

输出:

Original Array:  [ [ 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8, 9 ], [ 10 ] ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制：

第一步，我们建立了一个数组，我们希望将其展平。然后使用 forEach() 循环来展平这个数组。我们在 forEach() 循环内部使用 扩展运算符 ‘…’ 来展平数组。现在我们已经打印出了展平后的数组。

使用Reduce、Concat和IsArray在JavaScript中展平一个数组的程序

这种方法通过反复使用 reduce()、concat() 和 isArray() 方法来展平JavaScript中的数组。

JavaScript实现：

const arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
function flatten (arr) {
      var flattened_arr = [];
for (var i = 0; i

输出：

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制：

我们首先构建一个数组，我们想要将其展开。然后使用 concat() 和 isArray() 函数将数组展开。在此之后， concat() 函数使用 isArray() 方法逐个将数组的项作为参数进行拼接，以创建一个单一的数组。我们现在打印了展开的数组。

使用while循环和递归辅助函数展开数组的JavaScript程序

这种方法通过使用 while 循环和一个 递归辅助 函数来展开JavaScript中的数组。

JavaScript中的实现：

const arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
const flatten = (nested) => {
const flattened_array = [];
const helper = (array) => {
    let counter = 0
while (counter 

输出：

Original Array:  [ [ 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8, 9 ], [ 10 ] ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制:

第一步，我们构建了一个我们想要展平的数组。然后，使用 stack 和 isArray() 函数对数组进行了展平。通过 isArray() 函数，我们将一个数组作为参数，每次取出一个元素。如果提供的参数值包含多个元素，我们将使用 spread 操作符展平数组，并将额外的元素推入堆栈。否则，如果传入的参数只包含一个元素，我们将直接将该元素添加到最终的列表中。最后，我们返回展平后的数组的反转形式。

JavaScript中使用生成器函数展平数组的程序

这种方法通过使用 generator 函数在JavaScript中展平一个数组。

在JavaScript中的实现:

const arr = [1,2,[3,4,5],[6,7,8,9],10]; 
console.log("Original Array: ",arr)
function* flatten(array, depth) {
if(depth === undefined) {
      depth = 1;
    }
for(const val of array) {
if(Array.isArray(val) && depth > 0) {
          yield* flatten(val, depth - 1);
        } else {
          yield val;
        }
    }
}
const flattened_arr = [...flatten(arr, Infinity)];
console.log("Flattened Array: ", flattened_arr)

输出：

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制:

我们首先构建一个数组，我们想要将其扁平化。然后使用一个 生成器（generator） 函数来将数组扁平化。参数数组和深度是生成器函数将使用的两个参数。深度表示数组的最大维度。在生成器函数内部，使用 yield 关键字来启动或停止生成器函数。该函数总是使用术语 “yield” 来返回它接收的任何值。现在已经打印了已经扁平化的数组。

JavaScript中使用flat()方法来扁平化数组的程序

该技术使用 flat() 函数来扁平化JavaScript中的数组。这里，我们可以看到一个 错误 和 arr 。只有 NodeJS 支持 flat() 函数，很多浏览器不支持，并且flat不是一个函数。

JavaScript中的实现:

const arr = [1,2,[3,4,5],[6,7,8,9],10] 
console.log("Original Array: ",arr)
flattened_arr = arr.flat();
console.log("Flattened Array: ", flattened_arr)

输出：

Original Array:  [ 1, 2, [ 3, 4, 5 ], [ 6, 7, 8, 9 ], 10 ]
Flattened Array:  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

工作机制：

在第一步中，我们构建了一个数组，并希望将其展开。然后使用 flat() 函数将数组展开。使用 flat() 函数来展开并返回数组，该函数接受一个数组作为输入。我们现在打印展开后的数组。

结论

在我们讨论了JavaScript中几种展平数组的方法之后，我们可以得出以下结论。

• 展平数组的过程将其维度从 n 维度减少到 一维
• 将整个数组的嵌套元素移除并合并为一个一维数组。
• 当生成器函数返回任何值时，它会借助 yield 关键字。这个 yield 关键字用于 重新启动 或 暂停 生成器函数。
• 虽然 NodeJS 支持 flat() 方法，但很多浏览器不支持，可能会导致错误。