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

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

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

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

1.首先建好框架

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组</title>
<style type="text/css">
body
{ font-size: 12px; }
body, div, dl, dt, dd
{ margin: 0;}
li
{ list-style: none; }

#button
{ width: 960px; height: 40px; margin: 0 auto; padding-top: 15px; }
.wrap
{ width: 960px; margin: 0 auto; }
.list dt
{ heihgt: 26px; font-size: 13px; font-weight: bold; line-height: 26px; }
.list dd
{ display:none;}

</style>
</head>
<body>
<div id = "button">
<input type = "button" id="btn1" value="添加数据"/>
<input type = "button" id="btn2" value="添加好友分组"/>
</div>
<div class="wrap" id="box">

</div>
</body>
</html>

然后就是js 文件了。 这里我们首先定义两个数组 一个是分组数组 group , 一个是成员数组 member, 这两个数组是相对应的,因此member是一个二维数组, 然后对数组添加新的元素 或者删除元素 每次的添加和删除后都要清空一下,重新创建数组,从而得到才得到添加/删除后新的数组。

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[n].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)