Для цикла повторяется на полпути

Question

У меня есть массив изображений, которые отсортированы в порядке убывания. Я хочу установить этот массив в список изображений на моем сайте. Во время цикла 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 и повышающееся оттуда. список значений dataset.added при прохождении через цикл for Массивы в верхней части этого снимка экрана расположены в правильном порядке, первый - sortedImages, а второй - unsortedImages.

Answer 1

Проблема здесь:

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;
})