javascript - js数据处理？

Question

js数据处理

const translations = {
'editor.remove': 'Remove',
'editor.copy': 'Copy',
'editor.words': 'WORDS',
'editor.characters': 'CHARACTERS',
'editor.default': 'Default',
'editor.recent': 'Recently Used',
'editor.nofill': 'Remove Color',
'editor.format': 'Format Painter',
'editor.draghandle.tooltip': 'Click And Drag',
'editor.copyToClipboard': 'CopyToClipboard',
'editor.importWrod.tooltip': 'Import Word',
'editor.slash': "Press '/' for commands",
'editor.slash.empty': 'No Result',
'editor.slash.format': 'Format',
'editor.slash.insert': 'Insert',
'editor.slash.embed': 'Embed Services',
'editor.content': 'Please input content',
'editor.moremark': 'More Text Styles',
'editor.size.small.tooltip': 'Small',
'editor.size.medium.tooltip': 'Medium',
'editor.size.large.tooltip': 'Cover',
'editor.bold.tooltip': 'Bold',
'editor.italic.tooltip': 'Italic',
'editor.underline.tooltip': 'Underline',
'editor.strike.tooltip': 'Strike',
'editor.color.tooltip': 'Color',
'editor.color.more': 'Color Picker',
'editor.highlight.tooltip': 'Highlight',
'editor.lineheight.tooltip': 'Line Height',
'editor.heading.tooltip': 'Headings',
'editor.heading.h1.tooltip': 'Heading 1',
'editor.heading.h2.tooltip': 'Heading 2',
'editor.heading.h3.tooltip': 'Heading 3',
'editor.heading.h4.tooltip': 'Heading 4',
'editor.heading.h5.tooltip': 'Heading 5',
'editor.heading.h6.tooltip': 'Heading 6',
'editor.paragraph.tooltip': 'Paragraph',
'editor.textalign.tooltip': 'Align',
'editor.textalign.left.tooltip': 'Left',
'editor.textalign.center.tooltip': 'Center',
'editor.textalign.right.tooltip': 'Right',
'editor.textalign.justify.tooltip': 'Justify',
'editor.indent': 'Indent',
'editor.indent.indent': 'Increase Indent',
'editor.indent.outdent': 'Decrease Indent',
'editor.fontFamily.tooltip': 'Font family',
'editor.fontSize.tooltip': 'Font size',
'editor.fontSize.default.tooltip': 'Default',
'editor.superscript.tooltip': 'Superscript',
'editor.subscript.tooltip': 'Subscript',
'editor.bulletlist.tooltip': 'Bullet List',
'editor.orderedlist.tooltip': 'Ordered List',
'editor.tasklist.tooltip': 'Task List',
'editor.indent.tooltip': 'Indent',
'editor.outdent.tooltip': 'Outdent',
'editor.columns.tooltip': 'Columns',
'editor.link.tooltip': 'Link',
'editor.link.unlink.tooltip': 'UnLink',
'editor.link.open.tooltip': 'Open Link',
'editor.link.edit.tooltip': 'Edit Link',
'editor.link.dialog.title': 'Insert Link',
'editor.link.dialog.link': 'Link',
'editor.link.dialog.text': 'Text',
'editor.link.dialog.openInNewTab': 'Open In New Tab',
'editor.link.dialog.link.placeholder': 'Link Address',
'editor.link.dialog.text.placeholder': 'Add Description',
'editor.link.dialog.button.apply': 'Apply',
'editor.image.tooltip': 'Image',
'editor.image.dragger.tooltip': 'Click or drag the image to the area to upload',
'editor.image.float.left.tooltip': 'Float left',
'editor.image.float.none.tooltip': 'Float none',
'editor.image.float.right.tooltip': 'Float right',
'editor.image.dialog.title': 'Add an image',
'editor.image.dialog.tab.url': 'Url',
'editor.image.dialog.tab.upload': 'Upload',
'editor.image.dialog.uploading': 'Uploading',
'editor.image.dialog.form.link': 'Link',
'editor.image.dialog.placeholder': 'Link',
'editor.image.dialog.form.alt': 'Alt',
'editor.image.dialog.form.aspectRatio': 'Lock original aspect ratio',
'editor.image.dialog.form.file': 'File',
'editor.image.dialog.button.apply': 'apply',
'editor.video.tooltip': 'Video',
'editor.video.dialog.tab.upload': 'Upload',
'editor.video.dialog.uploading': 'Uploading',
'editor.video.dialog.title': 'Embed or upload a video',
'editor.video.dialog.link': 'link',
'editor.video.dialog.placeholder': 'Link',
'editor.video.dialog.button.apply': 'apply',
'editor.table.tooltip': 'Table',
'editor.table.menu.insert_table': 'Insert Table',
'editor.table.menu.insert_table.with_header_row': 'With header row',
'editor.table.menu.insertColumnBefore': 'Insert Column Before',
'editor.table.menu.insertColumnAfter': 'Insert Column After',
'editor.table.menu.deleteColumn': 'Delete Column',
'editor.table.menu.insertRowAbove': 'Insert Row Above',
'editor.table.menu.insertRowBelow': 'Insert Row Below',
'editor.table.menu.deleteRow': 'Delete Row',
'editor.table.menu.mergeCells': 'Merge Cells',
'editor.table.menu.splitCells': 'Split Cells',
'editor.table.menu.deleteTable': 'Delete Table',
'editor.table.menu.setCellsBgColor': 'Cell Background Color',
'editor.blockquote.tooltip': 'Blockquote',
'editor.horizontalrule.tooltip': 'Horizontal Rule',
'editor.code.tooltip': 'Code',
'editor.codeblock.tooltip': 'Code Block',
'editor.clear.tooltip': 'Clear Format',
'editor.undo.tooltip': 'Undo',
'editor.redo.tooltip': 'Redo',
'editor.fullscreen.tooltip.fullscreen': 'Fullscreen',
'editor.fullscreen.tooltip.exit': 'Fullscreen Exit',
'editor.imageUpload.fileTypeNotSupported': 'File type not supported',
'editor.imageUpload.fileSizeTooBig': 'File size too big, Maximum size is'
};

