追加子项不适用于串联数组项

Question

我已经查询了

DOM

获取具有特定标签（项目）的所有

DOM

元素，并将它们存储在数组中。然后，我克隆了该数组，并将克隆的 2 个副本连接到数组中，基本上将元素数量从 20 个增加到 60 个。因此，完成后，我得到了一个包含 60 个元素的新数组。当我尝试循环遍历这 60 个元素并用父 div 包围其中每 6 个元素时，

appendChild

方法不会追加连接到数组的副本。它仅适用于原始 20 个，我假设它们来自原始克隆。

function buildProductsList_() {
  var concatNumber = 1;
  cloneItemArray = baseItemElementsByAttribute.slice();

  if (baseItemElementsCount % baseItemElementsPerSlide == 0) {
    return false;
  }

  while (baseItemElementsCount * concatNumber %
      baseItemElementsPerSlide != 0) {
    concatNumber++;
  }

  for (i = 0; i < concatNumber; i++) {
    newItemList = newItemList.concat(cloneItemArray);
  }

  newItemListCount = newItemList.length;
  offsetFrameCount = newItemListCount % baseItemElementsPerSlide;
}

function constructCarouselSlides_() {

  for (i = 0; i < newItemListCount; i += baseItemElementsPerSlide) {
    var offset = baseItemElementsPerSlide;

    if (offsetFrameCount + i == newItemListCount) {
      offset = offsetFrameCount;
    }

    var section = newItemList.slice(i, i + offset);
    var itemsClones = itemsInstance.cloneNode();

    for (j = 0; j < section.length; j++) {
      itemsClones.appendChild(section[j]);
    }

    carouselContainer.appendChild(itemsClones);
  }
}

前 6 个 items 元素没有附加任何 item 元素。它似乎只对原始的 20 个项目元素有效。

Answer 1

使用

.slice()

制作 DOM 元素数组的副本不会创建新的 DOM 元素。 它只是创建第二个数组，其中包含对同一组 DOM 元素的引用。 因此，当您尝试从克隆数组中附加相同的 DOM 元素引用时，它只是将它们从原来的位置移动。

如果您想要新创建的 DOM 元素的新数组，则必须克隆数组中的每个元素才能实际创建一组新的 DOM 元素。 这是一个将克隆 DOM 节点数组的函数：

function cloneDOMArray(arr) {
    return arr.map(function(item) {
        return item.cloneNode();
    });
}

它返回克隆节点的数组。

---

更多说明：

其核心是在 Javascript 中，通过复制值来分配诸如数字或布尔值之类的原语。

var a = 2;
var b = a;
a = 3;
console.log(a);   // 3 (shows the newly assigned value)
console.log(b);   // 2 (it has a copy of the original value of a)

但是，Javascript 中的对象（包括 DOM 对象）是通过指针分配的：

var x = document.createElement("div");
x.innerHTML = "Hello";
var y = x;
x.innerHTML = "Goodbye";
console.log(y.innerHTML);   // "Goodbye"
console.log(x.innerHTML);   // "Goodbye"

因此，当您将一个对象分配给两个不同的变量时，每个变量都指向完全相同的对象。 如果您修改该对象，您将通过两个变量看到该修改（因为它们都指向完全相同的对象）。

因此，如果您有一个 DOM 元素引用数组，然后使用

.slice()

制作该数组的副本，那么您将只有两个数组，其中包含完全相同的 DOM 元素引用集。

var x = document.getElementById("one");
var y = document.getElementById("two");
var items = [x,y];
var copyItems = items.slice(0);
console.log(items[0] === copyItems[0]);    // true, same element reference

因此，当您将一个对象分配给第二个变量并且希望第二个变量包含该对象的副本时，您必须显式创建一个副本。 如何最好地进行复制取决于对象（对于 DOM 元素引用数组与其他元素的数组，您的做法会有所不同）。