为何JavaScript代码中用{}包裹变量？求解原因

嘿，这个语法是ES6（ECMAScript 2015）引入的对象解构赋值，专门用来简化从对象里提取属性的操作，我给你拆解明白：

先看传统写法对比 #

如果不用解构，你要从require返回的模块对象里拿到app属性，得这么写：

const appModule = require('./app/app.js');
const app = appModule.app;

或者压缩成一行：

const app = require('./app/app.js').app;

而const {app} = require('./app/app.js');就是上面两行的简化版，一步完成“加载模块+提取指定属性”的操作。

核心原理 #

当你用require('./app/app.js')加载模块时，这个模块的module.exports应该是一个包含app属性的对象，比如模块内部可能是这样的：

// ./app/app.js里的代码
const app = { /* 你的app对象/函数 */ };
module.exports = { app }; // 等价于module.exports = { app: app }

解构赋值const {app} = ...的作用就是：从右侧的对象（这里是require返回的模块对象）中，提取名为app的属性，然后把它赋值给同名的变量app。

进阶用法：提取多个属性+重命名变量 #

如果模块里有多个你需要的属性，解构能一次性搞定，比如：

// 同时提取app和router属性
const {app, router} = require('./app/app.js');

要是你不想用属性名当变量名，还可以给变量重命名：

// 把模块里的app属性赋值给myApp变量
const {app: myApp} = require('./app/app.js');

为啥要用它？ #

• 代码更简洁：省去了中间变量或者链式调用的写法，一行搞定提取操作
• 可读性更强：一眼就能看出来你从模块里获取了哪些属性，逻辑更清晰

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