Efficient Methods for Reading Local Text Files into JavaScript Arrays

Fundamental Principles of File Reading

In modern web development, processing local files is a common requirement. JavaScript, as the dominant frontend language, provides multiple file processing mechanisms. Implementation approaches vary significantly depending on the runtime environment.

File Reading in Node.js Environment

Node.js provides comprehensive file system operations through its built-in fs module. For text file reading, it primarily supports synchronous and asynchronous modes.

Synchronous Reading Mode

Synchronous reading blocks code execution until file reading completes. This approach offers simple code structure and is suitable for scenarios like loading configuration files during application startup.

var fs = require("fs");
var text = fs.readFileSync("./mytext.txt").toString('utf-8');
var textByLine = text.split("\n");
console.log(textByLine); // Output: ["red", "green", "blue", "black"]

In Node.js version 6 and above, readFileSync returns a Buffer object by default, requiring conversion to string via toString() method or encoding parameter specification. Two equivalent implementation approaches:

// Approach 1: Convert after reading
var text = fs.readFileSync("./mytext.txt").toString('utf-8');

// Approach 2: Specify encoding during reading
var text = fs.readFileSync("./mytext.txt", "utf-8");

Asynchronous Reading Mode

Asynchronous reading doesn't block the event loop, making it suitable for handling large files or maintaining application responsiveness.

var fs = require("fs");
fs.readFile("./mytext.txt", "utf-8", function(err, text) {
    if (err) throw err;
    var textByLine = text.split("\n");
    console.log(textByLine);
});

Alternative Solutions in Browser Environment

Due to security restrictions, JavaScript in browsers cannot directly access the local file system. However, similar functionality can be achieved through the following approaches:

User Interaction Approach

Allow users to select files through file input elements:

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var text = e.target.result;
        var textByLine = text.split("\n");
        console.log(textByLine);
    };
    reader.readAsText(file);
});
</script>

Preloaded Script Solution

Store data in separate JavaScript files beforehand:

// data.js
var visibleItems = [
    "City Limits",
    "Land",
    "Parcels",
    "Boundary"
];

Include and use directly in HTML:

<script src="data.js"></script>
<script>
for(var i = 0; i < myItems.length; i++) {
    var item = myItems[i];
    if(visibleItems.indexOf(item.title) !== -1) {
        item.visible = true;
    }
}
</script>

Performance Optimization and Best Practices

When handling large text files, consider memory usage and performance aspects:

Stream Processing for Large Files

For files exceeding memory limits, use stream-based reading:

var fs = require("fs");
var readline = require("readline");
var array = [];

var rl = readline.createInterface({
    input: fs.createReadStream("./largefile.txt"),
    output: process.stdout,
    terminal: false
});

rl.on('line', function(line) {
    array.push(line);
});

rl.on('close', function() {
    console.log('File reading completed', array.length);
});

Error Handling Mechanisms

Robust file reading requires comprehensive error handling:

try {
    var text = fs.readFileSync("./mytext.txt", "utf-8");
    var textByLine = text.split("\n").filter(function(line) {
        return line.trim() !== ""; // Filter empty lines
    });
} catch (error) {
    console.error("File reading failed:", error.message);
}

Application Scenario Analysis

Different application scenarios suit different implementation approaches:

• Server-side Configuration: Node.js synchronous reading, simple and direct
• User Data Import: Browser file input, user-friendly
• Static Data: Preloaded scripts, optimal performance
• Large File Processing: Stream reading, memory efficient

By appropriately selecting implementation methods, developers can ensure functional completeness while optimizing application performance and user experience.