您的位置:首页 > 其它

数组的添加push()方法和删除splice() 方法 的 应用

2011-07-19 22:14 441 查看
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。此方法可把它的参数顺序添加到s arrayObject 的尾部。它直接修改 arrayObject.

splice() 方法用于插入、删除或替换数组的元素。此方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。返回的是被删除的元素的数组。 既是可直接更改数组,可以对数组的任何位置插入删除元素。

下面是个实例,实现两个功能,一:添加好友分组,二:点击任意的好友即可删除该好友。

1.首先建好框架

View Code

var tag = "";
var group = ["在线好友","我的好友","高中好友","大学好友"];
var member = [["梦无语","喜洋洋", "漠雪寒霜", "小石头"],["美羊羊","懒洋洋","千代"],["冰块","醉翁","花太香"],["繁世华灯","遗憾","叶子"]];

function createArray() {
var id ="";
for (var i = 0; i < group.length; i++) {
id = "dt"+i;
tag += "<dt id="+id+">" + group[i] + "</dt><dd><ul>";

if(i<member.length)
{
var temp = "";

for (var j = 0; j < member[i].length; j++) {
temp = "li" + i + j;
tag += "<li id = "+temp+">" + member[i][j] + "</li>";
}
}
tag += "</ul></dd>";
}

tag = "<dl id='dlist'>" + tag + "</dl>";
var box = document.getElementById("box");
box.innerHTML = tag;

addClick();   //添加分组里的好友成员
removeClick();//删除
}

function addGroup() {
var btn2 = document.getElementById("btn2");

btn2.onclick = function () {
tag="";//清空
var name = window.prompt("please enter your groupname", "");

if(name == "" || name == null){
name ="新添分组";
} else if(name == null) {
return false;
}
group.push(name);    //添加元素到数组的末尾
createArray();        //重新创建数组
addClick();            //调用 添加好友的函数
};
}

function addClick() {
//添加分组里的好友成员
for (var i = 0; i < group.length; i++) {
if (i < member.length) {
var newMember = new Array();

member.push(newMember);

}
clickEve(i);
}
}

//解决上面的闭包问题。
function clickEve(n) {
var dtId = document.getElementById("dt"+n);

dtId.onclick = function() {
var memberName = window.prompt("please write your firend's names", "");

if (memberName == "") {
memberName = "新的好友";
} else if(memberName == null) {
return false;
}
member
.push(memberName);

tag = "";    //重新创建之前都要 清空
createArray();

}
}

function removeClick() {
for (var i = 0; i < group.length; i++) {
if( i < member.length) {
pro(i);
}
}
}

function pro(m) {

for(var j = 0; j < member[m].length; j++) {
removeEle(m, j);
}
}
function removeEle(m, n) {
var liId = document.getElementById("li" + m + n);

liId.onclick = function() {
member[m].splice(n, 1);   //删除
tag = "";
createArray();         //重新创建一次。
}
}

window.onload = function() {

var btn = document.getElementById("btn1");
btn.onclick = function() {
createArray();
}

addGroup();//添加分组
}


具体效果就要自己亲自动手 实验下了。这里不多说了,其中我做的过程中,遇到了几点问题,我是个初学者,所以每次总是犯这几点错误。

第一: 每次添加元素后,alert 一下该数组,都可以读取到数组的元素,然后在页面中没有看到新添的元素,没想到去重新创建面板列表来读取元素,这里push方法返回的新的长度,所以,每次添加的时候都要再创建一次列表 来重新读取数组的元素。

第二: 在添加click事件时,我直接是用group[i].onclick = function() {} 谁知道没反应,怎么测试都没反应,最后我的理解是数组里的元素是字符串,所以不能用onclick事件。 所以只好分组每个都加个id,我是个初学者,知识面狭窄,如果你有更好的方法,可以给我提下你的宝贵意见。

第三:没加判断,如果新添加分组 “在线好友”, 我想要 在里面再添加几个 好友,这时 会出现member[i] undefined 错误,最后分析了好久才知道,二维数组里的元素本来就是个数组, 想在里面添加新的元素,必须先创建一个数组,然后在添加元素,

function addClick() {
//添加分组里的好友成员
for (var i = 0; i < group.length; i++) {
if (i < member.length) {
var newMember = new Array(); //新建个数组对象,然后 添加到 member二维数组里。

member.push(newMember);

}
clickEve(i);
}
}

第四: 删除这块,还有其他方法,关于splice 和slice的 两个的用法, 我更喜欢splice的用法、或许是因为它可以直接对数组进行更改的原因吧。。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: