ES6 javascript在react中分解大型对象

我怀疑答案是“你不能”，但这里有很多人比我聪明。 在回顾（并重新编写）我一年前写的代码（在我学习redux之前）时，我有一个react组件，其中包含以下用户配置文件的破坏，该用户配置文件作为prop作为

user

传递给：

  const {user} = props;
  const {
    email, username, salutation, firstName, middleName, lastName, suffix, company, title, 
    securityQuestionNo1, securityAnswerNo1, securityQuestionNo2, securityAnswerNo2,
    securityQuestionNo3, securityAnswerNo3, email1, email2, telNo, altTelNo, shippingAddress1, 
    shippingAddress2, shippingAddress3, shippingCity, shippingState, shippingPostalCode, 
    shippingNation, billingAddress1, billingAddress2, billingAddress3, billingCity, 
    billingState, billingPostalCode, billingNation, planChoice, cardName, cardType, cardNumber,
    expiryMM, expiryYYYY, cvv,
  } = user;

有没有一种不那么可怕的方法来声明我的组件中的所有这些变量？是否有任何方法可以将上面的问题移到一个单独的文件中并导入变量？比更改这些变量的所有后续外观更好的东西

user.email

，

user.username

，等等（我想过使用

var

并将声明移到文件底部，但这些不应该是全局变量。）

---

对于认为字符串编辑是一种方法的人来说，答案是否定的，因为（a）它很慢，因为在JSON.stringify对象和返回到对象之间的转换很慢，（b）它也很不安全（有人可以很容易地将字符串注入到代码中，因为此代码将在前端运行），以及（c）它的形式很糟糕，如果鲍勃叔叔做JS，他会大骂你。

不，没有。如果你想要这些变量，你必须声明它们

---

您的根本问题似乎是

用户

对象的属性太多。改用。至少在子结构中放置具有公共前缀的所有内容。使用数组而不是为属性编号。一个用户没有卡片类型，一个用户有一张卡片类型。

有办法绕过它

user={电子邮件：as@gmail.com，用户名：1，称呼语：“你好”，名字：“史密斯”，中间名：“do”，姓氏：“wi”，后缀：“suf”，公司：“sm”，头衔：“se”，
安全问题1:“smth”，安全问题1:“js”，安全问题2:“脚本”，安全问题2:“节点”}
Object.entries（user.forEach）（（项）=>{
globalThis[item[0]]=item[1]//如果不使用Nodejs，请使用window而不是glabalThis
})
console.log（电子邮件、用户名、称呼、名字、中间名）

为什么不使用新的

？。

。如果左侧为

null

或

undefined

且整个表达式生成null，则会短路。例如，

const x=a？.b？.c

大致相当于：

const x = a === null || a === undefined
        ? undefined
        : a.b === null || a.b === undefined
        ? undefined
        : a.b.c
        ;

然后，您就可以不用进行分解，只需说

if ( user?.email ) {
  sendEmail(user);
}

---

我认为将上述名为users的变量转换为一个json文件是一种解决方案，然后在需要时导入它。您真的需要在这个组件中包含所有这些变量吗？也许您可以将用户的一般信息、安全问题、账单信息和支付信息等提取到它们自己的组件中，只需将

用户

对象放入其中，并对其中所需的变量进行解构，在这个组件中以任何方式呈现它们。但是如果你真的有一个很好的理由，并且权衡利弊，javascript确实有一个非常模糊且很少使用的方法。这是否回答了你的问题？我的意思是，与for…in循环相结合。千小时前编写的代码的问题是需要大量重构才能解决这个问题。是的，它会。一步一个脚印。首先提取卡的内容，然后是账单的内容，然后是运输的内容，然后是安全的内容……如果您在组件中单独使用了这些变量，那么就没有办法解决这个问题。如果分解过程如此之长，我希望组件的其余部分也同样可怕。你重写它是因为你想修复它，不是吗？注意长代码本身并没有什么问题。如果你需要它，就把它写出来，即使它有一千个变量。当然，可能有一些技巧可以避免像注释中提到的

with

statement@cbr那样的分解，但是您仍然需要在组件中使用1000个变量。为了使这段代码更好™, 您需要将结构引入其中：不是在声明中，而是在用法中。从小处做起。