javascript - 如何在javascript中将数组值与 'for'循环的结果进行比较

Question

我有一个空数组(称为zoomthumbsarray)，它在“for”循环运行时获取推送到其中的值。这个“for”循环正在检查后端中是否存在针对用户正在查看的特定产品的缩略图。如果有图像，它将被添加到垂直 slider 中。当前的问题是非颜色特定图像(例如生活方式照片)被多次添加到 slider 中。

所以我需要检查 for 循环中找到的图像当前是否存储在数组中。如果存在，则图像已经生成，我不希望它再次被拉入 slider 中。如果还没有，那么图像将被添加。

下面是我正在编写的代码。我认为会使用indexOf，但无法让它工作。

任何帮助将不胜感激。

var zoomthumbsarray = [] // Empty array which gets populated by .push below during loop

for (var i = 0; i < storeImgsArr.length; i++) { // storeImgsArr finds the quantity of attributes present against the product. This loops and increments counter if there is another attibute image
    for (var e = 0; e < storeImgsArr[i].images.imgL.length; e++) { // Loop and increment counter if there is a Large image 

        zoomthumbsarray.push(storeImgsArr[i].images.imgS[e].slice(-16)); // Slices off last 16 characters of image path i.e. _navy_xsmall.jpg or 46983_xsalt1.jpg and pushes this into 'zoomthumbsarray' array

        // if statement sits here to build the html to add the image to the slider

    }
}

zoomthumbsarray = [] // Resets array to zero

回答 正如 Chris 所回答的，我使用 $.unique 只保留数组中的唯一值。 然后，如果数组 === 0 或者当前图像尚未在数组中，则在代码中包含一个 if 语句来构建缩略图图像 html。

更新了以下代码:

var zoomthumbsarray = [] // Empty array which gets populated by .push below during loop

for (var i = 0; i < storeImgsArr.length; i++) { // storeImgsArr finds the quantity of attributes present against the product. This loops and increments counter if there is another attibute image

    if (zoomthumbsarray === 0 || zoomthumbsarray.indexOf(storeImgsArr[i].images.imgS[e].slice(-16)) < 0) { // If statement is true if array === 0 or if the current image isn't already in the array 

        for (var e = 0; e < storeImgsArr[i].images.imgL.length; e++) { // Loop and increment counter if there is a Large image 

            zoomthumbsarray.push(storeImgsArr[i].images.imgS[e].slice(-16)); // Slices off last 16 characters of image path i.e. _navy_xsmall.jpg or 46983_xsalt1.jpg and pushes this into 'zoomthumbsarray' array

            zoomthumbsarray = $.unique(zoomthumbsarray); //Keeps only unique elements

            // if statement sits here to build the html to add the image to the slider

        }
    }
}

zoomthumbsarray = []//将数组重置为零

Answer 1

一些廉价而肮脏的想法:

使用underscore/lodash :

zoomthumbsarray = _.uniq(zoomthumbsarray); //Keeps only unique elements

jQuery has one还有:

zoomthumbsarray = $.unique(zoomthumbsarray); //Keeps only unique elements

然后循环遍历数组并构建 HTML。

更新: JS 的其余部分有点奇怪。这可能有效吗(如果您使用的是足够新的浏览器)？

var zoomthumbsarray = [];
storeImgsArr
    .map(function(item) { return item.images.imgS; })
    .forEach(function(imgS) {
        zoomthumbsarray = zoomthumbsarray.concat(imgS.map(function(imagePath) {
            return imagePath.slice(-16);
        }));
    });
zoomthumbsarray = $.unique(zoomthumbsarray);