Question

所以我对在HTMLCollection对象上使用拼接功能感兴趣。

＆＃13;

<html> 
  <head>
    <title>Collections</title>
  </head>
  <body>
    <div id="list">
      <div style="background-color:lightblue">item1</div>
      <div>item2</div>
      <div style="background-color:lightblue">item3</div>
    </div>
    <button onclick="BtnColourItem2_Click()">Colour Item2</button>

＆＃13;

让我们假设该列表是由ASP.Net等服务器端语言生成的

function BtnRemoveItem2_Click()
{
    var list = document.getElementById("list");
    list[1].style.backgroundColor = "LightBlue"
    //list.splice(1,1)//goal colour the second item and recolour the others to white 
    for(var item in list)
        list[item].style.backgroundColor = "white";
}

现在如果这是一个数组，splice方法就会存在，我可以使用它。

注意：我已经通过将单独的div推入实际数组来拼接不需要的数据来完成功能。

我试过这个：

list.trunc = [].splice;
list.trunc(1, 1);
for(item in list)
    console.log(item.innerText);
//results were
//item1
//item2
//item3

给我没有错误，但没有工作。所以我把它扔在一起：

newList = new Object();
newList.trunc = [].splice;
newList.push = [].push;
newList.push(list[0].innerText);
newList.push(list[1].innerText);
newList.push(list[2].innerText);
newList.splice(1,1);
console.log(newList);
//outputs { 0 : "item1" , 1 : "item3"}

我觉得很酷。所以这是我的问题。如何构建一个类似于Array的对象，以使splice函数无需使用push或用于输入Array项的方法即可工作？

Answer 1

大多数情况下，当你想要实际的数组功能时，对类似数组的对象最简单的做法是在其上调用slice()来创建一个数组：

var array = Array.prototype.slice.call(arrayLikeObject);

一旦你这样做，你将拥有一个真正的数组，并可以随心所欲地做任何事情。

您无法在实际HTMLCollection上添加或删除元素。它不允许这样的修改，这就是为什么在它上面调用splice()不起作用的原因。但是如果你从中创建一个数组，如上所示，你可以根据需要修改数组。

正如Paul S.在评论中所述，HTMLCollection是“实时”并且动态更新以反映DOM的当前状态。这就是为什么你不能手动改变它。如果将它放入数组中，数组将不会动态更新以适应DOM更改，但大多数时候我认为人们希望数组保持静止而不会在一个人的鼻子下面进行更改。

Answer 2

找到它。谢谢@Paul S. 似乎Jscript将允许在一个对象上调用splice函数。我之前尝试过这样：

var obj = new Object();
obj[0] = "item1";
obj[1] = "item2";
obj[2] = "item3";
obj.trunc = [].splice;
obj.trunc(1,1);
console.log(obj);
//outputs
//Object {0: "item1", 1: "item2", 2: "item3", trunc: function}

但我没有添加length属性，所以添加到上面的代码：

var countNum = 0;
for (var item in obj)
    !isNaN(parseFloat(item)? countNum++ : "";
obj.length = countNum;//number of num-indexed properties 
obj.trunc(1,1);
console.log(obj);
//outputs
//Object {0: "item1", 1: "item3", trunc: function}

只要结构是数字索引并且具有长度属性，拼接功能就可以使用它。

因此，javascript中数组的数据结构依赖于属性：

数字索引
长度

模仿javascript数组对象的结构

2 个答案: