基于字符串创建多维数组

Question

所以我有一个巨大的文本文件，包含200多行链接和标题--有些链接有子链接，有些子链接有自己的子链接，每个链接/标题都位于一个单独的行(\r\n)上，每个子集家族都由制表符(\t)表示。

我的问题是如何通过JavaScript复制这个文本文件的结构。

以下是文本文件的示例：

Home (#/)
User Accounts (#/user-accounts)
1. Types of user accounts (#/user-accounts/1-types-of-user-accounts)
    1.1 Super administrator (#/user-accounts/1-types-of-user-accounts/1.1-super-administrator)
    1.2 Global administrator (#/user-accounts/1-types-of-user-accounts/1.2-global-administrator)
    1.3 Account administrator (#/user-accounts/1-types-of-user-accounts/1.3-account-administrator)
    ...etc
2. Sign in to an existing user account (#/user-accounts/2-sign-in-to-an-existing-user-account)
3. Sign up for a new account (#/user-accounts/3-sign-up-for-a-new-account)
    3.1. Entering User Details (#/user-accounts/3-sign-up-for-a-new-account/3.1-entering-user-details)
    3.2. Selecting User Type (#/user-accounts/3-sign-up-for-a-new-account/3.2-selecting-user-type)
        3.2.1 Selecting Account (#/user-accounts/3-sign-up-for-a-new-account/3.2.1-selecting-account)
        ...etc

下面是我尝试过的代码：

import data from './raw';

const loadData = () => {
    // Split the string by 'newline'
    const genSplit = data.split(/\r?\n/);
    let temp = [];
    genSplit.forEach((v, i) => {
        let a = (genSplit[i].match(/\t/g) || []).length;
        if (temp[a] == undefined) {
            temp[a] = [];
        }

        temp[a].push(genSplit[i]);
        if (genSplit[i + 1] !== undefined && (genSplit[i + 1].match(/\t/g) || []).length === 0) {
            a++;
        }
    });
    console.log(temp);
    return temp;
};

现在我知道这是一个array，但是我想我应该先将文件转换成一个多维数组，然后遍历这个数组并构建DOM元素。

请告诉我，如果我的想法是错误的，或如果有更好的方法。而且，我在网上或这里找不到任何关于我的问题的东西，这让我相信我的思考方式不是最实际的。

先谢谢大家。

Answer 1

(示例代码在es6中，因为根据您的问题，我假设您使用es6)

考虑到您的文本文件包含具有多个级别的项，多维数组不是一个好的选择，因为您不希望手动计算初始化数组的维度总数。多维数组也是资源的浪费。

更好的解决方案是创建一棵树，其节点表示文本文件中的行。

您可以创建一个类来定义节点：

class Node {
   constructor(id, name, link) {
       this.id = id; // '3.2.1'
       this.name = name; // 'Selecting Account'
       this.link = link; // '#/user-accounts/3-sign-up-for-a-new-account/3.2.1-selecting-account'
   }
}

对于树，您可以在互联网上寻找一种方便的方式来存储树(例如，使用一维数组来存储节点，使用2D数组来存储父-子关系)，但是有很多用于树构建的npm包，比如符号树，所以您可能需要先看一看。

剩下的是修改loadData()函数以解析和创建树，并修改另一个用于树遍历的函数来构建相应的DOM元素。