<!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. bug_1——oracle listagg():列转行

    select    listagg(字段名 ,',') within group (order by 字段名) from表 where 条件 listagg():列转行 WM_CONCAT():和并列 ...

  2. ubuntu14.04允许root远程链接、修改主机名

    1.设置root密码 sudo passwd root 2.修改主机名 第一步:ubuntu主机名位于/etc/hostname里,将其修改为自己需要的名称. 第二步:修改/etc/hosts文件,将 ...

  3. ubuntu下使用free命令查看内存实际占用（待补充）

    free不带选项运行会显示一个以kb为单位的默认输出 free -h人类能看懂的方式显示 free -m MB的方式显示 free -g GB方式显示 used=total-free即total=us ...

  4. Kattis - flippingcards 【并查集】

    题意 给出 N 对 数字 然后 每次从一对中 取出一个数字 判断 能否有一种取出的方案 取出的每个数字 都是不同的 思路 将每一对数字 连上一条边 然后 最后 判断每一个连通块里面 边的个数 是否 大 ...

  5. P4455 [CQOI2018]社交网络(矩阵树定理)

    题目 P4455 [CQOI2018]社交网络 \(CQOI\)的题都这么裸的吗?? 做法 有向图,指向叶子方向 \(D^{out}(G)-A(G)\) 至于证明嘛,反正也就四个定理,先挖个坑,省选后 ...

  6. Network IP Availability Extension

    可以查询网络的IP使用情况 neutron net-ip-availability-list neutron net-ip-availability-show GET /v2.0/network-ip ...

  7. Spark- RDD持久化

    官方原文: RDD Persistence One of the most important capabilities in Spark is persisting (or caching) a d ...

  8. Codeforces 402D Upgrading Array：贪心 + 数学

    题目链接:http://codeforces.com/problemset/problem/402/D 题意: 给你一个长度为n的数列a[i],又给出了m个“坏质数”b[i]. 定义函数f(s),其中 ...

  9. 分享知识-快乐自己：Spring切入点的表达式和通知类型

    1.切入点的表达式 表达式格式: execution([修饰符] 返回值类型 包名.类名.方法名(参数)) 其他的代替: <!-- 完全指定一个方法 --> <!-- <aop ...

  10. POJ 3126 Prime Path（BFS算法）

    思路:宽度优先搜索(BFS算法) #include<iostream> #include<stdio.h> #include<cmath> #include< ...