JavaScript：列出对象的路径信息

Question

我正在尝试模拟S3存储桶的工作原理，但是我对用户界面感到困惑。因此，我有一堆以下的JSON数据。

{"name":"sams file", "path":"testfile1.jpg"},
{"name":"sams file", "path":"folder1/testfile2.jpg"},
{"name":"sams file", "path":"folder1/testfile3.jpg"},
{"name":"sams file", "path":"folder2/testfile4.jpg"},
{"name":"sams file", "path":"folder2/testfile5.jpg"},
{"name":"sams file", "path":"folder2/folder3/testfile6.jpg"},

现在我想将值如“folder2”传递给lodash，并希望它返回该文件夹及其包含的所有文件夹（不是文件）中的所有文件名，以便构建用户界面。因此，我基本上需要一个数组。

testfile4.jpg, testfile5.jpg and folder3

我应该能够检查这个项目是一个文件还是一个文件夹，并向用户呈现ui界面。听起来可行吗，有人会建议更容易实现我想要的吗？谢谢Sam。

- user1997198

---

如果您展示出一个最小、完整和可验证的示例，那么您的问题将会得到更好的回答。目前来看，您的问题太过广泛。实现这个通用功能有很多种方法。您已经尝试了哪些方法？具体卡在哪里了？ - thanksd

抱歉，是的，我应该发布我的示例。Nina Scholz的答案正是我在寻找的。 - user1997198

Answer 1

你需要过滤数组以获取所有包含此 folder 的路径中的项目，然后将这些结果 map 以仅保留文件名。

您可以使用 .filter() 和 .map() 方法的组合，如下所示：

    var results = files.filter(function(f){
       return f.path.indexOf("folder2")>-1;
    }).map(function(r){
        let reg = new RegExp('folder2\/([^\/]+)');
        let path = r.path.replace(reg, '$1');
        return path.lastIndexOf("/") > - 1 ? path.substring(0, path.lastIndexOf("/")) : path;
    });

演示：

这是一个可工作的演示：

var files = [{"name":"sams file", "path":"testfile1.jpg"},
{"name":"sams file", "path":"folder1/testfile2.jpg"},
{"name":"sams file", "path":"folder1/testfile3.jpg"},
{"name":"sams file", "path":"folder2/testfile4.jpg"},
{"name":"sams file", "path":"folder2/testfile5.jpg"},
{"name":"sams file", "path":"folder2/folder3/testfile6.jpg"}];


function getFilesFolder(folder){
    return files.filter(function(f){
       return f.path.indexOf(folder) == 0;
    }).map(function(r){
        let reg = new RegExp(folder+'\/([^\/]+)');
        let path = r.path.replace(reg, '$1');
        return path.lastIndexOf("/") > - 1 ? path.substring(0, path.lastIndexOf("/")) : path;
    });
}

console.log(getFilesFolder("folder2"));

- cнŝdk

Answer 2

你可以按照以下方式来实现

let arr = [
{"name":"sams file", "path":"testfile1.jpg"},
{"name":"sams file", "path":"folder1/testfile2.jpg"},
{"name":"sams file", "path":"folder1/testfile3.jpg"},
{"name":"sams file", "path":"folder2/testfile4.jpg"},
{"name":"sams file", "path":"folder2/testfile5.jpg"},
{"name":"sams file", "path":"folder2/folder3/testfile6.jpg"}
];

let input_folder = 'folder2';

let result = arr.reduce((a, b) => {
    a['files'] = a['files'] || [];
    a['folders'] = a['folders'] || [];
    let re = new RegExp(input_folder + '\/([^/]+)');
    let matches = b.path.match(re);
    if(matches != null){
        if(matches[1].match(/\./)){
            a['files'].push(matches[1]);
        }
        else {
            a['folders'].push(matches[1]);
        }
    }
    return a;
}, {});

console.log(result);

- marvel308

Answer 3

你可以检查路径，如果以给定的字符串开头，然后映射第一个出现的文件夹或文件。

function getParts(array, string) {
    return array
        .filter(o => o.path.startsWith(string))
        .map(o => o.path.match(/\/([^\/]+)/)[1]);
}

var data = [{ name: "sams file", path: "testfile1.jpg" }, { name: "sams file", path: "folder1/testfile2.jpg" }, { name: "sams file", path: "folder1/testfile3.jpg" }, { name: "sams file", path: "folder2/testfile4.jpg" }, { name: "sams file", path: "folder2/testfile5.jpg" }, { name: "sams file", path: "folder2/folder3/testfile6.jpg" }];

console.log(getParts(data, 'folder2'));

- Nina Scholz