使用變量作爲對象的值

Question

我有一個函數可以接受幾個參數，其中一個參數可以是一個具有其他屬性的對象。像這樣：

myFunction(res.columns, res.data, { 
     margin: { 
      top: 65 
     }, 
     styles: { 
      overflow: 'linebreak', 
     }, 
     columnStyles: { 
      1: { 
       columnWidth: 100 
      }, 
      2: { 
       columnWidth: 80 
      } 
     } 
}): 

現在，我的問題是這樣的： 你可以看到，在那裏有不同的指標，它裏面「columnStyles」有其值的屬性。問題在於，根據請求的類型，數字100和80會改變。我想要做的是，根據你所得到的參數，我的值賦給一個變量像這樣的情況下切換：

switch (type) { 
     case 'components': 
      config = { 
       1: { 
        columnWidth: 100 
       }, 
       2: { 
        columnWidth: 80 
       } 
      } 
      console.log(config); 
      break; 
    } 

我想要做的只是，在「columnStyles」把「配置」，併爲它取上面的開關的情況下被分配的值，因此這將是這樣的：

myFunction(res.columns, res.data, { 
      margin: { 
       top: 65 
      }, 
      styles: { 
       overflow: 'linebreak', 
      }, 
      columnStyles: { 
       config 
      } 
    }): 

我所看到的是，在調試器控制檯，「配置」他的價值觀是正確的，但他們沒有被接受，也沒有做任何事情。

任何想法或建議？

謝謝！

Answer 1

爲什麼不只是將columnStyles設置爲config？

myFunction(res.columns, res.data, { 
     margin: { 
      top: 65 
     }, 
     styles: { 
      overflow: 'linebreak', 
     }, 
     columnStyles: config 
}): 

除非，我錯過了什麼，上面應該適合你。

如果你想合併在config與其他值，那麼你可以使用像Object.assign或對象傳播（...）。

要合併你可能想這樣做：

myFunction(res.columns, res.data, { 
     margin: { 
      top: 65 
     }, 
     styles: { 
      overflow: 'linebreak', 
     }, 
     columnStyles: Object.assign(existingConfig, config) 
}): 

或

myFunction(res.columns, res.data, { 
     margin: { 
      top: 65 
     }, 
     styles: { 
      overflow: 'linebreak', 
     }, 
     columnStyles: { 
      3: { 
       columnWidth: 123 
      }, 
      4: { 
       columnWidth: 678 
      }, 
      ...config 
     } 
}); 

*注：該對象傳播語法可能無法在節點的一些版本沒有一些transpiling幫助:)

Answer 2

只要寫

myFunction(res.columns, res.data, { 
      margin: { 
       top: 65 
      }, 
      styles: { 
       overflow: 'linebreak', 
      }, 
      columnStyles: config, 
}): 

你應該很好。添加額外的大括號不會添加對象名稱作爲屬性：

{ 
       margin: { 
        top: 65 
       }, 
       styles: { 
        overflow: 'linebreak', 
       }, 
       columnStyles: { 
        config: { 
         columnStyles: {...} 
        } 
       } 
}