<!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. VMware Integrated OpenStack (VIO)简介

    VMware Integrated OpenStack是一款由VMware提供支持的OpenStack发行版软件,用于帮助IT在现有的VMware基础架构之上更加轻松地运行基于生产级OpenStack ...

  2. [原创]java WEB学习笔记39：EL中的运算符号(算术运算符，关系运算符，逻辑运算符，empty运算符，条件运算符，括号运算符)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  3. Vim的map

    linux系统下.vimrc文件(这个文件可以在家目录新建): 这个文件记录着vim的配置信息: 如: "显示行号 set number "键映射map “如按F5,在word的前 ...

  4. [算法]Rotate Array

    You may have been using Java for a while. Do you think a simple Java array question can be a challen ...

  5. POJ 2230 Watchcow 【欧拉路】

    Watchcow Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 6336   Accepted: 2743   Specia ...

  6. bootstraptable的 showFooter属性

    如果想在表格最下面显示统计的信息可以使用这个属性  首先 先在表格加上这个属性 showFooter:true, 然后 在需要的列里面新增属性 footerFormatter  设置列的名称 然后在需 ...

  7. java的远程访问接口的实例

    被别人远程调用和自己远程调用别人接口的理解: 被别人调用接口:其实没有什么神秘的,就是我们写一个正常的方法提供一个访问路径. 调用别人的接口:本质时一个Request请求,实际要使用到javax.ne ...

  8. Oracle创建函数

    --创建函数语法 create [or replace] function [schema.]function_name (函数参数列表) --参数有IN.OUT.IN OUT三种类型:IN代表需要输 ...

  9. 仿联想商城laravel实战---7、lavarel中如何给用户发送邮件

    仿联想商城laravel实战---7.lavarel中如何给用户发送邮件 一.总结 一句话总结: 设置邮件服务器,比如163邮箱 lavarel中配置邮件服务,在.env中 控制器中使用Mail对象发 ...

  10. leetcode 201. Bitwise AND of Numbers Range(位运算,dp)

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...