gpt4 book ai didi

javascript - 模仿javascript数组对象的结构

转载 作者:行者123 更新时间:2023-11-30 10:04:50 25 4
gpt4 key购买 nike

所以我一直对在我的 HTMLCollection 对象上使用 splice 函数很感兴趣。

<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>

让我们假设列表是由像 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 插入一个实际数组来拼接不需要的 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"}

我觉得这很酷。所以这是我的问题。您如何构造一个足够类似于数组的对象来使拼接函数工作,而无需使用用于输入数组项的推送或方法?

最佳答案

大多数时候,当您需要实际的数组功能时,对类似数组的对象执行的最简单的操作是在其上调用 slice() 以创建数组:

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

一旦你这样做了,你就会有一个实际的数组并且可以用它做任何你想做的事。

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

正如 Paul S. 在下面的评论中指出的那样,HTMLCollection 是“实时的”并且会动态更新以反射(reflect) DOM 的当前状态。这就是为什么您不能手动更改它的原因。如果将它放入数组中,该数组将不会动态更新以适应 DOM 更改,但我认为大多数时候人们会希望数组保持静止并且不会在人的眼皮底下发生变化。

关于javascript - 模仿javascript数组对象的结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29701114/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com