模仿JavaScript数组对象的结构 [英] Mimic the structure of a javascript array object
问题描述
所以我一直感兴趣的使用我的HTMLCollection对象的拼接功能。
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆LT;标题＆GT;收藏与LT; /标题＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体GT;\r
＆LT; DIV ID =清单＆GT;\r
＆LT; DIV的风格=背景色：lightblue＆GT; ITEM1和LT; / DIV＆GT;\r
＆LT; DIV＆GT;＆ITEM2 LT; / DIV＆GT;\r
＆LT; DIV的风格=背景色：lightblue＆GT;项目3＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT;按钮的onclick =BtnColourItem2_Click（）＆GT;颜色项目2＆LT; /按钮＆GT; \r
让我们假设名单是由像ASP.Net
服务器端语言生成 函数BtnRemoveItem2_Click（）
{
VAR列表=的document.getElementById（名单）;
清单[1] .style.backgroundColor =LightBlue
//list.splice(1,1)//goal颜色的第二项和recolour其他人白
对（列表中的项目VAR）
清单[项目] .style.backgroundColor =白;
}
现在，如果这是一个数组拼接方法会存在，我可以使用它。
的注：我已经通过按单独的div到一个实际的数组拼接不需要一个有成就的功能的
我已经试过这样：
list.trunc = [] .splice;
list.trunc（1，1）;
对（在列表项）
的console.log（item.innerText）;
//结果
// ITEM1
// ITEM2
//项目3
给我任何错误，但没有工作。
所以我扔了一起：
newList =新的对象（）;
newList.trunc = [] .splice;
newList.push = [] .push;
newList.push（名单[0] .innerText）;
newList.push（名单[1] .innerText）;
newList.push（名单[2] .innerText）;
newList.splice（1,1）;
的console.log（newList）;
//输出{0：ITEM1，1：项目3}
我发现，很凉爽。
因此，这里是我的问题。
你如何构造一个对象数组一样足以让拼接功能，无需使用用于输入阵列项目推或方法来工作？
发现了它。
感谢@保罗小号
看来的Jscript将使拼接函数的一个物体上的呼叫。我想，以前是这样的：
VAR OBJ =新的对象（）;
物镜[0] =ITEM1;
物镜[1] =ITEM2;
物镜[2] =项目3;
obj.trunc = [] .splice;
obj.trunc（1,1）;
的console.log（OBJ）;
//输出
//对象{0：ITEM1，1：ITEM2，2：项目3，TRUNC：功能}
但我没加length属性，所以增加了code以上：
VAR countNum = 0;
对于（OBJ中的VAR项）
！isNaN（parseFloat（项目）countNum ++：;
obj.length = countNum; // NUM索引的属性数量
obj.trunc（1,1）;
的console.log（OBJ）;
//输出
//对象{0：ITEM1，1：项目3，TRUNC：功能}
所以只要结构是数指数和具有的长度属性剪接功能将在它的工作
因此在JavaScript数组中的数据结构是对性能的依赖：
- 若干指数
- 长度
So I've been interested in using the splice function on my HTMLCollection Object.
<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>
Lets assume the list was generated by a server side language like 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";
}
Now if this was an array the splice method would exist and I could use it.
note: I've accomplished the functionality by pushing the seperate divs into an actual array to splice the one not needed.
I have tried this:
list.trunc = [].splice;
list.trunc(1, 1);
for(item in list)
console.log(item.innerText);
//results were
//item1
//item2
//item3
Gave me no errors but didnt work. So I threw this together:
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"}
I found that quite cool. So here is my question. How do you structure an object Array-like enough to get the splice function to work without need to use the push or methods used to enter Array items?
Found it. Thanks @Paul S It seems Jscript will allow the call of the splice function on an object. I tried that before like this:
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}
but I did not add the length property, so adding to the code above:
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}
so as long as the structure is number-index and has a length property the splice function will work on it.
Therefore the data structure of an array in javascript is reliant on the properties :
- number index
- length
这篇关于模仿JavaScript数组对象的结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
