如何在JavaScript中将文本文件读入对象数组

在JavaScript中，将文本文件读入对象数组通常涉及以下几个步骤：

基础概念

文件读取：使用FileReader API读取文件内容。
数据解析：将读取到的文本数据解析成JSON或其他可用的数据格式。
对象数组：将解析后的数据转换为JavaScript对象数组。

优势

灵活性：可以处理各种格式的文本文件（如CSV、JSON）。
性能：异步读取文件，不会阻塞主线程。
易用性：现代浏览器内置了丰富的API支持。

类型与应用场景

CSV文件：适用于表格数据，如用户列表、产品信息等。
JSON文件：适用于结构化数据，如配置文件、API响应等。

示例代码

以下是一个将CSV文件读入对象数组的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Read CSV to Object Array</title>
</head>
<body>
    <input type="file" id="fileInput" accept=".csv" />
    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                const text = e.target.result;
                const data = csvToObjectArray(text);
                console.log(data);
            };

            reader.readAsText(file);
        });

        function csvToObjectArray(csvText) {
            const lines = csvText.split('\n');
            const headers = lines[0].split(',');
            const result = [];

            for (let i = 1; i < lines.length; i++) {
                const obj = {};
                const currentline = lines[i].split(',');

                for (let j = 0; j < headers.length; j++) {
                    obj[headers[j]] = currentline[j];
                }

                result.push(obj);
            }

            return result;
        }
    </script>
</body>
</html>

解释

HTML部分：提供一个文件输入框，允许用户选择CSV文件。
JavaScript部分：
- 监听文件输入框的change事件。
- 使用FileReader读取文件内容。
- 定义csvToObjectArray函数，将CSV文本转换为对象数组。
  - 首先将文本按行分割。
  - 提取第一行为表头（列名）。
  - 遍历剩余行，将每行的数据与表头对应，生成对象并添加到结果数组中。