javascript各种数组方法举例(js数组赋值、js数组删除)
发布时间：2015-06-09 编辑：jiaochengji.com
本文介绍了js各种数组方法的实例，一个按钮对应不同的数组功能，掌握下js数组赋值、数组删除等操作方法，有需要的朋友参考下。
例子，javascript数组方法综合实例。
复制代码 代码示例:
<!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>数组练习：各种数组方法的使用_www.jiaochengji.com</title>
<style>
div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 courier new;word-wrap:break-word;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var adiv = document.getelementsbytagname("div");
var ainput = document.getelementsbytagname("input");
var i = 0;
var bs1 = bs2 = true;
var atmp = [];
//js数组删除/添加第一项
ainput[0].onclick = function ()
{
atmp = getarray(adiv[0].innerhtml);
bs1 ?
//删除第一项， shift()方法
(atmp.shift(), this.value = this.value.replace("删除","添加"), bs1 = false) :
//添加第一项, unshift()方法
(atmp.unshift("january(1)"), this.value = this.value.replace("添加","删除"), bs1 = true);
//输出
adiv[0].innerhtml = atmp.join()
};
//删除/添加最后一项
ainput[1].onclick = function ()
{
atmp = getarray(adiv[0].innerhtml);
bs2 ?
//删除最后一项, pop()方法
(atmp.pop(), this.value = this.value.replace("删除","添加"), bs2 = false) :
//添加最后一项, push()方法
(atmp.push("december(12)"), this.value = this.value.replace("添加","删除"), bs2 = true);
//输出
adiv[0].innerhtml = atmp.join()
};
//复制, concat()方法
ainput[2].onclick = function ()
{
atmp = getarray(adiv[1].innerhtml);
//输出
adiv[1].innerhtml = atmp.concat(atmp).tostring().replace(/\s/g,"")
};
//还原, 利用数组的 length 特点
ainput[3].onclick = function ()
{
atmp = getarray(adiv[1].innerhtml);
//设置数组长度
atmp.length = 10;
//输出
adiv[1].innerhtml = atmp.join()
};
//第三组数据还原
ainput[4].onclick = function ()
{
atmp = ["red","green","blue","white","yellow","black","brown"];
//输出
adiv[2].innerhtml = atmp.join()
};
//删除前三项
ainput[5].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//删除, 0开始, 删除3个
atmp.splice(0, 3);
//输出
adiv[2].innerhtml = atmp.join()
};
//删除第二至三项
ainput[6].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//删除, 2开始, 删除2个
atmp.splice(1, 2);
//输出
adiv[2].innerhtml = atmp.join()
};
//在第二顶后插入"orange", "purple"
ainput[7].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//插入, 2开始, 插入"orange", "purple"
atmp.splice(1, 0, "orange", "purple");
//输出
adiv[2].innerhtml = atmp.join()
};
//替换第二项和第三项
ainput[8].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//插入, 2开始替换
atmp.splice(1, 2, "#009900", "#0000ff");
//输出
adiv[2].innerhtml = atmp.join()
};
//将div中的内容转为数组
//str div对象
function getarray(str)
{
atmp.length = 0;
str = str.split(",");
for (var i in str)atmp.push(str[i]);
return atmp
}
}
</script>
</head>
<body>
<div>january(1),february(2),march(3),april(4),may(5),june(6),july(7),aguest(8),september(9),october(10),november(11),december(12)</div>
<input type="button" value="删除january(1)" />
<input type="button" value="删除december(12)" />
<div>0,1,2,3,4,5,6,7,8,9</div>
<input type="button" value="复制" />
<input type="button" value="还原" />
<div>red,green,blue,white,yellow,black,brown</div>
<input type="button" value="还原" />
<input type="button" value="删除前三项" />
<input type="button" value="删除第二至三项" />
<input type="button" value="在第二项后插入(orange, purple)" />
<input type="button" value="替换第二项和第三项" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>数组练习：各种数组方法的使用_www.jiaochengji.com</title>
<style>
div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 courier new;word-wrap:break-word;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var adiv = document.getelementsbytagname("div");
var ainput = document.getelementsbytagname("input");
var i = 0;
var bs1 = bs2 = true;
var atmp = [];
//js数组删除/添加第一项
ainput[0].onclick = function ()
{
atmp = getarray(adiv[0].innerhtml);
bs1 ?
//删除第一项， shift()方法
(atmp.shift(), this.value = this.value.replace("删除","添加"), bs1 = false) :
//添加第一项, unshift()方法
(atmp.unshift("january(1)"), this.value = this.value.replace("添加","删除"), bs1 = true);
//输出
adiv[0].innerhtml = atmp.join()
};
//删除/添加最后一项
ainput[1].onclick = function ()
{
atmp = getarray(adiv[0].innerhtml);
bs2 ?
//删除最后一项, pop()方法
(atmp.pop(), this.value = this.value.replace("删除","添加"), bs2 = false) :
//添加最后一项, push()方法
(atmp.push("december(12)"), this.value = this.value.replace("添加","删除"), bs2 = true);
//输出
adiv[0].innerhtml = atmp.join()
};
//复制, concat()方法
ainput[2].onclick = function ()
{
atmp = getarray(adiv[1].innerhtml);
//输出
adiv[1].innerhtml = atmp.concat(atmp).tostring().replace(/\s/g,"")
};
//还原, 利用数组的 length 特点
ainput[3].onclick = function ()
{
atmp = getarray(adiv[1].innerhtml);
//设置数组长度
atmp.length = 10;
//输出
adiv[1].innerhtml = atmp.join()
};
//第三组数据还原
ainput[4].onclick = function ()
{
atmp = ["red","green","blue","white","yellow","black","brown"];
//输出
adiv[2].innerhtml = atmp.join()
};
//删除前三项
ainput[5].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//删除, 0开始, 删除3个
atmp.splice(0, 3);
//输出
adiv[2].innerhtml = atmp.join()
};
//删除第二至三项
ainput[6].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//删除, 2开始, 删除2个
atmp.splice(1, 2);
//输出
adiv[2].innerhtml = atmp.join()
};
//在第二顶后插入"orange", "purple"
ainput[7].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//插入, 2开始, 插入"orange", "purple"
atmp.splice(1, 0, "orange", "purple");
//输出
adiv[2].innerhtml = atmp.join()
};
//替换第二项和第三项
ainput[8].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//插入, 2开始替换
atmp.splice(1, 2, "#009900", "#0000ff");
//输出
adiv[2].innerhtml = atmp.join()
};
//将div中的内容转为数组
//str div对象
function getarray(str)
{
atmp.length = 0;
str = str.split(",");
for (var i in str)atmp.push(str[i]);
return atmp
}
}
</script>
</head>
<body>
<div>january(1),february(2),march(3),april(4),may(5),june(6),july(7),aguest(8),september(9),october(10),november(11),december(12)</div>
<input type="button" value="删除january(1)" />
<input type="button" value="删除december(12)" />
<div>0,1,2,3,4,5,6,7,8,9</div>
<input type="button" value="复制" />
<input type="button" value="还原" />
<div>red,green,blue,white,yellow,black,brown</div>
<input type="button" value="还原" />
<input type="button" value="删除前三项" />
<input type="button" value="删除第二至三项" />
<input type="button" value="在第二项后插入(orange, purple)" />
<input type="button" value="替换第二项和第三项" />
</body>
</html>
您可能感兴趣的文章：
js数组操作(js数组创建、js数组访问等)
JS array 数组用法详解
js 删除数组的几种方法
javascript各种数组方法举例(js数组赋值、js数组删除)
js数组赋值实例
js删除数组元素、清空数组的方法
js数组赋值小例子
js split函数用法示例
php为js数组赋值方法
js 删除数组中重复元素的方法分享
上一篇：js 3秒后跳转页面实例代码
下一篇：javascript数组对象赋值示例
[关闭]