ES6 解构和模块导入

Question

我的印象是这个语法：

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

最终结果与此相同：

import {Link} from 'react-router';

谁能解释一下区别是什么？

（我本来以为是React Router Bug。）

Answer 1

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"）。

另见 export on MDN。

完整示例：

// 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 模块已被转换为 CommonJS。但就语言而言，这是两种不同的结构。

Answer 2

为此：

import {purple, grey} from 'themeColors';

无需为每个符号重复 export const，只需执行：

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

ES6 解构和模块导入

ES6 Destructuring and Module imports

javascript

destructuring

ecmascript-6

es6-modules