Javascript 在方法中解构

Question

有人可以深入解释到底发生了什么，如果这样做是这条线的最佳实践：

getAdvertisingChannelHtml({site, adViews, clicks, conversions, conversionRate} = this){

我的理解是我在一个方法中解构并在一个方法中传递 Object 属性并使其等于this object？

class AdvertisingChannel {
  constructor(data) {
    Object.assign(this, data);
    this.conversionRate = (this.conversions / this.clicks) * 100;
  }
  getAdvertisingChannelHtml(
    { site, adViews, clicks, conversions, conversionRate } = this
  ) {
    return `
          <div class="site-name"> ${site} </div>
          <div>Views: ${adViews} </div>
          <div>Clicks: ${clicks} </div>
          <div>Conversions: ${conversions} </div>
          <div>Conv. Rate: <span class="highlight"> ${conversionRate} %</span></div> 
      `;
  }
}

尝试查看文档并试图了解更多关于到底发生了什么但仍然感到困惑。

Answer 1

function 将解构其 Object 参数并将值分配给特定变量（ site 、 adViews 、 clicks 、 conversions 、 conversionRate ）。 如果您在不传递参数的情况下调用 function，该参数也默认设置this 。

const data = {
  site: 'stackoverflow.com',
  adViews: 10,
  clicks: 1000,
  conversions: 10,
};
const advertisingChannel = new AdvertisingChannel(data);

advertisingChannel.getAdvertisingChannelHtml();

/**
 * site: 'stackoverflow.com'
 * adViews: 10
 * clicks: 1000
 * conversions: 10
 * conversionRate: 1
 */

advertisingChannel.getAdvertisingChannelHtml({
  site: 'example.com',
  adViews: 2,
  clicks: 2000,
  conversions: 20,
});

/**
 * site: 'example.com'
 * adViews: 2
 * clicks: 2000
 * conversions: 20
 * conversionRate: undefined ( because it does not set yet)
 */

参考： 默认参数