Chuyển đến nội dung chính
Mô-đun 8 · Bài học 2 trong tổng số 430/32 trong khóa học~15 min
Bài học theo mô-đun (2/4)

Thách thức: Trình phân tích cú pháp CSV

Định dạng CSV (Giá trị được phân tách bằng dấu phẩy) có ở khắp mọi nơi: xuất từ Excel, kết xuất cơ sở dữ liệu, đầu ra từ các công cụ dòng lệnh. Phân tích cú pháp là một thử thách nhỏ khi kết hợp split, map, phá hủy và xây dựng đối tượng.

Định dạng

CSV tối thiểu là một chuỗi nhiều dòng: hàng đầu tiên là tiêu đề (tên cột), sau đó là một hàng trên mỗi bản ghi với các trường được phân tách bằng dấu phẩy.

Code
nome,eta,citta
Alice,30,Roma
Bob,25,Milano

Mục tiêu cổ điển là biến nó thành một mảng các đối tượng:

JS
[
  { nome: 'Alice', eta: '30', citta: 'Roma' },
  { nome: 'Bob', eta: '25', citta: 'Milano' },
];

Công thức 3 bước

  1. Chia chuỗi theo dòng: csv.split('\n')
  2. Trích xuất dòng tiêu đề: dòng đầu tiên, phân tách bằng dấu phẩy
  3. Ánh xạ từng dòng còn lại vào một đối tượng, ghép từng trường với tiêu đề phù hợp
JS
function parseCSV(csv) {
  const righe = csv.split('\n');
  const intestazione = righe[0].split(',');
  return righe.slice(1).map((riga) => {
    const campi = riga.split(',');
    const record = {};
    intestazione.forEach((nome, i) => {
      record[nome] = campi[i];
    });
    return record;
  });
}

Các lựa chọn thay thế hiện đại hơn:

JS
const record = Object.fromEntries(intestazione.map((nome, i) => [nome, campi[i]]));

Chuyển đổi các loại

Các trường được phân tích cú pháp luôn là chuỗi. Nếu bạn biết rằng một số cột là số:

JS
record.eta = Number(record.eta);

Hoặc viết một "lược đồ" nhỏ:

JS
const numeriche = new Set(['eta', 'prezzo']);
intestazione.forEach((nome, i) => {
  const v = campi[i];
  record[nome] = numeriche.has(nome) ? Number(v) : v;
});

Hãy thử nó

tập thể dục#js.m8.l2.e1
Nỗ lực: 0Đang tải…

Xác định `parseCSV(csv)` lấy chuỗi CSV (hàng đầu tiên = tiêu đề, dấu phẩy làm dấu phân cách). Trả về một mảng đối tượng với các phím tiêu đề. Tất cả các giá trị vẫn ở dạng chuỗi. Bỏ qua các hàng trống.

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

phân chia trên dòng mới, hàng đầu tiên = tiêu đề, ánh xạ lên phần còn lại, Object.fromEntries.

Giải pháp khả dụng sau 3 lần thử

Xem lại bài tập

tập thể dục#js.m8.l2.e2
Nỗ lực: 0Đang tải…

Xác định `columnMean(csv, columnsName)` để phân tích cú pháp CSV, chuyển đổi các giá trị cột thành số và trả về giá trị trung bình của chúng (một số). Nếu không có hàng dữ liệu trả về 0.

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

Tìm chỉ mục cột, ánh xạ hàng → Số, rút ​​gọn thành tổng, chia cho độ dài.

Giải pháp khả dụng sau 3 lần thử