<!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>数组练习：各种数组方法的使用</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 value="删除January(1)" type="button">

 <input value="删除December(12)" type="button">

<div>0,1,2,3,4,5,6,7,8,9</div>

 <input value="复制" type="button">

<input value="还原" type="button">

 <div>red,green,blue,white,yellow,black,brown</div>

 <input value="还原" type="button">

 <input value="删除前三项" type="button">

 <input value="删除第二至三项" type="button">

 <input value="在第二项后插入(orange, purple)" type="button">

 <input value="替换第二项和第三项" type="button">

</body></html>

　　

js---数组习题---的更多相关文章

  1. 小兔JS教程（四）-- 彻底攻略JS数组

    在开始本章之前,先给出上一节的答案,参考答案地址: http://www.xiaotublog.com/demo.html?path=homework/03/index2 1.JS数组的三大特性 在J ...

  2. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  3. 转→js数组遍历 千万不要使用for...in...

    看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

  4. js数组操作大全

    原文(http://www.cnblogs.com/webhotel/archive/2010/12/21/1912732.html) 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简 ...

  5. js数组去重的4种方法

    js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...

  6. js 数组处理函数

    本文转载自有有<js 数组处理函数> concat 将参数列表连接到原数组后面形成一个新的数组并返回,原有数组不受影响. var arr = ["a","b& ...

  7. js 数组赋值问题 ：值传递还是引用？

    转载于知乎var a = [1,2,3]; var b = a; a = [4,5,6]; alert(b); //[1,2,3] 面试时被问到这样一个问题,竟然从来没试过... 当时直接的理解,数组 ...

  8. JS数组方法汇总 array数组元素的添加和删除

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

  9. js数组操作

    用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手,一下狠心,我学! ...

  10. js数组操作【转载】

    用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵 ...

随机推荐

  1. Python读属性文件

    # coding:utf-8 class Properties: def __init__(self, file_name): self.file_name = file_name self.prop ...

  2. did not find a matching property (tomcat+Eclipse 报错)

    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclips ...

  3. oracle decode的用法

    需求:分别统计emp表中1980,1981,1982,1987年入职的同事的数量. 这里用decode很容易就解决了: select sum(t.num_1980) as "1980&quo ...

  4. shell if判断-n

    test测试命令 test命令用于检查某个条件是否成立,它可以进行数值.字符串和文件三个方面的测试,其测试符和相应的功能分别如下: (1)数值测试: -eq:等于则为真        -ne:不等于则 ...

  5. 求阶乘，输入一个正整数 n，输出n！

    #include<stdio.h>int factorial (int n); int main(){ int n; scanf("%d",&n); print ...

  6. PHP数组各种操作与函数汇总

    对于Web编程来说,最重要的就是存取和读写数据了.存储方式可能有很多种,可以是字符串.数组.文件的形式等.数组,可以说是PHP的数据应用中较重要的一种方式.PHP的数组函数众多,下面是我学习的小结,借 ...

  7. 每天一个Linux命令（19）find命令_初识

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.     (1)用法: 用法: find pathname    -option      [-print | -exec | -ok] ...

  8. python用特殊方法定制类（不全）

    定义在class中不需要直接调用,python的某些函数或操作符会自动的调用对应的特殊方法. 1.python中 __str__和__repr__ __str__()用于显示给用户,而__repr__ ...

  9. Linux电源管理(2)-Generic PM基本概念和软件架构【转】

    本文转载自:http://www.wowotech.net/pm_subsystem/generic_pm_architecture.html 1. 前言 这里的Generic PM,是蜗蜗自己起的名 ...

  10. ibdata1文件非常大如何解决,ibdata单独存储

    启用独立表空间innodb_file_per_table(如果这个参数没有开启,mysql会将数据.索引.元数据都存入到ibdata中的) 数据表 表索引 MVCC(多版本并发控制)数据 回滚段 撤销 ...