ES6 解构和module导入

IT技术 javascript ecmascript-6 destructuring es6-modules
2021-01-24 09:18:03

我的印象是这种语法:

import Router from 'react-router';
var {Link} = Router;

具有与此相同的最终结果:

import {Link} from 'react-router';

有人可以解释一下有什么区别吗?

(我原本以为是React Router Bug。)

2个回答
import {Link} from 'react-router';

导入一个命名的导出react-router,即类似的东西

export const Link = 42;

import Router from 'react-router';
const {Link} = Router;

Link默认导出中提取属性,假设它是一个对象,例如

export default {
  Link: 42
};

(默认导出实际上只是一个名为“default”的标准化命名导出)。

另请参阅exportMDN

完整示例:

// react-router.js
export const Link = 42;
export default {
  Link: 21,
};


// something.js
import {Link} from './react-router';
import Router from './react-router';
const {Link: Link2} = Router;

console.log(Link); // 42
console.log(Link2); // 21

在 Babel 5 及以下版本中,我相信它们是可以互换的,因为 ES6 module已被转换为 CommonJS。但就语言而言,这是两种不同的结构。

Babel 6没有让两者可以互换。谨防!
2021-03-20 09:18:03
很好的答案。导入命名导出的语法很容易与对象的解构语法混淆。
2021-03-29 09:18:03

去做这个:

import {purple, grey} from 'themeColors';

无需export const对每个符号重复,只需执行以下操作:

export const
  purple = '#BADA55',
  grey = '#l0l',
  gray = grey,
  default = 'this line actually causes an error';