Facebook Timeline : Javascript 遍历多个数组并以交错的方式输出它们答案

【问题标题】：Facebook Timeline : Javascript iterate over multiple arrays and output them all in a staggered mannerFacebook Timeline : Javascript 遍历多个数组并以交错的方式输出它们
【发布时间】：2019-11-17 05:27:39
【问题描述】：

我试图按照 facebook 的时间线构建一些东西，我想输出很多不同类型的帖子，但我不希望它们每 (n) 个帖子都相同。

这里的这个函数很好地代表了我试图实现的目标，尽管它需要你有固定大小的数组

https://rosettacode.org/wiki/Loop_over_multiple_arrays_simultaneously#JavaScript

我拥有的 3 种测试时间线数据将是：

Array 1 - [ [“用户 A 刚刚喜欢用户 B”], [“用户 B 刚刚喜欢...”]...]

Array 2 - [[“用户 C 发布了状态更新”]，[“用户 A 发布了状态更新...”]...]

Array 3 - [[“用户D发了一张新专辑”]，[“用户C发了一张新专辑...”]...]

Array 4 - [[“用户 D 发布了新推荐”]，[“用户 B 发布了新推荐”]...]

...等等等等

可以有任意数量的，我们称之为父数组，即Array 1，Array 2，Array 3，Array 4 这些父数组将包含数组本身，有时包含多维数组，但我只关心组织父数组:)

所以基本上它必须遵循某种顺序，我不希望父数组随机组织（这会大大简化事情）

我想要实现的输出是Array 1 每隔一圈输出一次(do-able with array1 % 2 == 0)，所有其他数组项在两者之间交错，但是如果我们用完数组 1 项而有更多其他的，我希望他们继续输出，直到可能有一个新项目输入到数组 1 中

【问题讨论】：

您是否希望包含更多项目的数组更频繁地被“访问”，或者它们都被平等对待（数组 1 除外，它看起来很特别）？
“但我不希望他们每（n）个帖子都一样。”：我不明白这部分。
对不起，是的，我认为说我希望他们平等对待更合适。主要思想是用户在每次滚动时都不会看到相同类型的内容。每次它必须是一个不同的数组项，所以它有一个顺序。如果一个数组用完了所有项，它只会继续遍历其他所有项，直到任何数组中不再有任何内容

标签： javascript arrays sorting multidimensional-array

【解决方案1】：

这是一个函数，它遍历这些数组并从下一个仍有下一个值的子数组中获取下一个值，并将其添加到结果数组（它将返回）：

const mix = (all) =>
    Array.from({length: Math.max(...all.map(arr => arr.length))}, (_, i) => 
        all.map(arr => arr[i]).filter(Boolean)
    ).flat(2);

// Sample data
const all = [
    [ ["user A just liked user B"], ["User B just liked user C"]],
    [ ["user C posted a status update"], ["user A posted a status update"], ["user B posted a status update"]],
    [ ["user D posted a new album"], ["user C posted a new album"]],
    [ ["user D posted a new recommendation"], ["user B posted a new recommendation"], ["user A posted a new recommendation"], ["user C posted a new recommendation"]]
];

console.log(mix(all));

所以，这就是发生的事情：

找出包含最多项的数组的长度
创建一个该长度的新数组并为每个条目 i 执行步骤 3 和 4 来填充它（使用新的子数组）：
创建一个包含与输入中的数组一样多的值的新数组。为每一个收集 i^th 元素。
剔除上一步收集的undefined 值。
第 2 步完成后，展平生成的数组。

【讨论】：