ES6模块中能否直接导入导出对象的指定子属性？

嘿，这个问题问得很实际！直接用import {defs.name} from './defs'这种写法是行不通的，因为ES模块的导入语法不支持直接提取对象的嵌套属性。不过别担心，我们有两种更顺畅的方式来达到你想要的效果：

方式一：导出时拆分属性（推荐，更直观） #

如果你有权修改def.js的代码，直接把需要的属性单独导出就好：

// def.js
export const name = 'Joe';
export const age = 30;
export const id = 123;

// 也可以保留原对象，同时单独导出属性（兼顾两种使用场景）
export const defs = { name, age, id };

这样在user.js里就能直接导入目标属性了：

// user.js
import { name } from './def';
console.log(name); // 输出: Joe

方式二：导入时直接解构（无需修改导出文件） #

如果不想改动def.js，可以在导入语句里直接完成解构操作，不用先单独存储整个defs对象：

// user.js
// 写法1：先导入对象再解构
import { defs } from './def';
const { name } = defs;

// 写法2：更简洁的链式解构
import { defs: { name } } from './def';

console.log(name); // 输出: Joe

简单总结下：ES模块的导入语法只识别导出的顶级标识符，没法直接深入对象内部提取属性，但上面两种方法都能帮你实现“直接获取目标属性”的需求~

内容的提问来源于stack exchange，提问作者Poogy