数组的添加push()方法和删除splice() 方法 的 应用
2011-07-19 22:14
441 查看
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。此方法可把它的参数顺序添加到s arrayObject 的尾部。它直接修改 arrayObject.
splice() 方法用于插入、删除或替换数组的元素。此方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。返回的是被删除的元素的数组。 既是可直接更改数组,可以对数组的任何位置插入删除元素。
下面是个实例,实现两个功能,一:添加好友分组,二:点击任意的好友即可删除该好友。
1.首先建好框架
View Code
具体效果就要自己亲自动手 实验下了。这里不多说了,其中我做的过程中,遇到了几点问题,我是个初学者,所以每次总是犯这几点错误。
第一: 每次添加元素后,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的用法、或许是因为它可以直接对数组进行更改的原因吧。。。
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的用法、或许是因为它可以直接对数组进行更改的原因吧。。。
相关文章推荐
- splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
- splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
- JS之数组删除/添加项目方法splice
- JS数组方法汇总 array数组元素的添加和删除
- jquery中找到元素在数组中位置,添加或者删除元素的新方法
- JS数组方法汇总 array数组元素的添加和删除
- JS数组方法汇总 array数组元素的添加和删除
- 数组—添加删除方法
- JS数组方法汇总 array数组元素的添加和删除
- (转载)php数组添加、删除元素的方法
- JS数组array元素的添加和删除方法代码实例
- JS数组方法汇总 array数组元素的添加和删除
- JS 数组array方法push, pop, unshift, shift, slice,splice,contact, join, sort
- JavaScript使用push方法添加一个元素到数组末尾用法实例
- JS数组方法汇总 array数组元素的添加和删除
- js中常用数组方法concatjoinpushpopslicesplice
- JS数组方法汇总 array数组元素的添加和删除
- Js数组的方法pop,push,unshift,splice,shift
- PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
- PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)