ES6 中的解构

Question

在 es6 中使用解构是否有更好的方法来实现这一点？

  searchCreated(searchParams) {
    this.regionId = searchParams.region;
    this.maxPrice = searchParams.maxPrice;
    this.minPrice = searchParams.minPrice;
    this.selectedLocalities = searchParams.selectedLocalities;
    this.propertyTypeId = searchParams.propertyTypeId;
    this.minBeds = searchParams.minBeds;
    this.maxBeds = searchParams.maxBeds;
    this.minSize = searchParams.minSize;
    this.maxSize = searchParams.maxSize;
    this.keyword = searchParams.keyword;
    this.ber = searchParams.ber;
}

如果所有这些值都是它们自己的而不是 this 的属性，我会没事的。我只是不确定将一个对象有效映射到另一个对象的优雅方式

Answer 1

因为您要将 searchParam 的所有属性添加到 this，所以您可以使用 Object.assign，这基本上是将一个对象的属性复制到另一个对象。

在您的代码中，它看起来像这样：

searchCreated(searchParams) {
    Object.assign(this, searchParams, { // additional object for custom params
        region: searchParams.regionId,
        customParamName: searchParams.customParam
    }); 
}

Answer 2

您可以在解构时使用 object rest to collect all props except those that need renaming. You can assign new names。然后使用 Object#assign 将所有内容合并到 this.

注意：对象 rest/spread 仍然是一个提案，它需要 babel transform 才能工作。

searchCreated({ region: regionId, ...otherProps }) {
    return Object.assign(this, otherProps, { regionId });
}

ES6 中的解构

Destructuring in ES6

javascript

destructuring

ecmascript-6