时间戳

首页 > 解决方案 > lodash 构造函数的正确导入是什么？

javascript - lodash 构造函数的正确导入是什么？

问题描述

我正在做一些 Angular 项目，并使用 lodash 作为助手。我阅读了很多关于如何以正确的方式导入 lodash 以减小包大小的文章。但是我当前的实现遇到了问题，因为我使用了 lodash 链接方法。

return _(items)
  .groupBy(x => x.vote.code)
  .map(items => items)
  .value();

import * as _ from 'lodash';

我读了 import * 不好。我的问题是如何导入_(items)，以便我的导入如下所示？

import groupBy from 'lodash/groupBy';

标签： javascriptangularecmascript-6lodash

解决方案

如果你想减少你的包大小，你想避免导入整个 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.log("chain", chain.value())
console.log("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每组的计数。这不是很有意义，但也仅用于说明目的。

推荐阅读