Каков правильный импорт для конструктора lodash?

Я работаю над некоторыми проектами Angular и использую lodash в качестве помощника. Я прочитал много статей о том, как правильно импортировать lodash, чтобы уменьшить размер пакета. Но у меня возникла проблема с моей текущей реализацией, потому что я использую метод цепочки lodash.

return _(items)
  .groupBy(x => x.vote.code)
  .map(items => items)
  .value();
import * as _ from 'lodash';

Я читал импорт * не хорошо. Моя проблема в том, как я могу импортировать _(items), чтобы мой импорт выглядел, как показано ниже?

import groupBy from 'lodash/groupBy';
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
404
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если вы хотите импортировать только одну функцию или группу функций:

import { groupBy } from "lodash";

Какой эквивалентный метод для _(items)? Из-за этого мне нужно импортировать *

snso 31.05.2019 08:38

Ну, на самом деле вам нужно import *, потому что _ — это функция.

Jack Bashford 31.05.2019 08:41
Ответ принят как подходящий

Если вы хотите уменьшить размер пакета, вам следует избегать импорта всего Lodash. Вместо этого вы можете просто импортировать нужные вам функции — groupBy и map.

Однако в этом случае вы также используете цепочку, для которой делает требуется весь Lodash. Вы можете переписать свой код, используя flow, и использовать удобный для программирования пакет Lodash для замены цепочки:

import {flow, groupBy, map} from 'lodash/fp';

/* ... */

const chainReplacement = flow(groupBy(x => x.vote.code), map(items => items));
return chainReplacement(items)

Вот краткая иллюстрация того, что они дают одинаковые результаты:

const {flow, groupBy, map} = _;

//sample data
const items = [
  { vote: { code: "1" }, name: "Alice"},
  { vote: { code: "2" }, name: "Bob"},
  { vote: { code: "1" }, name: "Carol"},
  { vote: { code: "2" }, name: "Dave"},
  { vote: { code: "1" }, name: "Edel"}
];

//using literally the same functions
const groupByCallback = x => x.vote.code;
const mapCallback = items => items.length;

const chain = _(items)
  .groupBy(groupByCallback)
  .map(mapCallback);

const chainReplacement = flow(
  groupBy(groupByCallback), 
  map(mapCallback)
);

console.info("chain", chain.value())
console.info("chainReplacement", chainReplacement(items))
<script src = "https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js"></script>

Я сделал некоторые данные, соответствующие вашему использованию groupBy, но затем мне пришлось изменить обратный вызов map, потому что это не имело смысла. Я предполагаю, потому что это было для иллюстративных целей. Поэтому я поменял его на items => items.length, чтобы получить количество каждой группы. Это не очень важно, но это также только для иллюстративной цели.

Другие вопросы по теме