对象解构成对象声明？

Question

I have an object which has several values I want to extract and place into another object with different keys for those values. Right now I'm using deconstruction to extract the values, then defining an object literal with those extracted values and their new keys.

Here is my function:

getProductReviewData() {
    const {
        averageRateDisplay,
        rawAverageRate,
        displayReviewCount,
        productReviewIds,
        productReviews
    } = this.productReviewsStore.getAll(); // this is deconstruction of an object
    return {
        ratingDisplay: averageRateDisplay,
        rating: rawAverageRate,
        ratingCount: displayReviewCount,
        reviewIds: productReviewIds,
        reviewMap: productReviews
    };
}

However, I was wondering if is a shorthand way to do this, so use one line for both the deconstruction and the declaration. Does anyone know if this is possible?

Answer 1

I don't think there's anything to put them in the same statement , especially with the renaming. You could of course write your own helper function for renaming object properties.

I think it would be much cleaner though to assign the object to one variable and then repeat that multiple times, than repeating every property/variable name twice:

getProductReviewData() {
    const all = this.productReviewsStore.getAll();
    return {
        ratingDisplay: all.averageRateDisplay,
        rating:        all.rawAverageRate,
        ratingCount:   all.displayReviewCount,
        reviewIds:     all.productReviewIds,
        reviewMap:     all.productReviews
    };
}

You can also use destructuring into object properties to swap the two sides if you ¹ like that better:

getProductReviewData() {
    let res = {};
    ({
        averageRateDisplay: res.ratingDisplay,
        rawAverageRate:     res.rating,
        displayReviewCount: res.ratingCount,
        productReviewIds:   res.reviewIds,
        productReviews:     res.reviewMap
    } = this.productReviewsStore.getAll());
    return res;
}

_{1: Personally I think it's just unnecessary confusing - and one line longer!}

Answer 2

UPD: Simple is better than complex! I like Bergi's answer =)

Probably you can declare new keys and then change them in iterations ¯_(ツ)_/¯

getProductReviewData() {
    //declare new keys
    const newKeys = {
        averageRateDisplay: "ratingDisplay",
        rawAverageRate:     "rating",
        displayReviewCount: "ratingCount",
        productReviewIds:   "reviewIds",
        productReviews:     "reviewMap"
    }
    const productReviewsStore = this.productReviewsStore.getAll();

    //return the object with replaced keys
    return Object.assign({},
      ...Object.keys(productReviewsStore)
           .filter(key => newKeys[key])
           .map(key => ({[newKeys[key]]: productReviewsStore[key]}))
    )
}

Answer 3

You can destructure and give new key/variable values in one go. But as far as I know you can't destructure directly into a new object.

const start = {
  averageRateDisplay: 1,
  rawAverageRate: 2,
  displayReviewCount: 3,
  productReviewIds: 4,
  productReviews: 5
 };

 // destructuring with renaming of variables
 const {
   // name to match : newName
   averageRateDisplay: ratingDisplay,
   rawAverageRate: rating,
   displayReviewCount: ratingCount,
   productReviewIds: reviewIds,
   productReviews: reviewMap
} = start;

// creating new object, using property value shorthand
// https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand
const end = {
    ratingDisplay,
  rating,
  ratingCount,
  reviewIds,
  reviewMap
};

console.log(end)