时间戳

首页 > 解决方案 > For循环中途重复

javascript - For循环中途重复

问题描述

我有一组按降序排列的图像。我想将该数组设置为我网站上的图像列表。在设置图像的 for 循环期间，它正好通过 for 循环的一半，然后从中间开始反转循环并返回开始。

function sortBy(sort){
  if (sort == "newold"){
    var sortedImages = Array.from(document.getElementsByTagName("img"));
    sortedImages.splice(-1,1);
    sortedImages.sort(function(a,b){
      var contentA =parseInt(a.dataset.added,10);
      var contentB =parseInt(b.dataset.added,10);
      return (contentB - contentA);
    });
    console.log(sortedImages);
    var unsortedImages = Array.from(document.getElementsByTagName("img"));
    unsortedImages.splice(-1,1);
    console.log(unsortedImages);
    for(i in sortedImages){
      console.log(sortedImages[i].dataset.added);
      unsortedImages[i].src = sortedImages[i].src;
      unsortedImages[i].alt = sortedImages[i].alt;
      unsortedImages[i].dataset.download = sortedImages[i].dataset.download;
      unsortedImages[i].dataset.added = sortedImages[i].dataset.added;
      unsortedImages[i].dataset.supports = sortedImages[i].dataset.supports;
      unsortedImages[i].dataset.maker = sortedImages[i].dataset.maker;

    }
  }
}

它应该按降序列出 dataset.added 值，每个元素都有一个从 1 开始并从那里上升的整数。 数据集列表。在 for 循环中运行时添加的值该屏幕截图顶部的数组都按正确的顺序排列，第一个是 sortedImages，第二个是 unsortedImages。

标签： javascripthtmlarraysimagesorting

解决方案

问题在这里：

unsortedImages[i].dataset.added = sortedImages[i].dataset.added;

两个数组中的 DOM 节点是相同的，并且unsortedImages[i]引用sortedImages. 您更改added节点上的属性unsortedImages，它会在 中更改sortedImages。

为避免这种情况，您可以for in使用以下代码替换循环：

const attrs = sortedImages.map(node => ({
  src: node.src,
  alt: node.alt,
  download: node.dataset.download,
  added: node.dataset.added,
  supports: node.dataset.supports,
  maker: node.dataset.maker,
}))

attrs.forEach((item, i) => {
  unsortedImages[i].src = item.src;
  unsortedImages[i].alt = item.alt;
  unsortedImages[i].dataset.download = item.download;
  unsortedImages[i].dataset.added = item.added;
  unsortedImages[i].dataset.supports = item.supports;
  unsortedImages[i].dataset.maker = item.maker;
})

推荐阅读