如何访问函数JavaScript之外的数据（读取文件）[重复]答案

【问题标题】：how to access data outside of the function JavaScript (reading a file) [duplicate]如何访问函数JavaScript之外的数据（读取文件）[重复]
【发布时间】：2020-02-24 22:09:05
【问题描述】：

var lines = [];
document.getElementById("fileInput").addEventListener("change", readSingleFile, true);

console.log(lines.length);


function readSingleFile(evt) {
    var f = evt.target.files[0];
    if (f) {
        var read = new FileReader();
        read.onload = function(evt) {
            var contents = evt.target.result;
            var ct = read.result;
            var lines = ct.split('\n');
        }
        read.readAsText(f);
    }
}


...
<body>
     <input type="file" id = "fileInput">
     <script src="index.js"></script>
</body>
...

我想将文件的内容读取到数组行中。 console.log(lines.length) 返回 0（我认为这是因为 js 中的变量具有函数范围）。如何在函数外部访问数组“行”中的值。任何帮助将不胜感激！

【问题讨论】：

标签： javascript html parsing variables scope

【解决方案1】：

问题在于您的console.log() 指令立即运行（在fileInput 的change 事件或FileReader 的load 事件之前）。将console.log() 移动到load 回调中，以便在文件成功加载并填充lines 时运行。

您确实需要删除函数内lines 变量声明中的var，以便原始变量不会被遮蔽。

var lines = [];
document.getElementById("fileInput").addEventListener("change", readSingleFile, true);

function readSingleFile(evt) {
    var f = evt.target.files[0];
    if (f) {
        var read = new FileReader();
        read.onload = function(evt) {
            var contents = evt.target.result;
            var ct = read.result;
            lines = ct.split('\n');

            console.log(lines.length);
        }
        read.readAsText(f);
    }
}

【讨论】：

谢谢！但是可以在函数之外访问数组吗？
@Majmun 通过删除第二个var，您将不会有第二个lines 变量，并且只要在填充它的事件之后访问lines，您就可以访问它从函数外部。
@Quentin 答案已更新。
@Majmun — 时间旅行是不可能的。在赋值之前不能读取值。
@Quentin 但是否可以将“console.log(lines.length)”放在函数之外的任何位置（无论在哪里），它会给我读取的行数?

【解决方案2】：

您可以创建自定义事件，并为其添加监听器...

let lines = [];
const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", readSingleFile, true)
fileInput.addEventListener('lines:filled', handleLines);

const event = new Event('lines:filled');

function readSingleFile(evt) {
    var f = evt.target.files[0];
    if (f) {
        var read = new FileReader();
        read.onload = function(evt) {
            var contents = evt.target.result;
            var ct = read.result;
            lines = ct.split('\n');
            
            fileInput.dispatchEvent(event);
        }
        read.readAsText(f);
    }
}

function handleLines() {
  console.log(lines);
}

&lt;input id="fileInput" type="file"/&gt;

【讨论】：