前端 JS基础理论总结（五）

switch语句

条件分支语句也叫switch语句
- 语法：

switch(条件表达式){
					case 表达式:
						语句...
						break;
		 		case 表达式:
						语句...
						break;
					default:
						语句...
						break;
				}

执行流程：
- switch…case…语句在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，如果比较结果为true，则从当前case处开始执行代码。
- 当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，这样可以确保只会执行当前case后的语句，而不会执行其他的case
- 如果比较结果为false，则继续向下比较
- 如果所有的比较结果都为false，则只执行default后的语句
- switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。

数组

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数组</title>
	<script type="text/javascript">
		//面向对象的方式创建
		var aRr01 = new Array(1,2,3,'abc');
		//直接创建
		var aRr02 = [1,2,3,'def'];//推荐使用，性能更高

		//获取数组的成员数量（长度）
		// alert(aRr02.length);//弹出4
		// alert(aRr02[3]);//弹出cdf

		var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
		// alert(aRr03.length);//弹出3
		// alert(aRr03[1].length);//弹出3
		alert(aRr03[1][2]);//弹出c
	</script>
</head>
<body>
	
</body>
</html>

数组常用方法

<script type="text/javascript">
		var aRr = [1,2,3,4];
		//用-连接数组元素并转为字符串
		//var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4

		// var sTr = aRr.join('');//用空串连接
		// alert(sTr);//弹出1234

		//向数组最后追加元素
		// aRr.push(5);
		// alert(aRr);//1,2,3,4,5

		//删除末尾元素
		// aRr.pop();
		// alert(aRr);//1,2,3

		//向最前面插入元素0
		// aRr.unshift(0);
		// alert(aRr);//0,1,2,3,4

		//删除第一个（索引为0的）元素
		// aRr.shift();
		// alert(aRr);//2,3,4

		//反转
		// aRr.reverse();
		// alert(aRr);//4,3,2,1

		//查找字母'b'第一次出现的索引
		var aRr2 = ['a','b','c','d','a','b','c','d'];
		var num = aRr2.indexOf('b');
		// alert(num);//1

		//从第2索引元素开始，删除1个元素
		// aRr2.splice(2,1);//删除c
		// alert(aRr2);//a,b,d,a,b,c,d

		//从第2索引元素开始，删除1个元素，再插入e
		// aRr2.splice(2,1,'e');//把c替换成e
		// alert(aRr2);//a,b,e,d,a,b,c,d

		//删除后面的abcd，改为fghi
		aRr2.splice(4,4,'f','g','h','i');
		alert(aRr2);//a,b,c,d,f,g,h,i
	</script>

通过标签获取元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过标签获取元素</title>
	<script type="text/javascript">
		window.onload = function(){
			// //获取页面上所有的li
			// var aLi = document.getElementsByTagName('li');

			//获取id为list01的ul
			var oList = document.getElementById('list01');
			//再获取这个ul下的所有li
			var aLi = oList.getElementsByTagName('li');
			alert(aLi.length);//8
			// aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法

			aLi[0].style.backgroundColor = 'gold';
			aLi[1].style.backgroundColor = 'gold';
		}
	</script>
</head>
<body>
	<ul id="list01">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

	<ul id="list02">
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
	</ul>
</body>
</html>

前端 JS基础理论总结（五）

switch语句

数组

数组常用方法

通过标签获取元素

猜你喜欢