如何使用js转换

const translations = {
editor: {

remove: 'Remove',
copy: 'Copy',
words: 'WORDS',
characters: 'CHARACTERS',
default: 'Default',
recent: 'Recently Used',
nofill: 'Remove Color',
format: 'Format Painter',
draghandle: {
  tooltip: 'Click And Drag'
},
copyToClipboard: 'CopyToClipboard',
importWrod: {
  tooltip: 'Import Word'
},
slash: {
  default: "Press '/' for commands",
  empty: 'No Result',
  format: 'Format',
  insert: 'Insert',
  embed: 'Embed Services'
},
content: 'Please input content',
moremark: 'More Text Styles',
size: {
  small: {
    tooltip: 'Small'
  },
  medium: {
    tooltip: 'Medium'
  },
  large: {
    tooltip: 'Cover'
  }
},
bold: {
  tooltip: 'Bold'
},
italic: {
  tooltip: 'Italic'
},
underline: {
  tooltip: 'Underline'
},
strike: {
  tooltip: 'Strike'
},
color: {
  tooltip: 'Color',
  more: 'Color Picker'
},
highlight: {
  tooltip: 'Highlight'
},
lineheight: {
  tooltip: 'Line Height'
},
heading: {
  tooltip: 'Headings',
  h1: {
    tooltip: 'Heading 1'
  },
  h2: {
    tooltip: 'Heading 2'
  },
  h3: {
    tooltip: 'Heading 3'
  },
  h4: {
    tooltip: 'Heading 4'
  },
  h5: {
    tooltip: 'Heading 5'
  },
  h6: {
    tooltip: 'Heading 6'
  }
},
paragraph: {
  tooltip: 'Paragraph'
},
textalign: {
  tooltip: 'Align',
  left: {
    tooltip: 'Left'
  },
  center: {
    tooltip: 'Center'
  },
  right: {
    tooltip: 'Right'
  },
  justify: {
    tooltip: 'Justify'
  }
},
indent: 'Indent',
indent: {
  indent: 'Increase Indent',
  outdent: 'Decrease Indent'
},
fontFamily: {
  tooltip: 'Font family'
},
fontSize: {
  tooltip: 'Font size',
  default: {
    tooltip: 'Default'
  }
},
superscript: {
  tooltip: 'Superscript'
},
subscript: {
  tooltip: 'Subscript'
},
bulletlist: {
  tooltip: 'Bullet List'
},
orderedlist: {
  tooltip: 'Ordered List'
},
tasklist: {
  tooltip: 'Task List'
},
indent: {
  tooltip: 'Indent'
},
outdent: {
  tooltip: 'Outdent'
},
columns: {
  tooltip: 'Columns'
},
link: {
  tooltip: 'Link',
  unlink: {
    tooltip: 'UnLink'
  },
  open: {
    tooltip: 'Open Link'
  },
  edit: {
    tooltip: 'Edit Link'
  },
  dialog: {
    title: 'Insert Link',
    link: 'Link',
    text: 'Text',
    openInNewTab: 'Open In New Tab',
    link: {
      placeholder: 'Link Address'
    },
    text: {
      placeholder: 'Add Description'
    },
    button: {
      apply: 'Apply'
    }
  }
},
image: {
  tooltip: 'Image',
  dragger: {
    tooltip: 'Click or drag the image to the area to upload'
  },
  float: {
    left: {
      tooltip: 'Float left'
    },
    none: {
      tooltip: 'Float none'
    },
    right: {
      tooltip: 'Float right'
    }
  },
  dialog: {
    title: 'Add an image',
    tab: {
      url: 'Url',
      upload: 'Upload'
    },
    uploading: 'Uploading',
    form: {
      link: 'Link',
      placeholder: 'Link',
      alt: 'Alt',
      aspectRatio: 'Lock original aspect ratio',
      file: 'File'
    },
    button: {
      apply: 'apply'
    }
  }
},
video: {
  tooltip: 'Video',
  dialog: {
    tab: {
      upload: 'Upload'
    },
    uploading: 'Uploading',
    title: 'Embed or upload a video',
    link: 'link',
    placeholder: 'Link',
    button: {
      apply: 'apply'
    }
  }
},
table: {
  tooltip: 'Table',
  menu: {
    insert_table: 'Insert Table',
    with_header_row: 'With header row',
    insertColumnBefore: 'Insert Column Before',
    insertColumnAfter: 'Insert Column After',
    deleteColumn: 'Delete Column',
    insertRowAbove: 'Insert Row Above',
    insertRowBelow: 'Insert Row Below',
    deleteRow: 'Delete Row',
    mergeCells: 'Merge Cells',
    splitCells: 'Split Cells',
    deleteTable: 'Delete Table',
    setCellsBgColor: 'Cell Background Color'
  }
},
blockquote: {
  tooltip: 'Blockquote'
},
horizontalrule: {
  tooltip: 'Horizontal Rule'
},
code: {
  tooltip: 'Code'
},
codeblock: {
  tooltip: 'Code Block'
},
clear: {
  tooltip: 'Clear Format'
},
undo: {
  tooltip: 'Undo'
},
redo: {
  tooltip: 'Redo'
},
fullscreen: {
  tooltip: {
    fullscreen: 'Fullscreen',
    exit: 'Fullscreen Exit'
  }
},
imageUpload: {
  fileTypeNotSupported: 'File type not supported',
  fileSizeTooBig: 'File size too big, Maximum size is'
}

}
};

Answer 1

const translations = {
    'editor.imageUpload.fileSizeTooBig': 'File size too big, Maximum size is'
};

function trans(data) {
    const res = {};

    for (const keyStr of Object.keys(data)) {
        const keys = keyStr.split('.');
        let tempRes = res;
        while (keys.length > 1) {
            const keyName = keys.shift();
            tempRes = tempRes[keyName] || (tempRes[keyName] = {});
        }
        tempRes[keys[0]] = data[keyStr];
    }

    return res;
}

console.log(trans(translations));

Answer 2

function fn(obj = {}) {
const result = {}

Object.entries(obj).forEach(([key, value]) => {

const keys = key.split('.')
const lastIndex = keys.length - 1 // 减少重复计算

keys.reduce((acc, k, i) => {
  if (i == lastIndex) {
    acc[k] = value
  } else if (acc[k] === undefined) {
    acc[k] = {}
  }
  return acc[k]
}, result)

})

return result
}
我直接写的这个不知道为什么报错

Answer 3

const before = {
  'editor.remove': 'Remove',
  'editor.format': 'Format Painter',
  'editor.draghandle.tooltip': 'Click And Drag',
  'editor.copyToClipboard': 'CopyToClipboard',
  'editor.importWrod.tooltip': 'Import Word',
  'editor.slash': "Press '/' for commands",
  'editor.slash.empty': 'No Result',
  'editor.slash.format': 'Format',
  'editor.slash.insert': 'Insert',
};
// 使用 lodash 
const translations = {};
Object.keys(before).forEach((key) => {
  const path = key.split('.');
  loadsh.set(translations, path, before[key])
})
console.log(translations);

Answer 4

要将给定的扁平对象 translations 转换为嵌套对象，你可以通过编写一个递归函数来实现这一点。但是，由于你提供的原始 translations 对象已经是嵌套格式，看起来你可能是想询问如何从一个扁平格式转换到这种嵌套格式。不过，为了完整性，我将首先展示如何从扁平格式转换到嵌套格式，然后指出你提供的对象已经是嵌套格式。

从扁平格式到嵌套格式

假设你有一个扁平的对象，如下所示：

const flatTranslations = {
  'editor.remove': 'Remove',
  'editor.copy': 'Copy',
  'editor.draghandle.tooltip': 'Click And Drag',
  // ... 其他扁平键值对
};

你可以使用以下函数将其转换为嵌套对象：

function flattenToNested(flat, result = {}, path = []) {
  for (let key in flat) {
    let parts = key.split('.');
    let current = result;
    for (let i = 0; i < parts.length - 1; i++) {
      let part = parts[i];
      if (!current[part]) current[part] = {};
      current = current[part];
    }
    current[parts[parts.length - 1]] = flat[key];
  }
  return result;
}

const nestedTranslations = flattenToNested(flatTranslations);
console.log(nestedTranslations);

你提供的对象已经是嵌套格式

然而，你提供的 translations 对象已经是一个嵌套对象，所以实际上你不需要进行任何转换。它已经是按照你想要的格式组织的。如果你想要访问某个特定的值，你可以直接通过键路径来访问它，例如：

console.log(translations.editor.remove); // 输出: "Remove"
console.log(translations.editor.draghandle.tooltip); // 输出: "Click And Drag"

因此，如果你正在寻找如何处理这个对象，你已经有了正确的格式，可以直接按照需要来访问和操作它。