JavaScript数组各种常见用法实例分析


Posted in Javascript onAugust 04, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
基于Jquery实现表单验证
Jul 20 #Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 #Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 #Javascript
javascript控制图片播放的实现代码
Jul 29 #Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 #Javascript
Javascript实现鼠标右键特色菜单
Aug 04 #Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 #Javascript
You might like
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python开发之文件操作用法实例
2015/11/13 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
商业企业管理专业求职信
2014/07/10 职场文书
结婚司仪主持词
2015/06/29 职场文书
青年志愿者活动感想
2015/08/07 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Python可视化学习之seaborn调色盘
2022/02/24 Python
python_tkinter事件类型详情
2022/03/20 Python
Python学习之时间包使用教程详解
2022/03/21 Python