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程序设计有所帮助。

时间: 2015-08-03

JavaScript数组对象赋值用法实例

本文实例讲述了JavaScript数组对象赋值用法.分享给大家供大家参考.具体如下: 这里JavaScript数组对象的使用会使你的JS程序变得简洁而有效率,但是好像不少新手都不喜欢用数组,因为觉得它们抽象,不好理解,其实只要你认真领悟,它就像捅破窗户纸一样,令你豁然开朗.希望通过本实例,你对数组会有更多的理解. 运行效果图如下: 具体代码如下: <html> <head> <meta http-equiv="content-type" content=&

浅谈Javascript数组的使用

上一篇说了数组的索引,这一篇说下数组的使用. 数组的大小 js的数组可以动态调整大小,更确切点说,它没有数组越界的概念,a[a.length]没什么问题.比如声明一个数组a = [1, 3, 5],现在的数组大小是3,最后一个元素的索引是2,但是你依然可以使用a[3],访问a[3]返回的是undefined,给a[3]赋值:a[3] = 7,是给数组a添加了一个元素,现在数组a的长度是4了.你可以试试把下面这段代码放到浏览器里运行下: var a = []; for(int i = 0; i <

JavaScript通过select动态更换图片的方法

本文实例讲述了JavaScript通过select动态更换图片的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码在select列表变化时触发SetBeerIcon()函数,SetBeerIcon()函数可以根据select选择的值动态修改图片 ... <script language="JavaScript" type="text/javascript" > function setBeerIcon() { var beerIcon = doc

javascript数组去重的六种方法汇总

面试前端必须准备的一个问题:怎样去掉Javascript的Array的重复项.据我所知,百度.腾讯.盛大等都在面试里出过这个题目. 这个问题看起来简单,但是其实暗藏杀机. 考的不仅仅是实现这个功能,更能看出你对计算机程序执行的深入理解. 我总共想出了三种算法来实现这个目的: Array.prototype.unique1 = function() { var n = []; //一个新的临时数组 for(var i = 0; i < this.length; i++) //遍历当前数组 { //

JavaScript实现将数组数据添加到Select下拉框的方法

本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D

javascript数组排序汇总

javascript数组排序汇总 //排序算法 window.onload = function(){ var array = [0,1,2,44,4, 324,5,65,6,6, 34,4,5,6,2, 43,5,6,62,43, 5,1,4,51,56, 76,7,7,2,1, 45,4,6,7,8]; //var array = [4,2,5,1,0,3]; console.log('原始数组'); console.log(array); array = sorting.shellSort

javascript模拟select,jselect的方法实现

由于主流浏览器对select元素渲染不同,所以在每种浏览器下显示也不一样,最主要的是默认情况下UI太粗糙,即使通过css加以美化也不能达到很美观的效果.这对于我们这些专注于UX的前端开发人员是无法容忍的.于是在项目不太忙的时候,就计划写一个模拟的select控件出来.接下来就把实现的细节.遇到的问题以及如何使用和大家分享一下. 1. 实现细节 init: function(context) { //获取指定上下文所有select元素 var elems = squid.getElementsBy

javascript实现数组中的内容随机输出

有时候我们可能需要从数组中随机抽出一项内容,下面就通过一段代码实例介绍一下如何实现此效果. 代码如下: <script type="text/JavaScript"> var theArray=new Array(); theArray[0]="我们"; theArray[1]="我们一"; theArray[2]="我们二"; theArray[3]="我们三"; theArray[4]=&q

javascript中数组方法汇总

js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "ccc"; //alert(arr.length);//3 arr.pop(); //alert(arr.length);//2 //alert(arr[arr.length-1]);//bbb arr.pop(); //al

javascript实现无限级select联动菜单

代码很简单,这里主要是给大家推荐一下本代码的实现思路,别具一格. 奉上代码: 复制代码 代码如下: <!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"&g

琥珀无限级分类联动菜单AJAX版

我做好琥珀无限级分类联动菜单Javascript版后,在蓝色理想和CSDN上发表了一下,梅花雪兄在CSDN上提出了效率不足的问题,我也认识到了这一点,本打算项目完工后再进行完善,但一时技痒,便在网上寻找了一下资料,最后做出了此AJAX版无限级分类联动菜单.因时间匆忙,做得比较粗糙,但已利用AJAX技术,实现无限级联动,待过一段时间再完善此版本.希望能给大家提供一些帮助,有好的建议或bug可在此帖后回复或浏览http://www.51ajax.com/bbs/发帖.运行环境:MS IE 6.0 F

JS简单实现多级Select联动菜单效果代码

本文实例讲述了JS简单实现多级Select联动菜单效果代码.分享给大家供大家参考.具体如下: JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-select-ld-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD

Angular.JS实现无限级的联动菜单(使用demo)

前言 之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章,但没来得及和大家分享使用的示例,下面这篇文章就来给大家分享下几个使用的demo. 文中包括demo如下: 1. 同步加载子选项demo 2. 异步加载子选项demo 3. 初始值回填demo 4. 倒金字塔依赖demo 注意:在阅读本文前请先移步上一篇文章:http://www.jb51.net/article/78126.htm 1. 同步加载子选项 在各联动菜单加载之前,我们已经通过某种方式(比如后端渲染.api依赖

js实现简单的联动菜单效果

本文实例讲述了js实现简单的联动菜单效果.分享给大家供大家参考.具体如下: 这是一个最简单的js联动菜单代码,在DW里可以自动生成,不想在DW里生成的话,把此份代码拷贝下拉修改也可以.网页上常用到一种Select联动菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ld-menu-codes/ 具体代码如下: <html> <head> <title>简单的Select联动菜单代码</ti

琥珀无限级联动菜单-JavaScript版

琥珀网 - javascript无限级联动菜单 body, td { font-family: 宋体; font-size: 12px; } /*---------------------------------------------------------------------------*\ | Subject: JavaScript三级联动菜单 | | Version: 1.0 | | Author: 琥珀[hopesoft] | | FileName: HPMenu.js | | C

javascript实现省市区三级联动下拉框菜单

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/

基于Javascript实现二级联动菜单效果

本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下 效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]

JavaScript实现三级联动菜单实例代码

本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧. 用javascript制作的一个简单三级联动,非常简单实用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省: <select style="

JavaScript实现的联动菜单特效示例

本文实例讲述了JavaScript实现的联动菜单特效.分享给大家供大家参考,具体如下: 博主昨天发布了一篇关于JavaScript特效的文章,今天呢给大家带来联动菜单特效,这可能是一个系列哦! 效果图 和以前一样,先发效果图,然后在进行讲解. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible&q