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 中使用它们时遇到问题。如果我将名称更改为值，则选择选项将会填充，但我不想这样做。

谁能教我如何将数组的名称更改为值？

Answer 1

您可以使用.map()函数使列中的数据适合与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' }
];
*/

欲了解更多信息，see the MDN documentation for .map()