在javascript中使用條件編寫擴展運算符的更好方法

Question

我正在尋找一種更好的方法來編寫以下代碼：

let fromCreatedAt;
let toCreatedAt = new Date();

const someObject = {
    ...((!!fromCreatedAt || !!toCreatedAt) ? {
        createdAt: {
            ...(!!fromCreatedAt ? {
                from: fromCreatedAt,
            } : {}),
            ...(!!toCreatedAt ? {
                to: toCreatedAt,
            } : {}),
        },
    } : {}),
}

console.log(someObject); // { createdAt: { to: 2020-11-18T05:32:57.697Z } }

fromCreatedAt 和 toCreatedAt 是可以更改和生成不同對象的變量。

這只是一個示例，但您可以擁有一個對象，該對象為其他字段多次重復 createdAt 字段的條件，因此您會找到一種方法來重構重復的功能。

Answer 1

我會使用速記屬性來創建createdAt嵌套對象，通過過濾Object.fromEntries刪除未定義的值。 然后你可以根據createdAt對象是否有任何鍵來創建someObject ：

 let from; let to = new Date(); const createdAt = Object.fromEntries( Object.entries({ from, to }).filter(([, val]) => val !== undefined) ); const someObject = Object.keys(createdAt).length ? { createdAt } : {}; console.log(someObject);

Answer 2

您可以使用速記屬性名稱創建對象並有條件地傳播它

 let fromCreatedAt, toCreatedAt = new Date(), from = fromCreatedAt, to = toCreatedAt; const createdAt = { ...(from && { from }), ...(to && { to }) }, someObject = { ...(from || to && { createdAt }) } console.log(someObject)

Answer 3

因為...null和...undefined不會導致任何數據屬性被復制，你可以擺脫三元運算符並簡化為布爾短路評估：

 let fromCreatedAt; let toCreatedAt = new Date(); const someObject = { ...(fromCreatedAt || toCreatedAt) && { createdAt: { ...fromCreatedAt && { from: fromCreatedAt}, ...toCreatedAt && { to: toCreatedAt}, } } }; console.log(someObject);

我認為這可能更優雅一些，但它並沒有擺脫重復的條件，所以可能沒有完全回答這個問題。