Home > Article > Web Front-end > Summarize various common uses of JavaScript arrays
Summarize various common uses of JavaScript arrays
- 巴扎黑Original
- 2017-09-06 10:25:541356browse
本文实例讲述了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>
p{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 ap = document.getElementsByTagName("p");
var aInput = document.getElementsByTagName("input");
var i = 0;
var bS1 = bS2 = true;
var aTmp = [];
//删除/添加第一项
aInput[0].onclick = function ()
{
aTmp = getArray(ap[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);
//输出
ap[0].innerHTML = aTmp.join()
};
//删除/添加最后一项
aInput[1].onclick = function ()
{
aTmp = getArray(ap[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);
//输出
ap[0].innerHTML = aTmp.join()
};
//复制, concat()方法
aInput[2].onclick = function ()
{
aTmp = getArray(ap[1].innerHTML);
//输出
ap[1].innerHTML = aTmp.concat(aTmp).toString().replace(/s/g,"")
};
//还原, 利用数组的 length 特点
aInput[3].onclick = function ()
{
aTmp = getArray(ap[1].innerHTML);
//设置数组长度
aTmp.length = 10;
//输出
ap[1].innerHTML = aTmp.join()
};
//第三组数据还原
aInput[4].onclick = function ()
{
aTmp = ["red","green","blue","white","yellow","black","brown"];
//输出
ap[2].innerHTML = aTmp.join()
};
//删除前三项
aInput[5].onclick = function ()
{
aTmp = getArray(ap[2].innerHTML);
//删除, 0开始, 删除3个
aTmp.splice(0, 3);
//输出
ap[2].innerHTML = aTmp.join()
};
//删除第二至三项
aInput[6].onclick = function ()
{
aTmp = getArray(ap[2].innerHTML);
//删除, 2开始, 删除2个
aTmp.splice(1, 2);
//输出
ap[2].innerHTML = aTmp.join()
};
//在第二顶后插入"orange", "purple"
aInput[7].onclick = function ()
{
aTmp = getArray(ap[2].innerHTML);
//插入, 2开始, 插入"orange", "purple"
aTmp.splice(1, 0, "orange", "purple");
//输出
ap[2].innerHTML = aTmp.join()
};
//替换第二项和第三项
aInput[8].onclick = function ()
{
aTmp = getArray(ap[2].innerHTML);
//插入, 2开始替换
aTmp.splice(1, 2, "#009900", "#0000ff");
//输出
ap[2].innerHTML = aTmp.join()
};
//将p中的内容转为数组
//str p对象
function getArray(str)
{
aTmp.length = 0;
str = str.split(",");
for (var i in str)aTmp.push(str[i]);
return aTmp
}
}
</script>
</head>
<body>
<p>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</p>
<input type="button" value="删除January(1)" />
<input type="button" value="删除December(12)" />
<p>0,1,2,3,4,5,6,7,8,9</p>
<input type="button" value="复制" />
<input type="button" value="还原" />
<p>red,green,blue,white,yellow,black,brown</p>
<input type="button" value="还原" />
<input type="button" value="删除前三项" />
<input type="button" value="删除第二至三项" />
<input type="button" value="在第二项后插入(orange, purple)" />
<input type="button" value="替换第二项和第三项" />
</body>
</html>The above is the detailed content of Summarize various common uses of JavaScript arrays. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn