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 11 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
浅谈React 服务器端渲染的使用
May 08 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
基于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 高手之路(二)
2006/10/09 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
python传递参数方式小结
2015/04/17 Python
浅析python协程相关概念
2018/01/20 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python运算符+与+=的方法实例
2021/02/18 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
学生出入校管理制度
2014/01/16 职场文书
模范教师事迹材料
2014/02/10 职场文书
公司拓展活动方案
2014/02/13 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2014年党委工作总结
2014/11/22 职场文书
骨干教师个人总结
2015/02/11 职场文书
项目投资意向书范本
2015/05/09 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers
PYTHON InceptionV3模型的复现详解
2022/05/06 Python