打开文件后如何访问文件中包含的JS数组？答案

【问题标题】：How can I access JS arrays contained in a file after opening it?打开文件后如何访问文件中包含的JS数组？
【发布时间】：2020-03-11 14:07:55
【问题描述】：

更新： 我正在保存以下形式的多维数组：

var a = ["t1","a",["t2","a","b",["t3","a","b"],["t4","a","b","c",["t5","a","b"]],],["t6","a","b",["t7","a","b"]]];

在使用 JSON.stringify(a) 调用标准保存文件函数的文件中 -没有“var a =”和“;”然后我将文件打开到这样的变量：

<a id="nof"><label for="fid">Open Data</label></a>
<input id="fid" type="file" style="position: fixed; top: -100em" onchange="ReadFile(this)">

function ReadFile(input) {
    var output;

    if (input.files.length === 0) {
        output = 'No file selected';
        window.setTimeout(ReadFile, 1000);
        return;
    }

    var fr = new FileReader();
    fr.onload = function() {
        var data = fr.result;
        var array = new Int8Array(data);
        output = JSON.stringify(array, null, '  ');

        console.log(array); // output //<------ 
    };
    fr.readAsArrayBuffer(input.files[0]);

我尝试改编这篇文章中的代码：Using FileReader.readAsArrayBuffer() on changed files in Firefox）但我无法将变量上的数据分配为 JS 数组。我从“数组”变量中得到的控制台是：

Int8Array(117) [91, 34, 116, 49, 32, 118, 49, 57, 49, 49, 49, 53, 49, 56, 51, 51, 51, 34, 44, 34, 97, 34, 44, 91, 34, 116, 50, 34, 44, 34, 97, 34, 44, 34, 98, 34, 44, 91, 34, 116, 51, 34, 44, 34, 97, 34, 44, 34, 98, 34, 93, 44, 91, 34, 116, 52, 34, 44, 34, 97, 34, 44, 34, 98, 34, 44, 34, 99, 34, 44, 91, 34, 116, 53, 34, 44, 34, 97, 34, 44, 34, 98, 34, 93, 93, 93, 44, 91, 34, 116, 54, 34, 44, 34, 97, 34, 44, 34, 98, 34, …]

显然是因为数据转换为int8。

从我得到的“输出”变量：

{"0": 91,"1": 34,"2": 116,"3": 49,"4": 32,"5": 118,"6": 49,"7": 57,"8": 49,"9": 49,"10": 49,"11": 53,"12": 49,"13": 56,"14": 49,"15": 51,"16": 52,"17": 48,"18": 34,"19": 44,"20": 34,"21": 97,"22": 34,"23": 44,"24": 91,"25": 34,"26": 116,"27": 50,"28": 34,"29": 44,"30": 34,"31": 97,"32": 34,"33": 44,"34": 34,"35": 98,"36": 34,"37": 44,"38": 91,"39": 34,"40": 116,"41": 51,"42": 34,"43": 44,"44": 34,"45": 97,"46": 34,"47": 44,"48": 34,"49": 98,"50": 34,"51": 93,"52": 44,"53": 91,"54": 34,"55": 116,"56": 52,"57": 34,"58": 44,"59": 34,"60": 97,"61": 34,"62": 44,"63": 34,"64": 98,"65": 34,"66": 44,"67": 34,"68": 99,"69": 34,"70": 44,"71": 91,"72": 34,"73": 116,"74": 53,"75": 34,"76": 44,"77": 34,"78": 97,"79": 34,"80": 44,"81": 34,"82": 98,"83": 34,"84": 93,"85": 93,"86": 93,"87": 44,"88": 91,"89": 34,"90": 116,"91": 54,"92": 34,"93": 44,"94": 34,"95": 97,"96": 34,"97": 44,"98": 34,"99": 98,"100": 34,"101": 44,"102": 91,"103": 34,"104": 116,"105": 55,"106": 34,"107": 44,"108": 34,"109": 97,"110": 34,"111": 44,"112": 34,"113": 98,"114": 34,"115": 93,"116": 93,"117": 93}

那么，将文件数据赋值为 JS 数组变量需要什么？

***出于效率原因，我不想使用比使用更多字符的上述示例数组（在页面顶部）更复杂的格式。

【问题讨论】：

与其以 JavaScript 源代码形式存储数组，不如将它们存储为 JSON，以便使用 JSON.parse 解析它们。如果您使用 JavaScript 源代码表单，则需要启动完整的 JavaScript 解析器，这可能会带来安全隐患。（尽管在这种情况下，由于您是为了响应用户指定文件而执行此操作，所以它不太可能是一个重要的文件。）此外，使用它也很尴尬。
欢迎来到 Stack Overflow！请使用tour（你会得到一个徽章！）并通读help center，尤其是How do I ask a good question?你最好的选择是做你的研究，search关于SO的相关主题，然后试一试. 如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布您的尝试minimal reproducible example，并具体说明您卡在哪里。人们会很乐意提供帮助。
“我试图修改这篇文章中的代码，但我不能让它工作” 向我们展示这个尝试，这样我们就可以帮助你理解为什么它不能工作以及如何解决它。
您正在保存的文件的示例不是JSON，并且问题仍然没有尝试使用FileReader读取文件，这是我的代码是referring to above。
@T.J.克劳德我已经改变了问题并添加了一个工作代码，但我没有得到我想要的结果。

标签： javascript arrays file-io

【解决方案1】：

下面的代码显示在 html div 中。如果要存储在数组中，请替换它。

试试这个：

function readFile(file) {
   return new Promise((resolve, reject) => {
let fr = new FileReader();
fr.onload = x=> resolve(fr.result);
fr.readAsText(file);
})}

async function read(input) {
  msg.innerText= await readFile(input.files[0]);
}

<input type="file" onchange="read(this)"/>
<h3>Content:</h3><pre id="msg"></pre>

【讨论】：

感谢您的贡献！但是代码转储不是有用的答案。说出你做了什么，为什么，以及如何工作。这也不会访问文件中的数组，只访问文本。（您可能还指出这是非常现代代码，async/await 是 ES2018+。）
@Blaze 谢谢，但是用 var 替换 msg.innerText 不足以加载数组，它需要以下内容： var a = await read(input.files[0]); var n = JSON.parse(a);那么对于我提出的问题，您的回答将是完整的。