如何在对象分解任务的左侧使用它？

Question

(This question is not specific to Vue, but it is in a Vue project, that is why the strange use of the this in front of the functions and variables.)

I have a function that returns an object which is destructured into two variables:

  const { primaryNumber, typeOfExpression } = this.findPrimaryAndType(
    this.naturalExpressionYearOfBirth,
    this.gender,
  );

I don't want the variables to be primaryNumber and typeOfExpression any more, I want them to be this.primaryNumber and this.typeOfExpression which refer to my view data section.

I have found a crummy workaround using the code below:

  this.primaryNumber = primaryNumber;
  this.typeOfExpression = typeOfExpression;

But this can't be the best way of doing it! What should I do? If I add this in front of the variables inside the {} I get an error and if I remove the const it does not accept the = Thanks.

Answer 1

You can spell out the destructuring targets, instead of implicitly creating const variables:

({
  primaryNumber: this.primaryNumber,
  typeOfExpression: this.typeOfExpression
} = this.findPrimaryAndType(
  this.naturalExpressionYearOfBirth,
  this.gender,
));

Of course that's not very helpful in terms of conciseness. If those two properties are the only ones on the result object, you can however use Object.assign :

Object.assign(this, this.findPrimaryAndType(
  this.naturalExpressionYearOfBirth,
  this.gender,
));

Answer 2

Your workaround is the correct way to do this (at least from a pure Javascript perspective, not sure how Vue handles this). You can make it slightly shorter by using Object.assign :

const { primaryNumber, typeOfExpression } = this.findPrimaryAndType(
    this.naturalExpressionYearOfBirth,
    this.gender,
);
Object.assign(this, { primaryNumber, typeOfExpression });

Or, if you wanted to copy all the returned properties from findPrimaryAndType to the current instance, you could skip the destructuring altogether:

const { naturalExpressionYearOfBirth, gender } = this;
Object.assign(this, this.findPrimaryAndType(naturalExpressionYearOfBirth, gender));