javascript - 从库中解构导入对象

Question

我正在尝试在我的代码中使用对象破坏导入。

我只想在我的组件中导入映射和扩展。

我会这样做吗

import { map, extend } from lodash;

如何在我的代码中使用它？

Javascript 也有 map ，所以如果我这样做

let arr = [1,3,4];
arr.map((item) =>  console.log(item))

如何引用 lodash map ，而不是实际的 map 方法？

PS:我试图了解对象破坏方法。我知道我可以使用 ES6 map ，这只是一个例子。

Answer 1

这是默认导入。

import _ from 'lodash';
_.map(...);

这是一个命名导入。

import { map } from 'lodash';
map(...);

使用 map() 作为默认导入的方法和作为独立函数本质上是相同的(唯一有意义的区别是 value of this )。哪种语法有效取决于您要导入的库。如果库定义了默认导出并且命名导入/导出也相同，则只能使用默认导入。两者也可以同时使用，尽管这有点不寻常。

默认导入可以根据您的喜好命名。如果你想迷惑人们并假装 Lodash 是 jQuery，你可以这样做。

`import $ from 'lodash';`

另一方面，命名导入具有它们所绑定(bind)的特定名称。因此，与默认导入不同，尝试在 $ 与 _ 上使用命名导入语法引用一个完全不同的对象，如果未在库中定义为导出，则会抛出异常。

// These are very different.
import { $ } from 'lodash';
import { _ } from 'lodash';

如果有必要，您可以“重命名”命名导入。

import { map as crazyFunc } from 'lodash';

在上述情况下，crazyFunc 可以随意命名，但 map 必须保持原样，否则它将引用一个完全不同的对象，并且将如果未在库中定义为导出，则抛出异常。

这可能有助于理解它们是等效的。

import { default as _ } from 'lodash';
import _ from 'lib';

后者只是前者的糖。默认导出语法是用于创建名为 default 的命名导出的糖。

有关详细信息(包括此处未介绍的功能)，请参阅 ES6 modules syntax .

完整示例:

import { map } from 'lodash';
const squares = map([4, 8], (n) => {
    return n * n;
});
console.log(squares);  // => [16, 64]