如何使用ES6 Object Spread更新数组中的对象?

时间:2019-02-19 14:16:28

标签: javascript reactjs ecmascript-6 jestjs snapshot

我有以下来自响应的对象数组:

const baseInput = [{
    PaymentRequirementsDetail:
    { dateDue: '12/02/2019',
        outstandingMinimum: { Money: { amount: '5.20', code: 'GBP' } },
        overlimit: { Money: { amount: '345.20', code: 'GBP' } },
        arrears: { Money: { amount: '345.20', code: 'GBP' } } }
},
{ Account: {},
    AccountId: '00000012345',
    CardBrand: 'SOMEBRAND',
    isAccountElibible: false,
    Customer:
    { salutation: 'Mr',
        givenName: 'James',
        familyName: 'Jamesy',
        suffix: 'Dr' },
    Delinquency: { monthsInArrears: 0, isOverlimit: true } }]

然后,我使用一系列函数转换响应,并返回上述格式的友好格式版本。

const baseOutput = transform(baseInput);

这将返回:

   {    name: 'Mr James Jamesy, Dr',
        cardBrand: 'SOMEBRAND',
        isAccountElibible: false,
        delinquency: { monthsInArrears: 0, isOverlimit: true },
        dateDue: '12/02/2019',
        outstandingMinimumAmount: 'GBP, 5.20',
        overlimitAmount: 'GBP, 345.20',
        arrearsAmount: 'GBP, 345.20' }

我现在想对此进行测试并生成一些快照。

我可以将上面的代码复制/粘贴到测试用例中,并在执行断言时更改值,这很好用。像这样;

    test('should omit suffix if it is undefined', () => {
    const input = [{
        PaymentRequirementsDetail:
        { dateDue: '12/02/2019',
            outstandingMinimum: { Money: { amount: '5.20', code: 'GBP' } },
            overlimit: { Money: { amount: '345.20', code: 'GBP' } },
            arrears: { Money: { amount: '345.20', code: 'GBP' } } }
    },
    { Account: {},
        AccountId: '00000012345',
        CardBrand: 'SOMEBRAND',
        isAccountElibible: true,
        Customer:
        { salutation: 'Mr',
            givenName: 'James',
            familyName: 'Jamesy' },
        Delinquency: { monthsInArrears: 0, isOverlimit: true } }];

    const output = transform(input);

    expect(baseOutput).toMatchDiffSnapshot(output);
});

这将根据需要生成我的快照,并且我将能够清楚地看到带后缀的版本和不带后缀的版本之间的区别。

但是我相信使用对象传播运算符可以做到这一点。除了上面的所有代码,我还应该加上;

 const input = [{
        ...baseInput,
        Customer:
        { salutation: 'Mr',
        givenName: 'James',
        familyName: 'Jamesy'
        }
    }];

但是,我无法以某种方式利用散布运算符,因此我可以实现这一点。谁能看到我的错误在哪里?

1 个答案:

答案 0 :(得分:1)

您的baseInput是一个包含两个项目的数组。传播运算符可用于数组或对象,您在这里所做的就是将数组传播到目标对象中。

如果模型没有改变,您可以像这样简单地将索引对象分布到目标中:

const input = [{
    ...baseInput[0]
  },{
        ...baseInput[1],
        Customer:
        { salutation: 'Mr',
        givenName: 'James',
        familyName: 'Jamesy'
        }
    }];

https://stackblitz.com/edit/typescript-imcqkh?file=index.ts