將對象密鑰從蛇形案例轉換為駱駝案例，反之亦然的最佳方法是什么？

Question

我收到來自服務器的以下結構的響應：

{
    is_separate_page: true,
    is_blank_page: true,
    is_instructions_page: false,
    is_letter_paper: true,
    is_pressure_seal_paper: false,
    is_mask_ssn_on_letter_paper: true,
    is_mask_ssn_on_pressure_seal_paper: true,
    is_pdf_encrypted_on_letter_paper: false,
    is_pdf_encrypted_on_pressure_seal_paper: true
}

然后，我使用以下輔助函數將值轉換為駝峰式語法，以存儲在我的React組件狀態中：

// Destructuring approach

transformInitialCheckboxesState = data => {
        const {
            is_show_mask_ssn_field: isShowMaskSSNField,
            is_separate_page: isSeparatePage,
            is_blank_page: isBlankPage,
            is_instructions_page: isInstructionsPage,
            is_letter_paper: isLetterPaper,
            is_pressure_seal_paper: isPressureSealPaper,
            is_mask_ssn_on_letter_paper: isMaskSSNonLetterPaper,
            is_mask_ssn_on_pressure_seal_paper: isMaskSSNonPressureSealPaper,
            is_pdf_encrypted_on_letter_paper: isPDFEncryptedOnLetterPaper,
            is_pdf_encrypted_on_pressure_seal_paper: isPDFEncryptedOnPressureSealPaper,
        } = data

        return {
            isShowMaskSSNField,
            isSeparatePage,
            isBlankPage,
            isInstructionsPage,
            isLetterPaper,
            isPressureSealPaper,
            isMaskSSNonLetterPaper,
            isMaskSSNonPressureSealPaper,
            isPDFEncryptedOnLetterPaper,
            isPDFEncryptedOnPressureSealPaper,
        }
    }

為了提交值，我應該按照后端需求執行相反的操作來准備密鑰：

    preparePayloadCheckboxesState = data => {
        const {
            isShowMaskSSNField: is_show_mask_ssn_field,
            isSeparatePage: is_separate_page,
            isBlankPage: is_blank_page,
            isInstructionsPage: is_instructions_page,
            isLetterPaper: is_letter_paper,
            isPressureSealPaper: is_pressure_seal_paper,
            isMaskSSNonLetterPaper: is_mask_ssn_on_letter_paper,
            isMaskSSNonPressureSealPaper: is_mask_ssn_on_pressure_seal_paper,
            isPDFEncryptedOnLetterPaper: is_pdf_encrypted_on_letter_paper,
            isPDFEncryptedOnPressureSealPaper: is_pdf_encrypted_on_pressure_seal_paper,
        } = data

        return {
            is_show_mask_ssn_field,
            is_separate_page,
            is_blank_page,
            is_instructions_page,
            is_letter_paper,
            is_pressure_seal_paper,
            is_mask_ssn_on_letter_paper,
            is_mask_ssn_on_pressure_seal_paper,
            is_pdf_encrypted_on_letter_paper,
            is_pdf_encrypted_on_pressure_seal_paper,
        }
    }

問題是：就我而言，它看起來非常相似且可重復，減少您的代碼的最佳和最優雅的方法是什么？

Answer 1

如果要用<Uppercase Alphabet>替換所有_<alphabet> ，則可以遍歷對象的entries ，並用大寫字母替換所有_([az]) 。 然后使用Object.fromEntries()獲取一個新對象

 const fn = key => key.replace(/_([az])/g, (_, m) => m.toUpperCase()) const reverse_fn = key => key.replace(/[AZ]/g, m => `_${m.toLowerCase()}`) // trasnforms an object based on the replacer function provided const trasnform = (o, replacer) => Object.fromEntries( Object.entries(o).map(([k, v]) => [replacer(k), v]) ) const input={is_separate_page:true,is_blank_page:true,is_instructions_page:false,is_letter_paper:true,is_pressure_seal_paper:false,is_mask_ssn_on_letter_paper:true,is_mask_ssn_on_pressure_seal_paper:true,is_pdf_encrypted_on_letter_paper:false,is_pdf_encrypted_on_pressure_seal_paper:true} , reverseInput ={isSeparatePage:true,isBlankPage:true,isInstructionsPage:false,isLetterPaper:true,isPressureSealPaper:false,isMaskSsnOnLetterPaper:true,isMaskSsnOnPressureSealPaper:true,isPdfEncryptedOnLetterPaper:false,isPdfEncryptedOnPressureSealPaper:true}; // forward transform console.log( trasnform(input, fn) ) // reverse transform console.log( trasnform(reverseInput, reverse_fn) ) 

反向映射將是相似的。 您只需要將所有大寫字母替換為"_" + <lower case letter>

key.replace(/A-Z/g, m => "_" + m.toLowerCase()

---

注意 ：如果不支持Object.fromEntries()則可以reduce對象的鍵並創建一個新的對象：

 const o = { is_separate_page: true, is_blank_page: true, is_instructions_page: false, is_letter_paper: true, is_pressure_seal_paper: false, is_mask_ssn_on_letter_paper: true, is_mask_ssn_on_pressure_seal_paper: true, is_pdf_encrypted_on_letter_paper: false, is_pdf_encrypted_on_pressure_seal_paper: true } const trasnform = (o) => Object.keys(o).reduce((acc, k) => { const newKey = k.replace(/_([az])/g, (_, m) => m.toUpperCase()); acc[newKey] = o[k]; return acc; }, {}) console.log(trasnform(o)) 

Answer 2

您可以創建映射對象並轉換函數：

const mapping = {
    "is_show_mask_ssn_field" : "isShowMaskSSNField",
    "is_separate_page": "isSeparatePage",
    ... other properties
}

const fromServer = (data) => {
    let obj = {};
    for (var prop in data) {
        var realName = mapping[prop];
        if (realName) {
            obj[realName] = data[prop];
        }
    }
    return obj;
}

const toServer = (data) => {
    let obj = {};
    for (var serverName in mapping) {
        var realName = mapping[serverName];
        if (data.hasOwnProperty(realName)) {
            obj[serverName] = data[realName];
        }
    }
    return obj;
}

因此，只要在從端點接收到數據並在模型toServer接收到數據之后，就對數據調用fromServer ，然后再將其發送到服務器即可。