将对象键从蛇箱转换为骆驼箱的最佳方法是什么，反之亦然？
将对象键从蛇箱转换为骆驼箱的最佳方法是什么，反之亦然？
提问于 2019-07-23 16:16:53
我有一个来自服务器的响应，结构如下：
{
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
}然后，我使用以下助手函数将值转换为camel case语法，以将其存储在function组件状态中：
// 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,
}
}问题是:在我的观点上，它看起来非常相似和可重复，在您的观点上减少这段代码的最好和最优雅的方法是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-23 16:24:57
如果要将所有_<alphabet>替换为<Uppercase Alphabet>，则可以循环遍历对象的entries，并将所有_([a-z])替换为大写字母。然后使用Object.fromEntries()获取一个新对象
const fn = key => key.replace(/_([a-z])/g, (_, m) => m.toUpperCase())
const reverse_fn = key => key.replace(/[A-Z]/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(/_([a-z])/g, (_, m) => m.toUpperCase());
acc[newKey] = o[k];
return acc;
}, {})
console.log(trasnform(o))
Stack Overflow用户
发布于 2019-07-23 16:39:04
您可以创建映射对象和转换函数：
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;
}因此，在将数据发送到服务器之前，只需从端点接收数据并调用模型上的fromServer和toServer即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57168365
复制相关文章
相似问题
腾讯云开发者
