Question

我现在已经使用解构语法{ ...variable }了很长一段时间，但直到今天我才真正遇到问题，而我的大多数用例仍然按预期运行一个人对我自己有点困惑。

我有一个生成对象并导出它的JS文件，例如：

var exports = {} 
...
export default exports;

没有任何嵌套对象，在文件末尾它是一个简单的KVP。

当尝试从此文件导入时，我试图解构的任何对象都是未定义的。例如：

import { Foo, Bar } from './my-object';
Foo.bar(); // Cannot read property bar of undefined

然而，如果我把它分开得更远，一切都很好：

import MyObject from './my-object';
const { Foo, Bar } = MyObject;
Foo.bar(); // Works!

我尝试将exports改为不同的变量名称，正如我想的那样，也许它与module.exports存在冲突，但这不是问题所在。

过去每当我导出一个对象时都很简单：

 export default { ... }

由于console.log(exports)的结果是同一件事，我真的很困惑这个问题是什么：

{ Foo: foo, Bar: bar }

其中bar()是foo

的函数变量

我还应该补充一点，试图破解它以获得正确的结果也不起作用，例如：

export default {
    Foo: { bar: () => {} },
    Bar: { foo: () => {} }
};

仍然会抛出相同的Cannot read property __ of undefined

Answer 1

如果您使用的是Babel，那是因为export default语句大致翻译为：

var foo = {};
exports["default"] = foo;

并import MyObject from './my-object'被翻译为：var MyObject = require('./my-object').default;。这就是你的第二个例子的原因。

但是，当您执行import { Foo, Bar } from './my-object'时，它会被翻译为var { Foo, Bar } = require('./my-object');

See this question for extra details.

在您的情况下，我建议只使用正常的导出语句。例如：

export class Foo {
  myMethod() {}
};

export const Bar = { a: '1' };

然后你可以import { Foo, Bar } from './my-object';。

Answer 2

我想你只是错过了基本概念。

在这种情况下，您导出的是单个对象而不是多个类，这就是导致您的导入无法正常工作的原因。

当我们有一个文件说 sample.js 和

时，语法就有效

export var A = (function () {
    function A() {
    }
    return A;
}());

export var B = (function () {
    function B() {
    }
    return B;
}());

export var C = (function () {
    function C() {
    }
    return C;
}());

如果您使用以下方式导入其他文件：

从＆＃39; ./ sample＆＃39;;

导入{A，B，C}

我没试过这个，但我认为它的工作方式是这样的。

Answer 3

如果您想要import { Foo, Bar} from './my-object'，则需要明确导出Foo和Bar。例如

export const Foo = { bar() {} };
export const Bar = { foo() {} };

ES6解构语法可能有奇怪的行为

3 个答案: