JavaScript - 从重嵌套数组中的查找创建逗号分隔字符串

Question

我正在构建一个拖放应用程序 - 为这些文件类型和图标提供了支持的文件类型和标题的多维数组，以便在图例中使用它们。 拖放会选择一个具有特定 mime 类型的接受数组——我需要简单地向用户显示允许的文件类型——所以返回一个逗号分隔的字符串 - jpg, pdf

循环遍历多维数组以获取 forms 中的键以完成此任务的最佳方法是什么？

  getAcceptedFileTypes(){

let supportedFiles = [{
  "images": {
    "icon": <ImageIcon />,
    "formats": [{"png": "image/png"}, {"jpeg": "image/jpeg"}],
  }
},{
  "compressed_files": {
    "icon": <DescriptionIcon />,
    "formats": [{"zip": "application/x-zip-compressed"}, {"rar": "application/x-rar-compressed"}],
  }
},{
  "documents": {
    "icon": <FileCopyIcon />,
    "formats": [{"pdf": "application/pdf"}, {"docx": "application/msword"}, {"doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}],
  }
}];

let accept = ["application/pdf","image/jpeg"]

    console.log("supportedFiles", supportedFiles);
    console.log("accept", accept);


    let acceptedFiles = "jpeg, pdf";

    return (
      acceptedFiles
    )
  }

Answer 1

您可以执行以下操作：

 let supportedFiles = [{ "images": { "icon": "<ImageIcon />", "formats": [{ "png": "image/png" }, { "jpeg": "image/jpeg" }], } }, { "compressed_files": { "icon": "<DescriptionIcon />", "formats": [{ "zip": "application/x-zip-compressed" }, { "rar": "application/x-rar-compressed" }], } }, { "documents": { "icon": "<FileCopyIcon />", "formats": [{ "pdf": "application/pdf" }, { "docx": "application/msword" }, { "doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }], } }]; let accept = ["application/pdf", "image/jpeg"]; const acceptedFiles = supportedFiles.reduce((acc, item) => { const subItem = Object.values(item)[0]; subItem.formats.forEach((format, index) => { if (accept.indexOf(Object.values(format)[0]) > -1) { acc.push(Object.keys(subItem.formats[index])[0]); } }); return acc; }, []).join(', '); //test console.log(acceptedFiles);

Answer 2

你是这个意思？

 const getAcceptedFileTypes = () => { let supportedFiles = [{ "images": { "icon": `<ImageIcon />`, "formats": [{ "png": "image/png" }, { "jpeg": "image/jpeg" }], } }, { "compressed_files": { "icon": `<DescriptionIcon />`, "formats": [{ "zip": "application/x-zip-compressed" }, { "rar": "application/x-rar-compressed" }], } }, { "documents": { "icon": `<FileCopyIcon />`, "formats": [{ "pdf": "application/pdf" }, { "docx": "application/msword" }, { "doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }], } }]; let acceptedFiles = supportedFiles.flatMap(file => file[Object.keys(file)[0]].formats) return ( acceptedFiles ) } console.log(getAcceptedFileTypes()) console.log(getAcceptedFileTypes().map(entry => Object.keys(entry)[0]).join(","))

Answer 3

可能想试试这个

 let supportedFiles = [{ "images": { "icon": '<ImageIcon />', "formats": [{"png": "image/png"}, {"jpeg": "image/jpeg"}], } },{ "compressed_files": { "icon": '<DescriptionIcon />', "formats": [{"zip": "application/x-zip-compressed"}, {"rar": "application/x-rar-compressed"}], } },{ "documents": { "icon": '<FileCopyIcon />', "formats": [{"pdf": "application/pdf"}, {"docx": "application/msword"}, {"doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}], } }]; let acceptedFiles=[]; supportedFiles.forEach((fileType)=>{ Object.keys(fileType).forEach(key=>{ fileType[key].formats.forEach(format=>{ acceptedFiles.push(Object.keys(format)); }) }) }) console.log(acceptedFiles.join(","))

如果你改变结构，那么：

 let supportedFilesObj ={ "images": { "icon": '<ImageIcon />', "formats": [{"png": "image/png"}, {"jpeg": "image/jpeg"}], }, "compressed_files": { "icon": '<DescriptionIcon />', "formats": [{"zip": "application/x-zip-compressed"}, {"rar": "application/x-rar-compressed"}], }, "documents": { "icon": '<FileCopyIcon />', "formats": [{"pdf": "application/pdf"}, {"docx": "application/msword"}, {"doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}], } }; let acceptedFiles=[]; Object.keys(supportedFilesObj).forEach((key)=>{ supportedFilesObj[key].formats.forEach(format=>{ acceptedFiles.push(Object.keys(format)); }) }) console.log(acceptedFiles.join(","))

Answer 4

如果这是一个重复操作，您可以创建一个映射器 object，它将每个 MIME 类型映射到其文件扩展名

const mapper = {}

for (const file of supportedFiles) {
  const { formats } = Object.values(file)[0]
  for (const format of formats) {
    const [key, value] = Object.entries(format)[0]
    mapper[value] = key;
  }
}

function getAcceptedFiles(accept, mapper) {
  return accept.map(t => mapper[t])
}

映射器 object：

{
  "image/png": "png",
  "image/jpeg": "jpeg",
  "application/x-zip-compressed": "zip",
  "application/x-rar-compressed": "rar",
  "application/pdf": "pdf",
  "application/msword": "docx",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "doc"
}

这是一个片段：

 const supportedFiles=[{images:{icon:"",formats:[{png:"image/png"},{jpeg:"image/jpeg"}],}},{compressed_files:{icon:"",formats:[{zip:"application/x-zip-compressed"},{rar:"application/x-rar-compressed"}],}},{documents:{icon:"",formats:[{pdf:"application/pdf"},{docx:"application/msword"},{doc:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"}],}}]; const mapper = {} for (const file of supportedFiles) { const { formats } = Object.values(file)[0] for (const format of formats) { const [key, value] = Object.entries(format)[0] mapper[value] = key; } } function getAcceptedTypes(accept, mapper) { return accept.map(t => mapper[t]) } console.log( getAcceptedTypes( ["application/pdf","image/jpeg"], mapper) ) console.log( getAcceptedTypes( ["application/x-rar-compressed"], mapper) )

Answer 5

这是一个使用 3 个嵌套 for 循环的简单解决方案。

function getAcceptedFileExtensions() {
    let acceptedExtensions = [];

    for (let fileTypeObject of supportedFiles) {
        for (let fileTypeKey of Object.keys(fileTypeObject)) {
            for (let extensionPair of fileTypeObject[fileTypeKey].formats) {
                acceptedExtensions.push(Object.keys(extensionPair)[0]);
            }
        }
    }

    return acceptedExtensions;
}

console.log(getAcceptedFileExtensions().toString());

数据结构有点奇怪，因为它包含一个包含一个键的对象数组，这似乎是每个 object 的名称，而不是直接具有不同文件类型类别的 object。 因此，第二个循环可以缩短为Object.keys(fileTypeObject)[0] ：

 const supportedFiles = [ { "images": { "icon": "<ImageIcon />", "formats": [ { "png": "image/png" }, { "jpeg": "image/jpeg" } ], } }, { "compressed_files": { "icon": "<DescriptionIcon />", "formats": [ { "zip": "application/x-zip-compressed" }, { "rar": "application/x-rar-compressed" } ], } }, { "documents": { "icon": "<FileCopyIcon />", "formats": [ { "pdf": "application/pdf" }, { "docx": "application/msword" }, { "doc": "application/vnd.openxmlformats-officedocument.wordprocessingml.document" } ], } } ]; function getAcceptedFileExtensions() { let acceptedExtensions = []; for (let fileTypeObject of supportedFiles) { let fileTypeKey = Object.keys(fileTypeObject)[0]; for (let extensionPair of fileTypeObject[fileTypeKey].formats) { acceptedExtensions.push(Object.keys(extensionPair)[0]); } } return acceptedExtensions; } console.log(getAcceptedFileExtensions().toString());