小白学习路之js基础知识

最新推荐文章于 2023-05-05 00:30:57 发布

原创最新推荐文章于 2023-05-05 00:30:57 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了JavaScript中的typeof操作符及其返回的六种数据格式，特别强调了Array和null的情况。同时，讲解了js中强制类型转换的Number、parseInt、parseFloat、toString、String和Boolean函数。此外，通过实例展示了如何用JS解决编程竞赛中计算平均分和鸡兔同笼问题的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

typeof

js中的typeof 共返回6种数据格式：
1、object
2、undefined
3、string
4、number
5、boolean
6、function
特别注意Array和null返回的都是object

js中强制类型转换的函数

转换为数值类型：Number(mix)、parseInt(string,radix)、parseFloat(string)
转换为字符串类型：toString(radix)、String(mix)
转换为布尔类型：Boolean(mix)

编写一段JS代码，求在编程竞赛中，有10个评委为参赛的选手打分，分数为0~100分。选手最后得分为：去掉一个最高分和一个最低分后其余8个分数的平均值。

方法一：

//<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>裁判打分</title>
	<script>
		//封装getElementById的方法
		function byId(id){
			return typeof(id)==="string"?document.getElementById(id):id;
		}

		function getScore(){
			//存放裁判分数的数组
			var scoreArry=[];
			var maxScore=0;
			var minScore=101;
			var sum=0;
			var mingo;

			var score = byId("score").getElementsByTagName("input");
			for(var i=0;i<score.length;i++){
				if(score[i].value>0){
					scoreArry.push(score[i].value);
				}
			}
			for(var j=0;j<scoreArry.length;j++){
					if(scoreArry[j]>maxScore){
						maxScore=scoreArry[j];
					}
					if(scoreArry[j]<minScore){
						minScore=scoreArry[j];
					}
					sum+=parseInt(scoreArry[j]);
			}
			sum-=parseInt(maxScore)+parseInt(minScore);
			alert("去掉一个最高分"+parseInt(maxScore)+"和最低分"+parseInt(minScore)+"，选手最终得分为："+sum/8);
	
		}
		
	</script>
</head>
<body>
	<div id="score">
		裁判1：<input type="text"  style="display: block">
		裁判2：<input type="text"  style="display: block">
		裁判3：<input type="text"  style="display: block">
		裁判4：<input type="text"  style="display: block">
		裁判5：<input type="text"  style="display: block">
		裁判6：<input type="text"  style="display: block">
		裁判7：<input type="text"  style="display: block">
		裁判8：<input type="text"  style="display: block">
		裁判9：<input type="text"  style="display: block">
		裁判10：<input type="text"  style="display: block">
		<button type="submit" onclick="getScore()" style="display: block">提交</button>
	</div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>裁判打分</title>
	<script>
		//封装getElementById的方法
		function byId(id){
			return typeof(id)==="string"?document.getElementById(id):id;
		}

		function getScore(){
			//存放裁判分数的数组
			var scoreArry=[];
			var sum=0;
			var mingo;
			var avg;

			var score = byId("score").getElementsByTagName("input");
			for(var i=0;i<score.length;i++){
				if(score[i].value>0){
					scoreArry.push(score[i].value);
				}
			}
			//冒泡排序，从小到大
			for(var j=0;j<scoreArry.length;j++){
					for(var m=0;m<scoreArry.length-j;m++){
						if(scoreArry[m]>scoreArry[m+1]){
							mingo=scoreArry[m];
							scoreArry[m]=scoreArry[m+1];
							scoreArry[m+1]=mingo;
						}
					}
			}
			// alert(scoreArry);//检测输出是否从小到大排序

			//去掉冒泡排序后的第一个和最后一个值
			for(var n=1;n<scoreArry.length-1;n++){
				sum+=parseInt(scoreArry[n]);
			}
			avg=sum/(scoreArry.length-2);
			alert("平均分："+avg);
		}
		
	</script>
</head>
<body>
	<div id="score">
		裁判1：<input type="text"  style="display: block">
		裁判2：<input type="text"  style="display: block">
		裁判3：<input type="text"  style="display: block">
		裁判4：<input type="text"  style="display: block">
		裁判5：<input type="text"  style="display: block">
		裁判6：<input type="text"  style="display: block">
		裁判7：<input type="text"  style="display: block">
		裁判8：<input type="text"  style="display: block">
		裁判9：<input type="text"  style="display: block">
		裁判10：<input type="text"  style="display: block">
		<button type="submit" onclick="getScore()" style="display: block">提交</button>
	</div>
</body>
</html>

编写一段JS代码，鸡兔同笼问题最早记载于1500年前的《孙子算经》，这是我古代一个非常有名的问题。问题内容如下：今有鸡兔同笼，上有三十五头，下有九十四足，问鸡兔各几何？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鸡兔同笼</title>
</head>
<body>
	<script>
		var chook=0;
		var rabbit=0;
		function fun() {
			for(chook=0;chook<35;chook++){
				rabbit=35-chook;
				if(2*chook+4*rabbit==94){
					alert("鸡有："+chook+"只"+";兔有："+rabbit+"只");
				}
			}
		}
		fun();
	</script>
</body>
</html>