如何在不丢失索引的情况下过滤数组？

I have two really long arrays containing "picture names" and "picture files". The first one represents the actual name of the pictures, while the second one is just the file name. For example:

我有两个非常长的数组包含“图片名称”和“图片文件”。第一个代表图片的实际名称,而第二个代表文件名。例如:

picturenames[0] = '0 - zero';
picturenames[1] = '1 - one';
picturenames[2] = '1 o\'clock';
...
picturefiles[0] = 'numbers-zero.jpg';
picturefiles[1] = 'numbers-one.jpg';
picturefiles[2] = 'time-1.jpg';
...

I have about 1000 items in each array in several languages (the picture files are always the same). I'm "recycling" these arrays from the previous application to save some time and avoid rewriting everything anew.

我用几种语言在每个数组中有大约1000个项目(图片文件总是相同的)。我正在从以前的应用程序“回收”这些数组,以节省一些时间,避免重新编写所有内容。

Desirable functionality: using the user's input in a textbox I want to filter the picturenames array and then show the correspondant picturefiles image.

理想的功能:在文本框中使用用户的输入我想过滤picturenames数组,然后显示相应的picturefiles图像。

The issue I'm facing: when I filter the picturenames array I lose the index and I can't "reach" the picture file name.

我面临的问题:当我过滤图片名称数组时,我丢失了索引,我无法“到达”图片文件名。

This is the code I'm using to filter the picturenames array.

这是我用来过滤picturenames数组的代码。

var matches = picturenames.filter(function(windowValue){
    if(windowValue) {
        return windowValue.indexOf(textToFindLower) >= 0;
    }
});

What would be the best way to do this?

最好的方法是什么?

UPDATE: the solution proposed by Ahmed is the best one, but for time reasons and negligible performance issues I'm just using a for loop to search trough the array, as follows:

更新:Ahmed提出的解决方案是最好的解决方案,但由于时间原因和可忽略的性能问题,我只是使用for循环来搜索数组,如下所示:

        var matchesCounter = new Array();

        for (i = 0; i < picturenames.length; i++) {
            if (picturenames[i].indexOf(textToFindLower) >= 0) {
                matchesCounter.push(i);
            }
        }

        console.log(matchesCounter);

        for (i = 0; i < matchesCounter.length; i++) {
            console.log(picturenames[i]);
            console.log(picturefiles[i]);
        }

2 个解决方案

#1

You can add one property index during the filtering time, then later on you can use the index.

您可以在过滤时添加一个属性索引,然后可以使用索引。

var matches = picturenames.filter(function(windowValue, index){

if(windowValue) {
    windowValue.index = index;
    return windowValue.comparator(textToFindLower) >= 0;// Need to define comparator function
}
});

Later on you can access by using like follows:

稍后您可以通过以下方式访问:

picturefiles[matches[0].index]

However, the solution will work on object, not primitive type string.

但是,该解决方案将适用于对象,而不是基本类型字符串。

If your data type is string, then you have to convert as object and put the string as a property value like name. The snippet is given below:

如果您的数据类型是字符串,则必须转换为对象并将字符串作为属性值(如name)。摘录如下:

var picturenames = [];
var picturefiles = [];

picturenames.push({name:'0 - zero'});
picturenames.push({name:'1 - one'});
picturenames.push({name:'1 o\'clock'});

picturefiles.push({name:'numbers-zero.jpg'});
picturefiles.push({name:'numbers-one.jpg'});
picturefiles.push({name: 'time-1.jpg'});

var textToFindLower = "0";

var matches = picturenames.filter(function(windowValue, index){

if(windowValue) {
    windowValue.index = index;
    return windowValue.name.indexOf(textToFindLower) >= 0;
}
});

console.log(matches);

#2

Try this:

const foundIndicies = Object.keys(picturenames).filter(pictureName => {
  pictureName.includes(textToFindLower)
});
// reference picturefiles[foundIndicies[0]] to get the file name

Though, it would be far nicer to have both the name and the file in a single object, like so:

但是,将名称和文件放在一个对象中会更好,如下所示:

const pictures = [
  {
    name: '0 - zero',
    file: 'numbers-zero.jpg',
  },
  {
    name: '1 - one',
    file: 'numbers-one.jpg',
  }
];

const foundPictures = pictures.filter(picture => picture.name.includes('zero'));
if (foundPictures[0]) console.log(foundPictures[0].file);

#1