这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 数组各种常见用法实例分析, 包括数组的添加、删除、替换、还原等常见技巧, 非常具有实用价值, 需要的朋友可以参考下
本文实例讲述了 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>javascript各种数组方法的使用</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 = [];
- //删除/添加第一项
- 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>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0416/270147.html