js的数组学习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的数组学习</title>
<!--
js的数组学习：
1、数组的声明
var arr=new Array();//声明一个空数组对象
var arr=new Array(length)//声明一个指定长度的数组
var arr=[元素]//声明数组(最常用);<br />
注意：js中的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变。
2、数组的赋值和取值
数组可以存储任意类型的数据
数组名[角标]=值;//角标可以是任意的正整数或者是0
数组的取出：
数组名[角标]//返回当前角标对应存储的值
如果角标不存在，返回undefined;
3、数组的length属性
作用1：数组名.length//返回当前数组的长度。
作用于2：数组名.length=新的值//动态的改变数组的长度
注意：length>原有长度，则使用空进行填充。
length<原有长度，则从后面进行截取，最后的数据会被删除。
4、数组的遍历
普通for循环：
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for-in：
for(var i in arr){
alert(i);//获取的是角标
}
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、js的数组声明
/*var arr1=new Array();//第一种声明方式
arr1[0]="abc";
alert(arr1);
var arr2=new Array(5);//第二种声明
alert(arr2.length);
var arr3=[1,2,3,4,5];
alert(arr3);*/
//2、数组的赋值和取值
//声明数组
/*var arr=[];
arr[0]=2;
arr[1]="abc";
arr[2]=true;
arr[3]=new Date();
arr[10]="哈哈";
alert(arr);
alert(arr[14]);*/
//3、数组的length属性
/*var arr=[1,2,3,4,5,6];
alert(arr.length);
arr.length=8;
alert(arr.length);
arr[2]="abc";
alert(arr);
arr.length=3;
alert(arr);*/
//4、数组的遍历
var arr=[1,"bnj",3,"a",4];
alert(arr);
//遍历1
/*for(var i=0;i<arr.length;i++){
alert(arr[i]);
}*/
//遍历2：
for(var i in arr){
alert(i);//获取的是角标
}
</script>
</head>
<body>
<h3>js的数组学习</h3>
</body>
</html>
计算器案例：
<html>
<head>
<title>计算器</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*设置div样式*/
#showdiv{
border: solid 1px;
border-radius: 10px;/*设置边框角度*/
width: 320px;
height:400px;
text-align: center;
margin: auto;/*设置居中*/
margin-top: 50px;
background-color: floralwhite;
}
/*设置输入框样式*/
input[type=text]{
margin-top: 20px;
width: 290px;
height: 40px;
font-size: 20px;
}
/*设置按钮样式*/
input[type=button]{
width: 60px;
height: 60px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight: bold;
font-family: "萝莉体 第二版";
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//声明函数
function test(btn){
//获取button按钮对象的value值
var num=btn.value;
//根据用户点击动作执行对应的业务逻辑
switch (num){
case "=":
document.getElementById("inp").value=eval(document.getElementById("inp").value);
break;
case "c":
document.getElementById("inp").value="";
break;
default:
//将按钮的值赋值给input输入框
document.getElementById("inp").value=document.getElementById("inp").value+num;
break;
}
}
</script>
</head>
<body>
<div id="showdiv">
<input type="text" name="" id="inp" value="" readonly="readonly"/><br />
<input type="button" name="" id="btn" value="1"value="" onclick="test(this)"/>
<input type="button" name="" id="" value="2" onclick="test(this)"/>
<input type="button" name="" id="" value="3" onclick="test(this)"/>
<input type="button" name="" id="" value="4" onclick="test(this)"/><br />
<input type="button" name="" id="" value="5" onclick="test(this)"/>
<input type="button" name="" id="" value="6" onclick="test(this)"/>
<input type="button" name="" id="" value="7" onclick="test(this)"/>
<input type="button" name="" id="" value="8" onclick="test(this)"/><br />
<input type="button" name="" id="" value="9" onclick="test(this)"/>
<input type="button" name="" id="" value="+" onclick="test(this)"/>
<input type="button" name="" id="" value="-" onclick="test(this)"/>
<input type="button" name="" id="" value="*" onclick="test(this)"/><br />
<input type="button" name="" id="" value="0" onclick="test(this)"/>
<input type="button" name="" id="" value="/" onclick="test(this)"/>
<input type="button" name="" id="" value="c" onclick="test(this)"/>
<input type="button" name="" id="" value="=" onclick="test(this)"/>
</div>
</body>
</html>
常用操作：
<html>
<head>
<title>js数组的常用操作</title>
<meta charset="UTF-8"/>
<!--
数组的操作学习：
1、数组的合并：arr.concat(b,c);//数组的合并
2、数组指定间隔符转换字符串:var b=arr.join("-");
3、数组移除最后一个元素并返回:var ele=arr.pop();
4、数组的追加，返回新的长度：var ln=arr.push("lol");//追加的元素可以是一个数组，但是为作为一个角标值存在
5、数组的移除第一个元素:var ele=arr.shift();
6、数组的在开始位置插入指定元素:var a=arr.unshift("又是周五了");
7、数组删除指定位置元素：var arr2=arr.splice(1,3,"a");
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明数组*/
var arr=[1,"abc","张三","12"];
/*数组的操作*/
/*var b=["今天天气不错","适合学习"];
var c="js";
var d=arr.concat(b,c,c);//数组的合并
alert(d);
alert(d.length);*/
/*数组指定间隔符转换字符串*/
/*var b=arr.join("-");
alert(typeof b);*/
/*数组移除最后一个元素并返回*/
/*var ele=arr.pop();
alert(ele);*/
/*数组的追加*/
// var ln=arr.push("lol");
// var ln2=arr.push(["66",77]);
// alert(arr);
/*数组的移除第一个元素*/
// var ele=arr.shift();
// alert(ele);
// alert(arr);
/*数组的在开始位置插入指定元素*/
// var a=arr.unshift("又是周五了");
// alert(a);
/*数组删除指定位置元素*/
var arr2=arr.splice(1,3,"a");
alert(arr);
</script>
</head>
<body>
<h3>js数组的常用操作</h3>
</body>
</html>
原文地址：https://www.cnblogs.com/wcyMiracle/p/12411317.html
时间： 2024-09-28 19:50:41