javascript各种数组方法举例(js数组赋值、js数组删除)

发布时间:2020-12-31编辑:脚本学堂
本文介绍了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.jb200.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>