ES6 javascript 在反应中解构大对象

Question

I suspect the answer is "you can't" but there are a lot of people here who are brighter than I. In reviewing (and re-writing) code I wrote a year-ish ago (before I learned redux), I have a react component that contains the following destructing of a user profile passed to as a prop as 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;

Is there a less ghastly way to declare all these variables inside my component? Is there anyway to move this eyesore above into a separate file and import the variables? Something that's better than changing all subsequent appearances of these variables user.email , user.username , etc. (I thought of using var and moving the declaration to the bottom of the file, but these are not things that should be global variables.)

To the person who suggested that string editing was the way to go, the answer is NO, because (a) it's slow because converting between JSON.stringify objects and back to objects is slow, (b) it's also insecure (someone can inject a string into you code easily enough, since this code will be running on the front end), and (c) it's terrible form, for which Uncle Bob, should he do JS, would scold you extensively.

Answer 1

No, there is not. If you want the variables, you have to declare them.

Your underlying issue appears to be that your user object has far too many properties. Use a composite of many smaller objects instead. Put everything with a common prefix in a sub-structure at least. Use arrays instead of numbering your properties. A user doesn't have a cardtype, a user has a card which has a type.

Answer 2

Why don't you use the new optional chaining operator ?. . It short-circuits if the left-hand side is null or undefined and the entire expression yields null. For example, const x = a?.b?.c is roughly equivalent to:

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

Then you can dispense with the destructuring and just say things like

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

Answer 3

There is away to get around that

 user={ email:"as@gmail.com", username:1, salutation:"hi", firstName:"smith", middleName:"do", lastName:"wi", suffix:"suf", company:"sm", title:"se", securityQuestionNo1:"smth", securityAnswerNo1:"js", securityQuestionNo2:"script", securityAnswerNo2:"node"} Object.entries(user).forEach((item) => { globalThis[item[0]] = item[1] // use window instead of glabalThis if you are not using Nodejs }) console.log(email, username, salutation, firstName, middleName)