WEB前端 | JS基础——(4)数组、二维数组和this

最新推荐文章于 2024-06-12 19:54:30 发布

Erosvan

最新推荐文章于 2024-06-12 19:54:30 发布

阅读量2.9k

点赞数 2

文章标签：二维数组数组 this javascript Web前端

本文链接：https://blog.csdn.net/Erosvan/article/details/52755267

版权

一、数组

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>数组</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	// 定义一个空数组arr。
		var arr = [];
		var arr1 = [23, 45, 55, 75];
		console.log(arr);
		console.log(arr1);
		// 数组的取值，直接是 数组名[下标]
		// 注意：下标从0开始
		console.log(arr1[2]);
		// 数组的赋值 取到对应的元素直接赋值
		arr1[2] = 88;
		console.log(arr1);

		// 数组第二种创建方式
		// 创建一个空数组
		var arr2 = new Array();
		console.log(arr2);
		// 创建空间大小为5的数组
		var arr3 = new Array(5);
		console.log(arr3);
		// 创建内容为34, 56, 78的数组
		var arr4 = new Array(34, 56, 78);
		console.log(arr4);
		// 数组在使用的时候不要越界

		var numMin = Math.min(16, 44, 2, 56);
		console.log(numMin);
		var numMax = Math.max(16, 44, 2, 56);
		console.log(numMax);
		// 向上取整
		var numCeil = Math.ceil(1.2);
		console.log(numCeil);
		// 向下取整
		var numFloor = Math.floor(1.8);
		console.log(numFloor);
		// 四舍五入
		var numRound = Math.round(1.5);
		console.log(numRound);
		// 0~1随机数
		var numRandom = Math.random();
		console.log(numRandom);
		// a ~ b 
		// var numRandom1 = Math.random() * (b - a) + a;
		// console.log(numRandom1);

		var arr5 = new Array();
		console.log(arr5);
		// push 和 unshift 都是添加新元素，push 加在最后，unshift 加在最前面。
		arr5.push(45);
		arr5.push(76);
		arr5.push(24);
		arr5.unshift(88);
		console.log(arr5);
		arr5.pop();
		arr5.shift();
		console.log(arr5);
		arr5 = [1, 3, 5, 7 , 9, 11];
		// splice(参数1, 参数2, 可选参数1, 可选参数2)
		// 参数1代表 起始下标
		// 参数2代表 长度(可为0)
		// 用法: 把所有的可选参数覆盖参数1、参数2所表示的区域
		arr5.splice(0, 3, 33, 33, 33);
		console.log(arr5);
		// sort() 按照ASICC排序
		arr5.sort();
		console.log(arr5);
		var arr6 = [99, 88, 77];
		// concat 连接数组，会产生一个新数组，不影响原来的数组
		var arr7 = arr5.concat(arr6);
		console.log(arr7);
		// join 分隔数组，会产生一个新数组
		var sting1 = arr7.join('fuck');
		console.log(sting1);

		var arr8 = [1, 2, 3, 4, 5];
		for(var i = 0; i < 5; i++) {
			console.log(arr8[i]);
		}

		// 随机生产20个50~100之间的整数
		var arr10 = new Array(20);
		for(var i = 0; i < 20; i++) {
			 arr10[i] = parseInt(Math.random() * (100 - 50) + 50);
		}
		console.log(arr10);
		// 随机生产20个不重复的50~100之间的整数
		// 方法一
		var arr11 = new Array(20);
		for(var i = 0; i < 20; i++) {
			arr11[i] = parseInt(Math.random() * (100 - 50) + 50);
			for(var n = 0; n < i; n++) {
				if(arr11[n] == arr11[i]) {
					i--;
					break;
				}
			}
		}
		arr11.sort();
		console.log(arr11);
		// 方法二
		var arr12 = new Array(20);
		for(var i = 0; i < 20; i++) {
			var suijishu = parseInt(Math.random() * (100 - 50) + 50);
			for(var n = 0; n < i; n++) {
				if(arr12[n] == suijishu) {
					suijishu = parseInt(Math.random() * (100 - 50) + 50);
					j = 0 ;
				}
			}
			 arr12[i] = suijishu
		}
		arr12.sort();
		console.log(arr12);
		// 方法三
		var numArr = new Array(20);
		for (var i = 0; i < 20; i++){
			var suijishu = parseInt(Math.random() * (100 - 50) + 50);
			var isfirst = true;
			for(var j = 0; j < i; j++){
				if (suijishu == numArr[j]) {
					isfirst = false;
					break;
				}
			}
			if (isfirst) {
				numArr[i] = suijishu;
			} else {
				i--;
			}
		}
		numArr.sort();
		console.log(numArr);

		// 冒泡排序
		for (var i = 0; i < numArr.length - 1; i++){
			var isYouXu = true;
			for(var j = 0; j < numArr.length - 1 - i; j++){
				if (numArr[j] > numArr[j + 1]) {
					isYouXu = false;
				var temp = numArr[j];
				numArr[j] = numArr[j + 1];
				numArr[j + 1] = temp;
				}
			}
			if (isYouXu) {
				break;
			}
		}
		console.log(numArr);
	</script>
</html>

二、二维数组和this

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>二维数组和this</title>
		<style type="text/css">
			#reddiv {
				width: 400px;
				height: 400px;
				background-color: red;
			}
			#bluediv {
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="reddiv">
		<div id="bluediv"></div>
		</div>
	</body>
	<script type="text/javascript">
	// 数组中可以存储不同类型的元素
	var arr = [1, 2, 4, 'A'];
	var num = arr[3];
	console.log(num);
	// 二维数组： 在数组中存储的元素都是数组
	var arr2 = [[1, 2, 3], [4, 5, 6]];
	var a = arr2[0];
	console.log(a[0]);
	console.log(arr2[0][0]);
	arr2[0][2] = 33;
	console.log(arr2[0]);

	for (var i = 0; i < arr.length;i++) {
		console.log(arr[i]);
	}

	for (var i = 0; i < arr2.length;i++) {
		for (var n = 0; n < arr2[i].length;n++) {
			console.log(arr2[i][n]);
		}
	}

	// this
	document.getElementById('reddiv').onclick = function(){
		// this代表的时和当前方法绑定的元素自身。
		this.style.backgroundColor = 'gold';
		console.log(this);
	}
	// 事件
	// onmouseover onmouseout onclick
	// onmouseenter(鼠标移入) onmouseleave(鼠标移出) onmousemove(鼠标移动);

	// onmouseover 和 onmouseout 会在鼠标从本元素到子集元素的时候会连续执行鼠标移出、鼠标移入的方法。
	// onmouseenter 和 onmouseleave 只会在鼠标从移入/移出本元素的时候才会执行一次，本元素到子元素不会执行移入/移出的方法。
	// onmousemove 鼠标在元素中移动的时候会一直执行方法。
	var reddiv = document.getElementById('reddiv');
	reddiv.onmousemove = function(){
		console.log('鼠标进来了');
	}
	reddiv.onmouseleave = function(){
		console.log('鼠标出去了');
	}
	</script>
</html>

Erosvan

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB前端 | JS基础——(4)数组、二维数组和this

一、数组数组 // 定义一个空数组arr。 var arr = []; var arr1 = [23, 45, 55, 75]; console.log(arr); console.log(arr1); // 数组的取值，直接是数组名[下标] // 注意：下标从0开始 console.log(arr1[2]); // 数组的
复制链接

扫一扫