我应该如何重构这段代码，以便只更改每个实例的参数？

Question

How should I refactor this code so I only change the parameters for each instance? Instead of calling the capatilizeFirstLetter function and asking it to split and join the payload, I'd like to do it in a separate function and only change the params for each instance

const capitalizeFirstLetter = (string) => {
    return string.charAt(0).toUpperCase() + string.slice(1)
}

    for (let i = 0; i < keys.length; i += 2) {
        blocks.push({
            type: 'section',
            fields: [
                {
                    type: 'mrkdwn',
                    text: `*${capitalizeFirstLetter(keys[i])
                        .split(/(?=[A-Z])/)
                        .join('')}:*\n${payload[keys[i]]}`,
                },
                {
                    type: 'mrkdwn',
                    text: `*${capitalizeFirstLetter(keys[i + 1])
                        .split(/(?=[A-Z])/)
                        .join('')}:*\n${payload[keys[i + 1]]}`,
                },
            ],
        })
    }

    if (lastKey) {
        blocks.push({
            type: 'section',
            fields: [
                {
                    type: 'mrkdwn',
                    text: `*${capitalizeFirstLetter(lastKey)
                        .split(/(?=[A-Z])/)
                        .join('')}:*\n${payload[lastKey]}`,
                },
            ],
        })
    }

    return blocks
}

Answer 1

I would start by creating functions that do a single thing:

 const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1); const formatKey = key => capitalizeFirstLetter(key).split(/(?=[AZ])/).join(''); function createField([key, value]) { return { type: 'mrkdwn', text: `*${formatKey(key)}:*\n${value}` }; } function groupByN(arr, n) { const groups = []; while (arr.length > 0) { groups.push(arr.splice(0, n)); } return groups; } function createBlocks(payload) { const entries = Object.entries(payload); const groupsOfTwo = groupByN(entries, 2); return groupsOfTwo.map(group => ({ type: 'section', fields: group.map(createField) })); } const res = createBlocks({ firstName: 'John', lastName: 'Doe', age: 30, profession: 'Actor', films: 35 }); console.log(res);

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

Then you can decide whether you want to merge everything into a single function or not:

 const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1); function createBlocks(payload) { const entries = Object.entries(payload); const groupsOfTwo = []; while (entries.length > 0) { groupsOfTwo.push(entries.splice(0, 2)); } return groupsOfTwo.map(group => ({ type: 'section', fields: group.map(([key, value]) => ({ type: 'mrkdwn', text: `*${ capitalizeFirstLetter(key).split(/(?=[AZ])/).join('') }:*\n${value}` })) })); } const res = createBlocks({ firstName: 'John', lastName: 'Doe', age: 30, profession: 'Actor', films: 35 }); console.log(res);

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