ES6傳播語法上的對象的陣列，並獲得對象屬性

Question

我有對象的數組如下：

const data = [ 
    { 
    'name': 'A', 
    'v0': true, 
    'values': [ 
     { 'v': true, 'k': 1 }, 
     { 'v': false, 'k': 2 }, 
     { 'v': true, 'k': 3 }, 
     { 'v': false, 'k': 4 } 
    ]' 
    }, 
    ... 
] 

下面的函數中提取PARAMS name，從所述數據對象v0和values，並用於通過創建具有屬性的單元格數組來呈現表格的一行。

v0是一個布爾值，根據它的值，渲染函數可能會將一些樣式應用於單元格。

當預定值的數量這工作得很好，因爲他們可以列出：V0，V1 ...

不過，我有值的數組，那麼，想傳播它，同時應用一個唯一的密鑰，如圖V0如下：

const renderBodyRow = ({ name, v0, values }) => ({ 
    cells: [ 
    name, 
    v0 ? { key: '0', content: v0, color: 'green' } : { key: '0', content: v0, color: 'red' }, 
    ...values // need to apply the same, but on the values array 

    ] 
}) 

的一種方式是具有值作爲數組布爾值：values: [true, false, true, false]

這將需要renderBodyRow函數內的唯一密鑰的創建。這可能嗎？或者將values數組定義爲具有值和鍵的對象組成的數組。在這種情況下，傳播語法將如何訪問這些對象的屬性？

關於如何使用擴展語法來實現這些（或兩者）的任何想法？

感謝

Answer 1

您將需要以每個值轉換成一個對象與所需的風格來使用Array.prototype.map。您可以使values爲布爾數組，然後使用每個值的索引作爲唯一鍵。

const data = [{ 
 
    name: 'A', 
 
    values: [true, true, false, true, false] 
 
}]; 
 

 
const renderBodyRow = ({ name, values }) => ({ 
 
    cells: [ 
 
    name, 
 
    ...values.map((val, index) => ({ 
 
     key: String(index), 
 
     content: val, 
 
     color: val ? 'green' : 'red' 
 
    })) 
 
    ] 
 
}); 
 

 
console.log(data.map(renderBodyRow));

.as-console-wrapper { max-height: 100% !important; }

Answer 2

你似乎在尋找

function renderBodyCell({ k, v }) { 
    return { 
    key: k, 
    content: v, 
    color: v ? 'green' : 'red' 
    }; 
} 
function renderBodyRow({ name, v0, values }) { 
    return { 
    cells: [ 
     name, 
     renderBodyCell({ k: '0', v: v0 }), 
     ... values.map(renderBodyCell) 
    ] 
    }; 
}