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学习笔记二 实现可编辑的表格
Apr 09 Javascript
javascript截取字符串小结
Apr 28 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
浅析php工厂模式
2014/11/25 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP使用函数用法详解
2018/09/30 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python里对list中的整数求平均并排序
2014/09/12 Python
python如何实现内容写在图片上
2018/03/23 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
利用python画出折线图
2018/07/26 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python文件选择对话框的操作方法
2019/06/27 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
银行服务感言
2014/03/01 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
环保倡议书怎么写
2014/05/16 职场文书
主题团日活动总结
2014/06/25 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android