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获取Form表单中被选中的radio值
Aug 09 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
jQuery实现文档树效果
Feb 20 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
mac使用python识别图形验证码功能
2020/01/10 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
软件测试笔试题
2012/10/25 面试题
班队活动设计方案
2014/01/30 职场文书
关于环保的建议书400字
2014/03/12 职场文书
2015毕业设计工作总结
2015/07/24 职场文书