数组练习：各种数组方法的使用

<!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);if(bS1){// shift删除第一个元素，并返回它的值
            aTmp.shift();this.value = this.value.replace('删除','添加');bS1 = false;}else{//unshift头部添加，返回新的长度
            aTmp.unshift('January(1)');        this.value = this.value.replace('添加','删除');bS1 = true;}// 将aTmp字符串拼接起来，放到第一个div里面
        aDiv[0].innerHTML = aTmp.join();};// 删除/添加最后一项
    aInput[1].onclick = function(){aTmp = getArray(aDiv[0].innerHTML);if(bS2){// pop删除最后一个元素，并返回它的值
            aTmp.pop();this.value = this.value.replace('删除','添加');bS2 = false;}else{//push尾部添加，返回新的长度
            aTmp.push('December(12)');this.value = this.value.replace('添加','删除');bS2 = true;}aDiv[0].innerHTML = aTmp.join();};//复制, concat()方法【concat() 方法用于连接两个或多个数组】
    aInput[2].onclick = function(){aTmp = getArray(aDiv[1].innerHTML);// \s   匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。// \g   全文匹配
        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开始, 删除0个，插入"orange", "purple"
        aTmp.splice(1,0,'orange','purple');alert(aTmp);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>

转载于:https://www.cnblogs.com/bokebi520/p/4983955.html

数组练习：各种数组方法的使用相关推荐

JavaScript 数组排序及查找数组中最大值最小值方法
JavaScript 数组排序方法及查找最大值最小值方法 1. sort()方法排序 1.1 方法介绍 1.2 语法:arr.sort([compareFunction]) 1.3 参数说明 1.4 ...
python求无序列表中位数_python 实现在无序数组中找到中位数方法
一.问题描述 1.求一个无序数组的中位数, (若数组是偶数,则中位数是指中间两个数字之和除以2,若数组是奇数,则中位数是指最中间位置.要求:不能使用排序,时间复杂度尽量低 2.例如:lists = [ ...
php遍历数组哪个效率高,PHP遍历数组的三种方法及效率对比分析
PHP遍历数组的三种方法及效率对比分析发布于 2015-03-04 21:55:27 | 129 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
学习笔记之三(数组中的一些方法)
这是我在自学过程中看到的一些方法,如果对你有帮助,万分荣幸 <!DOCTYPE html> <html><head><meta charset="U ...
java数组如何pop_Js数组的操作push,pop,shift,unshift等方法详细介绍
js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧.不过不会针对每个方法进行讲解,我只是选择其中的一些来讲. 首先来讲一下push和pop方法,这两个方法只会对数组从尾部 ...
arraycopy用法_Java复制（拷贝）数组的4种方法：arraycopy()方法、clone() 方法、copyOf()和copyOfRan...
所谓复制数组,是指将一个数组中的元素在另一个数组中进行复制.本文主要介绍关于 Java 里面的数组复制(拷贝)的几种方式和用法.在 Java 中实现数组复制分别有以下 4 种方法: Arrays 类的 ...
用子函数的方法求一个3*4的数组的转置数组
<程序设计基础实训指导教程-c语言> ISBN 978-7-03-032846-5 p142 7.1.2 上级实训内容 [实训内容3]用子函数的方法求一个3*4的数组的转置数组 #incl ...
vue 循环遍历list_vue使用map代替Aarry数组循环遍历的方法
需求:根据主键id来找到对应的数组下标原本的方法是使用for循环遍历该数组,变量 i 就是下标,问题在于,如果有多重for循环,就会导致性能大大下降,数据也容易出错因此使用map,让数组(原本是l ...
将HTMLCollection转换为数组的最有效方法
本文翻译自:Most efficient way to convert an HTMLCollection to an Array 有没有更有效的方法将HTMLCollection转换为数组,除了迭代 ...
创建零填充JavaScript数组的最有效方法？
在JavaScript中创建任意长度的零填充数组的最有效方法是什么? #1楼使用对象符号 var x = []; 零填充? 喜欢... var x = [0,0,0,0,0,0]; 充满" ...

数组练习：各种数组方法的使用

数组练习：各种数组方法的使用相关推荐

最新文章

热门文章