javascript中数组案例

以下是源代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>javascript中数组案例</title><link rel="stylesheet" type="text/css" href="inputAndDiv...

程宇寒

960人浏览 · 2020-01-03 08:22:49

程宇寒 · 2020-01-03 08:22:49 发布

以下是源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript中数组案例</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">javascript中数组案例</h3>
	<input type="button" value="案例1，测试数组的shift()函数" onclick="test1();">
	<br/><br/>
	<input type="button" value="案例2，测试数组的shift()函数" onclick="test2();">
	<br/><br/>
	<input type="button" value="案例3，循环遍历一个数组" onclick="test3();">
	<br/><br/>
	<input type="button" value="案例4，测试数组的splice()函数" onclick="test4();">
	<br/><br/>
	<input type="button" value="案例5，数组越界不会报错，会返回undefined" onclick="test5();">
	<br/><br/>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*
 注意：经过shift()后,数组的length长度会立马改变，所以，我才采
取下面这种下标index减减的方式，刚好把整个数组中的元素都打印了一遍。
*/
function test1(){
	var names = ['令狐冲', '韦小宝', '张无忌', '杨过', '段誉', '乔峰'];
	console.log(names, '数组中目前有' + names.length + '个元素');
	for (var index = names.length; index > 0; index--) {
		console.log(names.shift(), names.length, index);
	}
	console.log(names, '数组中目前有' + names.length + '个元素');
}

function test2(){
	var names = ['令狐冲', '韦小宝', '张无忌', '杨过', '段誉', '乔峰'];
	console.log(names, '数组中目前有' + names.length + '个元素');
	var elementCount = names.length;
	for (var index = 0; index < elementCount; index++) {
		console.log(names[0], names.length, index);
		names.shift();
	}
	console.log(names, '数组中目前有' + names.length + '个元素');
}

//循环遍历的多种写法
function test3(){
	console.log('******循环遍历方式1*******');
	var names = ['苏荃', '建宁公主', '双儿', '曾柔', '方怡', '阿珂', '沐剑屏'];
	for (var index = 0; index < names.length; index++) {
		console.log(names[index]);
	}
	console.log('******循环遍历方式2*******');
	var a = 0;
	//下面这种循环遍历的写法有点多此一举，a变量有点多余(我只是突发奇想换种新写法而已)
	for (var i = 0; i < names.length; i++) {
		console.log('此时a=' + a);
		//a变量有点多余,直接使用i变量就可以循环遍历数组
		console.log(names[a++], names[i]);
		console.log('此时a为' + a);
	}
	console.log('******换一种写法*******');
	for (var x = 0; x < names.length;) {
		console.log(names[x]);
		x++;
	}
	console.log('******再换一种写法*******');
	for (var y = 0; y < names.length;) {
		console.log('此时y=' + y);
		console.log(names[y++]);
		console.log('此时y为' + y);
	}
}

function test4(){
	var names = ['杨过', '郭靖', '乔峰', '虚竹', '段誉'];
		console.log('******原始数组******', names);
		var elementCount = names.length;
	for (var index = 0; index < elementCount; index++) {
		var arrElement = names.splice(0, 1)[0];
		console.log('第' + (index + 1) + '个元素', arrElement);
	console.log('删除第' + (index + 1) + '个元素' + arrElement + '后，此时数组是', names, '此时还剩' + names.length + '个元素');
	}
		console.log('******循环遍历后的数组******', names);
}

//数组越界不会报错，会返回undefined
function test5(){
	//在js中，字符串既可以用单引号包着，也可以用双引号包着，如下：
	var movies = ['《阿凡达》', '《泰坦尼克号》', "《复仇者联盟3：无限战争》", "《误杀》"];
	console.log('元素个数为' + movies.length);
	console.log('****' + movies[0]);
	console.log('****' + movies[1]);
	console.log('****' + movies[2]);
	console.log('****' + movies[3]);
	//数组越界不会报错，会返回undefined
	console.log('****' + movies[4]); //结果为****undefined
}
</script>
</html>