如何使用 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 级的数组。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间:2023/04/28 浏览次数:146 分类:CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间:2023/03/29 浏览次数:69 分类:PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间:2023/03/24 浏览次数:93 分类:JavaScript
-
在本文中,我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间:2023/03/24 浏览次数:141 分类:JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法