JavaScript：如何更改數組中對象的屬性名稱？

Question

我正在使用這個react-select ： https : //github.com/JedWatson/react-select

他們需要的選項數據的格式是：

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry'},
    { value: 'vanilla', label: 'Vanilla' }
];

我的陣列設置不同，如下所示：

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

我無法更改我的數組。 如果嘗試在我的選項中使用name或value ，我會遇到在select-react使用它們的問題。 如果我將name更改為value ，則會填充選擇選項，但是我不想這樣做。

誰能教我如何將數組的name更改為value ？

Answer 1

您可以使用.map()函數使columns的數據適合與react-select 。

.map()函數可用於Array類型。 它從您調用它的數組中創建一個新數組，並允許您提供一個函數來轉換/更改從原始數組復制的每個項目。

您可以按如下方式使用它：

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

const options = columns.map(function(row) {

   // This function defines the "mapping behaviour". name and title 
   // data from each "row" from your columns array is mapped to a 
   // corresponding item in the new "options" array

   return { value : row.name, label : row.title }
})

/*
options will now contain this:
[
    { value: 'OrderNumber', label: 'Order Number' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
];
*/

有關更多信息， 請參閱.map()的 MDN 文檔

Answer 2

如果您只想將name屬性重命名為value您可以使用map並將name屬性破壞為value並選擇其余的。

 const columns = [ { name: 'OrderNumber', title: 'Order Number' }, { name: 'strawberry', title: 'Strawberry' }, { name: 'vanilla', title: 'Vanilla' } ]; const newColumns = columns.map( item => { const { name: value, ...rest } = item; return { value, ...rest } } ); console.log( newColumns );

但是，我懷疑您會想要這個，因為react-select對title不起作用（據我所知）。 我猜它在等待label道具。 如果是這樣，請按照@Dacre Denny 的建議更改所有屬性。 我喜歡箭頭函數 :) 所以：

const newColumns = columns.map( item =>
  ( { value: item.name, label: item.title } )
);

Answer 3

使用具有重命名屬性的destructuring將簡化。

 const options = [ { value: "chocolate", label: "Chocolate" }, { value: "strawberry", label: "Strawberry" }, { value: "vanilla", label: "Vanilla" }, ]; const columns = options.map(({ value: name, label: title }) => ({ name, title, })); console.log(columns);