迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

如何使用 JavaScript 展平数组

作者:迹忆客 最近更新:2022/10/26 浏览次数:

使用 flat() 方法展平数组,例如 const flat = arr.flat()。 flat 方法有一个参数,默认为 1,表示嵌套数组应该被展平的深度。 该方法返回一个新数组,其中连接有子数组元素。

const arr = [['a'], ['b', 'c'], ['d']];

const flat = arr.flat();

console.log(flat); // 👉️ ['a', 'b', 'c', 'd']

javascript 展平数组

我们使用 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() 展平数组

要展平数组:

  1. 创建一个新变量并将其设置为一个空数组。
  2. 使用 forEach() 方法遍历数组数组。
  3. 在每次迭代中,从子数组中解压缩值并将它们推送到新数组。
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 级的数组。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

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 POST

发布时间:2024/03/23 浏览次数:96 分类:JavaScript

本教程讲解如何在不使用 JavaScript 表单的情况下发送 POST 数据。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便