如何在 JavaScript 中展平数组

2025年1月7日 | 阅读 6 分钟

引言

展平数组的技术将数组的 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]

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

此函数使用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 ('...')中的展开运算符展平了数组。当在要展平的数组前使用展开运算符“...”时，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<arr.length; i++) {
        if (Array.isArray(arr[i])) {
flattened_arr = flattened_arr.concat(flatten(arr[i]));
        } else {
flattened_arr.push(arr[i]);
        }
      }
      return flattened_arr;
    }
console.log("Flattened Array: ", flatten(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 ]

工作机制

第一步，我们构建了一个需要展平的数组。然后使用concat()和isArray()函数展平了数组。当isArray()方法一次将数组的元素作为参数时，concat()函数将连接结果以创建一个单一的数组。现在我们已经打印了展平后的数组。

使用 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 <array.length) {
const val = array[counter];
      if (Array.isArray(val)) {
        helper(val);
      } else {
flattened_array.push(val)
      }
      counter++;
    }
  }
  helper(nested);
  return flattened_array;
}
console.log("Flattened Array: ", flatten(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 ]

工作机制

第一步，我们构建了一个需要展平的数组。之后，使用栈和isArray()函数展平了数组。isArray()函数将数组作为一个参数，一次处理一个元素。如果提供的参数值包含多个元素，则数组将使用展开运算符进行展平，并将附加元素推送到堆栈中。否则，如果传递的参数只包含一个元素，我们将只添加该元素到最终列表。最终，我们在反转展平后的 arr 结果数组后返回该数组。

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

此方法通过使用生成器函数在 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 ]

工作机制

第一步，我们构建了一个需要展平的数组。然后使用生成器函数展平了数组。生成器函数将接受数组和深度作为两个参数。深度表示数组的最大维度。在生成器函数内部，yield关键字用于启动或停止生成器函数。该函数总是使用"yield"来返回它接收到的任何值。现在我们已经打印了展平后的数组。

使用 flat() 方法在 JavaScript 中展平数组的程序

此技术使用flat()函数在 JavaScript 中展平数组。在这里，我们可以看到一个错误和arr。flat()函数仅受NodeJS支持，而许多浏览器不支持，并且 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()方法，但许多浏览器不支持，这可能会导致错误。

下一个主题JavaScript 中的浅拷贝和深拷贝

如何在 JavaScript 中展平数组

引言

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

JavaScript 中的实现

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

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

使用 forEach() 在 JavaScript 中展平数组的程序

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

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

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

使用 flat() 方法在 JavaScript 中展平数组的程序

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何在 JavaScript 中展平数组

引言

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

JavaScript 中的实现

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

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

使用 forEach() 在 JavaScript 中展平数组的程序

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

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

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

使用 flat() 方法在 JavaScript 中展平数组的程序

结论

相关帖子

从 JavaScript 对象获取键值

JavaScript 输入

如何在 JavaScript 中循环遍历数组

JavaScript 中的 onkeypress 事件

JavaScript 换行符

学习 JavaScript 需要多长时间？