Хотя большинство программистов утверждают, что JSON является предпочтительным форматом файла для постоянного хранения данных JavaScript, все же имеет смысл использовать другие форматы для хранения данных. CSV - один из тех форматов, которые существуют уже давно и в большинстве случаев чрезвычайно просты в использовании. Однако, хотя JavaScript предоставляет собственные методы для сериализации и десериализации объектов JSON (JSON.stringify() и JSON.parse()), для файлов CSV нет встроенных функций, поэтому в этой статье я попытаюсь реализовать указанные функции в ES6.
Преобразовать массив в CSV
Первый и, возможно, самый простой фрагмент кода, который нам нужно написать, чтобы использовать CSV с JavaScript, - это сериализатор, который преобразует 2D-массив в файл CSV:
Приведенный выше код довольно прост. Он использует Array.map() и Array.join() для объединения каждого подмассива в строку, разделяя значения на основе предоставленного delimiter, затем использует Array.map() и Array.join() во второй раз для создания многострочной строки, нашего вывода CSV, со всеми данные массива.
Преобразовать CSV в массив
Сериализовать массив легко, но предположим, что у вас есть файл CSV и вы хотите преобразовать его обратно в массив. В этом случае вам понадобится десериализатор, который отменяет описанный выше процесс:
Процедура здесь по сути такая же, как и раньше, но в обратном порядке. Файл разделяется на строки с помощью String.split(), затем преобразуется в отдельные значения с помощью String.split() второй раз на основе предоставленного delimiter. Последний штрих - позволить пользователю решить, нужно ли пропустить первую строку, поскольку иногда файлы CSV используют первую строку для хранения имен столбцов.
Преобразование CSV в массив объектов
Основываясь на последнем замечании из приведенного выше фрагмента, мы можем легко найти способ преобразования файлов CSV в массив объектов, используя первую строку в качестве имен свойств:
Сейчас это становится более сложным. Первое, что нам нужно сделать, это, очевидно, взять список имен свойств из первой строки, аналогично тому, что мы делали раньше, используя Array.slice(). Затем идет часть создания объекта, которая выполняется с использованием String.split() и Array.map(), как мы делали раньше. Единственное существенное отличие состоит в том, что мы используем Array.reduce() для создания объекта для каждой строки значений в файле CSV с соответствующими парами ключ-значение. И вуаля! У нас есть массив, полный объектов JavaScript, которые мы теперь можем использовать.
Преобразование массива объектов в CSV
А вот и самая сложная часть - сериализация массива объектов. Почему это сложно и сложно? Потому что иногда у вас есть объекты с другим количеством свойств или чьи свойства расположены в другом порядке. И это создает несколько проблем при попытке сериализации в единую структуру, такую как CSV.
Есть множество способов исправить это, например, сделать определенные предположения о структуре, гарантировать, что объекты имеют одинаковое количество свойств и т. Д., Но наиболее универсальная функция, которую я мог бы написать, требует, чтобы разработчик указал, какие свойства необходимо сериализовать:
Может показаться, что это не так уж много, но здесь происходит довольно много всего. Во-первых, нам нужно создать массив строк для строки CSV и установить первую строку, равную списку свойств, которые мы хотим сериализовать из массива объектов. Затем мы используем Array.map() и Array.reduce() для создания каждой строки со свойствами в правильном порядке и пустыми значениями для несуществующих свойств. Наконец, мы используем оператор распространения (…) и Array.join() для вывода многострочной CSV-строки.
Соображения и улучшения
Хотя это было краткое руководство по использованию CSV с JavaScript, с этим типом данных можно сделать гораздо больше. Обратите внимание, что все приведенные выше фрагменты не полностью оптимизированы и могут не обрабатывать крайние случаи, поэтому можно было бы начать с них. Другая проблема заключается в том, что между сериализацией и десериализацией существует некоторая несогласованность, поэтому с этим тоже можно справиться. Наконец, вложенные объекты или массивы не могут быть сериализованы ни с одним из этих фрагментов, а CSV изначально не поддерживает их, поэтому для этого можно создать собственные структуры данных для вложения.
Надеюсь, вам понравилось это небольшое руководство. Если да, пожалуйста, хлопните мне в ладоши или пятьдесят! Весь исходный код в этой статье доступен в 30-секундном репозитории кода на GitHub вместе с множеством других фрагментов кода JavaScript для повседневных нужд.
