Вы используете conosle.log() или console.table() для печати массивов и объектов в проекте JavaScript? Да, мы все это используем, но то, как я открываю многомерные массивы или объекты в консоли, мне как-то скучно. Я использую библиотеку npm для просмотра всех моих массивов и объектов в древовидной структуре. Таким образом, я могу четко видеть все свои массивы с индексом, а также иерархию моих объектов. Итак, давайте посмотрим в этом руководстве, как использовать эту библиотеку для нашего следующего проекта JavaScript.
В этом руководстве предполагается, что вы создаете свой следующий проект JavaScript с использованием пакетов npm. Например, nodejs, React, Angular, Vue, WebPack, gulp, parcel и т. Д.
- Мы начнем с создания простого проекта узла. Откройте каталог проекта и выполните приведенную ниже команду, чтобы инициализировать наш проект и настроить необходимые файлы.
npm init -y #or yarn init -y
2. Теперь создайте файл index.js внутри этого каталога.
3. Теперь установите treeify в свой проект.
npm install treeify #or yarn add treeify
4. Откройте файл index.js и импортируйте treeify в свой проект.
const treeify = require('treeify');
#or
import treeify from 'treeify'
5. В демонстрационных целях мы создадим многомерный массив и объект. Вставьте приведенный ниже код в файл index.js.
6. Теперь, чтобы распечатать этот массив или объект в виде древовидной структуры, нам нужно передать наш массив или объект, например, this.console.log(treeify.asTree(arrayOrObject, true)). Сейчас я напечатаю только массив.
console.log(treeify.asTree(array, true))
7. Теперь запустите node index.js, чтобы проверить результат.
И все же без цвета смотреть скучно. 😐
Мы воспользуемся другой библиотекой, чтобы рассмотреть эту структуру разными цветами.
8. Теперь мы установим еще один пакет, который поможет увидеть структуру другим цветом. Итак, запустите приведенную ниже команду, чтобы установить этот пакет.
npm install ololog #or yarn add ololog
9. Импортируйте эту библиотеку.
const log = require ('ololog').configure({time:false, locate:false});
#or
import ololog from 'ololog';
const log = ololog.configure({locate:false, time:false});
10. Теперь вместо использования console.log() используйте log.green(treeify.asTree(arrayOrObject, true)) для просмотра структуры зеленым цветом.
log.green(treeify.asTree(array, true))
Хорошо, хорошо, теперь мы знаем способ просмотра нашего массива и объекта в древовидной структуре, но всегда ли мы должны импортировать все эти библиотеки для простого представления массива и объекта для каждого файла? Это не решение, это беспорядок 😂. Итак, давайте создадим простую функцию, которую мы затем будем экспортировать и импортировать в файл, который мы хотим использовать.
- Создайте в своем проекте еще один каталог с именем utils и внутри этого каталога создайте файл с именем treeView.js и вставьте приведенный ниже код.
Это создаст функцию по умолчанию с именем treeView, которую вы затем можете импортировать в любой файл для просмотра массива и объекта в древовидной структуре.
2. Теперь импортируйте функцию treeView в файл index.js и передайте свой массив внутри этой функции.
//import import treeView from './utils/treeView.js' //passing array to function treeView(array)
Надеюсь, вам понравится этот урок. Ниже я поделился своим проектом GitHub Repository для вашей справки.
Продолжай читать
