Насколько хлопотно каждый раз выводить console.log на каждый результат метода цепочки массивов для отладки?
Давайте посмотрим на следующий код
const fruits = [🍌, 🍎, 🍎, 🍍, 🍌, 🥝, 🥝, 🥝]
const result = fruits
.filter(emoji => [🥝, 🍌].includes(emoji))
.map(emoji => emoji === 🍌 ? 🍋 : emoji)
console.log(result) // [🍋, 🍋, 🥝, 🥝, 🥝]
В коде нет ничего плохого, просто когда результат не тот, который вы ожидаете, часто нужно отследить и вывести результат каждого метода цепочки, чтобы выяснить, какая часть работает неправильно.
Вы, вероятно, делаете это во время отладки
const fruits = [🍌, 🍎, 🍎, 🍍, 🍌, 🥝, 🥝, 🥝]
const getKiwiNBanana = fruits.filter(emoji => [🥝, 🍌].includes(emoji))
console.log(getKiwiNBanana) // [🍌, 🍌, 🥝, 🥝, 🥝]
const result = getKiwiNBanana.map(emoji => emoji === 🍌 ? 🍋 : emoji)
console.log(result) // [🍋, 🍋, 🥝, 🥝, 🥝]
Хорошо, но вы пишете больше кода, и он не такой элегантный.
Array.print()
Добавьте этот код в корень вашего приложения и на глобальный уровень. Это небольшое расширение функциональности Array, которое позволит вам вывести результат на печать легко и элегантно. Вас может насторожить ошибка eslint no-extend-native, но не стоит так волноваться, если вы не расширяете существующий встроенный метод, а этого делать не следует!
Typescript
Для поддержки Typescript добавьте следующий код в корневой уровень вашего сайта.
declare global {
interface Array<T> {
print(): T[]
}
}
Теперь вы можете легко вывести результат каждого метода цепочки.
const fruits = [🍌, 🍎, 🍎, 🍍, 🍌, 🥝, 🥝, 🥝]
const result = fruits
.filter(emoji => [🥝, 🍌].includes(emoji))
.print() // [🍌, 🍌, 🥝, 🥝, 🥝]
.map(emoji => emoji === 🍌 ? 🍋 : emoji)
.print() // [🍋, 🍋, 🥝, 🥝, 🥝]
Выглядит чисто и аккуратно!
Есть много вещей, которые вы можете сделать в функции печати, например, префиксную строку, чтобы вам было легче искать и отлаживать. Или, может быть, вы хотите отключить печать в производственном режиме. Я оставлю это на ваше усмотрение.
Делайте ❤️, если это поможет! Надеюсь, вам понравится.