如何使用 JavaScript 展平数组
使用 flat()
方法展平数组,例如 const flat = arr.flat()
。 flat 方法有一个参数,默认为 1,表示嵌套数组应该被展平的深度。 该方法返回一个新数组,其中连接有子数组元素。
const arr = [['a'], ['b', 'c'], ['d']];
const flat = arr.flat();
console.log(flat); // 👉️ ['a', 'b', 'c', 'd']
我们使用 Array.flat
方法来展平一个数组。
该方法采用的唯一参数是数组应该展平的深度级别。
因为我们没有为参数传递值,所以它默认为 1。
如果我们的数组嵌套更深,并且保留默认深度值 1,则数组不会完全展平。
const arr = [[['a']], [['b', 'c']], [['d']]];
// ✅ 1 Level
const flat1 = arr.flat(1);
// 👉️ [ ['a'], ['b', 'c'], ['d'] ]
console.log(flat1);
// ✅ 2 Levels
const flat2 = arr.flat(2);
// 👉️ ['a', 'b', 'c', 'd']
console.log(flat2);
如果我们不知道数组的嵌套深度并且想要完全展平它,则可以将 Infinity 作为参数传递给 flat()
方法。
const arr = [[['a']], [['b', 'c']], [['d']]];
const flat = arr.flat(Infinity);
// 👉️ ['a', 'b', 'c', 'd']
console.log(flat);
将 Infinity 传递给 flat
方法会将数组展平为单层。
使用 concat() 展平数组
使用带有扩展语法 (...)
的 concat()
方法来展平数组,例如 [].concat(...arr)
。 扩展语法解包数组并将子数组作为参数传递给方法。 concat
方法将子数组连接成一个新数组并返回结果。
const arr = [['a'], ['b', 'c'], ['d']];
const flat = [].concat(...arr);
console.log(flat); // 👉️ ['a', 'b', 'c', 'd']
我们使用扩展语法 (...)
解包数组并将所有子数组作为逗号分隔值传递给 Array.concat
方法。
concat
方法接受多个数组和/或值并将它们连接成一个新数组。
// 👇️ ['a', 'b']
console.log([].concat(['a'], ['b']));
请注意,这种方法只会展平阵列 1 级别。
我们还可以使用 Array.reduce
方法采取更实用的方法。
使用 reduce() 展平数组
要展平一个数组,调用 reduce()
来迭代数组,将一个空数组作为初始值传递给它。 在每次迭代中,使用扩展语法将累积数组和子数组的值解包到一个新数组中并返回结果。
const arr = [['a'], ['b', 'c'], ['d']];
const flat = arr.reduce((accumulator, array) => {
return [...accumulator, ...array];
}, []);
console.log(flat); // 👉️ ['a', 'b', 'c', 'd']
我们传递给 reduce
方法的函数会为数组中的每个元素(子数组)调用。
我们将累加器变量的初始值设置为一个空数组。
在每次迭代中,我们将累加器和当前子数组中的值解包到一个新数组中并返回结果。
最终结果是一个被展平了 1 级的数组。
如果不习惯减少,一种更具可读性和直观性的方法是使用 Array.forEach
方法。
使用 forEach() 展平数组
要展平数组:
- 创建一个新变量并将其设置为一个空数组。
-
使用
forEach()
方法遍历数组数组。 - 在每次迭代中,从子数组中解压缩值并将它们推送到新数组。
const arr = [['a'], ['b', 'c'], ['d']];
const flat = [];
arr.forEach(array => {
flat.push(...array);
});
console.log(flat); // 👉️ ['a', 'b', 'c', 'd']
我们传递给 forEach
方法的函数被数组中的每个元素调用。
在每次迭代中,我们使用扩展语法和 push 方法解包子数组的值并将它们推送到新数组中。
在最后一次迭代之后,flat 变量包含一个已展平 1 级的数组。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间:2024/03/23 浏览次数:86 分类:JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组,以及如何删除任何重复的数组。