Question

我有一个包含大约30,000个密钥的JSON文件。将JSON作为对象导入并直接从中读取有什么危险？

我正在使用React Native，因此我会将其导入到组件的文件中并根据需要从中读取。

Answer 1

如果您正在浏览器中阅读这个大型JSON数据集，那么使用Web Worker加载它可能是值得的，因此加载部分不仅可以以异步方式处理，而且甚至可以单独处理线。您需要做的是创建一个worker.js文件，该文件将导入到您的主js文件中，例如，让我们看看这个Web Worker，它在后台加载文件：

// (main.js, your main application file)
var fileworker = new Worker('worker.js');
    fileworker.onmessage = function(e) {
        var datasetsList=e.data;
        whendone(datasetsList);
    };
    fileworker.onerror = function(e) {
      console.error('ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message);
    };
    var readFileAsync = function() {
      fileworker.postMessage(fileupload.files);
    }

正如您所看到的那样，工作人员会在触发后立即读取文件

  fileupload.addEventListener('change', readFileAsync);

此时执行发生在一个单独的线程中，让主线程（也就是UI线程）可以自由更新界面。

Web Worker将执行后台作业，并重新启动结果，就像在此示例中一样，我正在加载大型数据集并应用一些转换

// (worker.js, the worker file)
var readFiles = function (files,whendone) {
    var count = files.length;
    var datasetsList = [];
    var readFile = function (file) {
        var reader = new FileReaderSync();
        var result=reader.readAsBinaryString(file);
        var parsedData = d3.csvParse(result);
            parsedData.forEach(function (row) {
                parsedData.columns.forEach(function (column) {
                    if (!row[column]) {
                        delete row[column];
                    }
                    var coercedNum = +row[column];
                    if (!isNaN(coercedNum)) {
                        row[column] = coercedNum;
                    }
                });
            });
            datasetsList.push({ data: parsedData, name: file.name });
            if (!--count) {
                whendone(datasetsList);
            }

    };

    for (var i = 0; i < count; i++) {
        readFile(files[i]);
    }
}
self.addEventListener('message', function (e) {
    var files = e.data;
    readFiles(files, function (datasetsList) { // done
        postMessage(datasetsList);
    });
}, false);

摘自PAIR-code/facets

的代码段

所以你的目录结构至少会像

一样

root/
 index.html
 css/
 js/
  |-index.js
  |-worker.js

从大型JSON文件中读取数据的危险？

1 个答案: