Javascript笔记02_function student(a,b,c){ this.sno=a; this.sname=b;-优快云博客

本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/112428230

博客主要介绍了JS的数据类型，包括undefined、Number、Boolean、String、Object类型，还提及了null、NaN、undefined之间的区别，属于前端开发中JavaScript相关知识。

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

js的数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				虽然js的变量在声明的时候不需要指定数据类型，但是在赋值的时候，每一个数据还是
			有类型的，所以这里需要学习一下js包括哪些数据类型。
				
				js中数据类型有原始类型和引用类型
					原始类型：Undefined、Number、String、Boolean、Null
					引用类型：Object以及Object的子类
			
			ES规范：在ES6之后，又基于以上的六种类型之外，添加了一种新的类型：Symbol
			
			js中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态获取变量的数据类型
				typeof运算符的语法格式：
					typeof 变量名
				
			typeof运算符的运算结果是以下6个字符串之一，注意字符串都是全部小写
				"undefined"
				"number"
				"string"
				"boolean"
				"object"
				"function"
			
			在js当中比较字符串是否相等使用“==”完成，没有equals
			*/
		   //求和，要求：a变量和b变量将来的数据类型必须是数字，不能是其他类型
		   function sum(a,b){
			   if(typeof a == "number" && typeof b == "number"){
				   return a + b;
			   }
			   alert(a + "," + b + "必须都为数字！");
		   }
		   
		   var retValue = sum(false,"abc");
		   alert(retValue);//"undefined"
		   
		   var retValue2 = sum(1,2);
		   alert(retValue2)//3
		   
		   var i;
		   alert(typeof i);//"undefined"
		   
		   var k = 10;
		   alert(typeof k);//"number"
		   
		   var f = "abc";
		   alert(typeof f);//"string"
		   
		   var d = null;
		   alert(typeof d);//"object" null属于Null类型，都是typeof运算符的结果是"object"
		   
		   var flag = false;
		   alert(typeof flag);//"boolean"
		   
		   var obj = new Object();
		   alert(typeof obj);//"object"
		   
		   //sayHello是一个函数
		   function sayHello(){
			   
		   }
		   alert(typeof sayHello);//"function"
		</script>
	</body>
</html

undefined类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Undefined类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				Undefined类型只有一个值，这个值就是undefined
				当一个变量没有手动赋值，系统默认赋值undefined，或者也可以给一个变量手动赋值undefined。
			 */
			var i;//undefined
			var k = undefined;//undefined
			alert(i == k);//true
			
			var y = "undefined";//"undefined",这是一个字符串，不是undefined。
			alert(y == k);//false
		</script>
	</body>
</html>

Number类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1.Number类型包括哪些值？
					-1 0 1 2 2.3 3.14 100 ... NaN（不是数字，但是数字类型） Infinity
					整数、小数、正数、负数、不是数字、无穷大都属于Number类型
				2.isNaN(); 结果是true表示不是一个数字，结果为false表示是一个数字
				3.parseInt()函数
				4.parseFloat()函数
				5.Math.ceil()函数（Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整。）
			 */
			var v1 = 1;
			var v2 = 3.14;
			var v3 = -100;
			var v4 = NaN;
			var v5 = Infinity;
			
			//"number"
			alert(typeof v1);
			alert(typeof v2);
			alert(typeof v3);
			alert(typeof v4);
			alert(typeof v5);
			
			//关于NaN（表示Not a Number，不是一个数字，但属于Number类型）
			//什么情况下是一个NaN呢？
			//运算结果本来应该是一个数字，最后算完不是一个数字的时候，结果是NaN。
			var a = 100;
			var b = "阿波";
			alert(a / b);//除号显然最后结果应该是一个数字，但是运算的过程中导致最后不是一个数字，那么最后的结果是NaN
			
			var e = "abc";
			var f = 10;
			alert(e + f);//"abc10"(拼接)
			
			//Infinity（当除数为0的时候，结果为无穷大）
			alert(10 / 0);
			
			//思考：在js中10 / 3 = ？
			alert(10 / 3);//3.3333333333333335
			
			//关于isNaN函数
			//用法：isNaN(数据)，结果是true表示不是一个数字，结果是false表示是一个数字
			//isNaN : is Not a Number(不是一个数字)
			function sum(a,b){
				if(isNaN(a) || isNaN(b)){//如果a不是一个数字或b不是一个数字
					alert("参与运算的必须是数字！");
					return;
				}
				return a + b;
			}
			sum(100,"abc");//参与运算的必须是数字！
			alert(sum(100,200));//300
			
			//parseInt():可以将字符串转换成数字，并且取整数位
			alert(parseInt("3.9999"));//3
			alert(parseInt(3.9999));//3
			
			//parseFloat():可以将字符串转换成数字
			alert("3.2" + 1);//4.2
			
			//Math.ceil()
			alert(Math.ceil("2.1"));//3
		</script>
	</body>
</html>

Boolean类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boole类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1.js中的布尔类型永远只有两个值：ture和false，这一点和Java相同
				2.在布尔类型中有一个函数叫做：Boolean()
					语法格式：
						Boolean(数据)
					Boolean()函数的作用：将非布尔类型转换成布尔类型。
			 */
			var username = "jack";
			/* 
			if(Boolean(username)){
				alert("欢迎你：" + username);
			}else{
				alert("用户名不能为空！");
			}
			*/
			//和以上结果一样，不调用会自动转，相当于上面的语句
			if(username){
				alert("欢迎你：" + username);
			}else{
				alert("用户名不能为空！");
			}
			
			//规律：有就转换成ture，没有就转换成false。
			alert(Boolean(1));//true
			alert(Boolean(0));//false
			alert(Boolean(""));//false
			alert(Boolean("abc"));//true
			alert(Boolean(null));//false
			alert(Boolean(NaN));//false
			alert(Boolean(undefined));//false
			alert(Boolean(Infinity));//true
			
			//Null类型只有一个值：null
			alert(typeof null);//"object"
		</script>
	</body>
</html>

String类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1.再js当中字符串可以使用单引号，也可以使用双引号
					var s1 = 'abcdef';
					var s2 = "test";
				2.在js当中，如何创建字符串对象？
					两种方式：
						第一种： var s = "abc";
						第二种：（使用js内置的支持类String） var s2 = new String("abc");
					需要注意的是：String是一个内置类，可以直接用，String的父类是Object
				3.无论小string还是大String，他们的属性和函数都是通用的
				4.关于String类型的常用属性和函数
					常用属性：
						length 获取字符串长度
					常用函数：
						indexOf			获取指定字符串在当前字符串中第一次出现处的索引
						lastIndexOf		获取指定字符串在当前字符串中最后一次出现处的索引
						replace			替换
						substr			截取子字符串
						substring		截取子字符串
						toLowerCase		转换小写
						toUpperCase		转换大写
						split			拆分字符串
			 */
			//小string（属于原始类型String）
			var x = "king";
			alert(typeof x);//"String"
			
			//大String（属于Object类型）
			var y = new String("abc");
			alert(typeof y);//"object"
			
			//获取字符串的长度
			alert(x.length);//4
			alert(y.length);//3
			
			alert("http://www.baidu.com".indexOf("http"));//0
			alert("http://www.baidu.com".indexOf("https"));//-1
			
			//判断一个字符串中是否包含某个字符串
			alert("http://www.baidu.com".indexOf("httos") >= 0 ? "包含" : "不包含");//不包含
			
			//replace（注意：这里只替换了第一个）
			alert("name=value%name=value%name=value".replace("%","&"));//name=value&name=value%name=value
			/* 
				继续调用replace方法，就会替换第“二”个
				想全部替换需要使用正则表达式
			 */
			alert("name=value%name=value%name=value".replace("%","&").replace("%","&"));//name=value&name=value&name=value
			
			//substr和substring的区别
			//substr(startIndex,length)
			alert("abcdefxyz".substr(2,4));//cdef
			//substring(startIndex,endIndex)注意：不包含endIndex
			alert("abcdefxyz".substring(2,4));//cd
		</script>
	</body>
</html>

Object类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>object类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				Object类型：
					1.Object类型是所有类型的超类，自定义的任何类型，默认继承object
					2.Object类包括哪些属性？
						prototype属性（常用的），作用：给类动态的扩展属性和函数
						constructor属性
					3.Object类包括哪些属性？
						toString()
						valueOf()
						toLocaleString()
					4.在js当中定义的类型默认继承Object，会继承Object类中所有的属性以及函数
					换句话说：自己定义的类中也有prototype属性
					5.在js当中如何定义类？如何new对象？
						定义类的语法：
							第一种方式：
								function 类名(形参){
									
								}
							第二种方式：
								类名 = function(形参){
									
								}		
						创建对象的语法：
							new 构造方法名(实参);//构造方法名和类名一致
			 */
			function sayHello(){
				
			}
			//把sayHello当做一个普通的函数来调用
			sayHello();
			
			//把sayHello当做一个类来创建对象
			var obj = new sayHello();//obj是一个引用，保存内存地址指向堆中的对象
			
			//定义一个学生类
			function Student(){
				alert("Student......");
			}
			//当作普通函数调用
			Student();
			
			//当作类来创建对象
			var stu = new Student();
			alert(stu);//[object Object]
			
			//js中类的定义，同时又是构造函数的定义
			//类的定义和构造函数的定义是放在一起来完成的
			function User(a,b,c){
				//声明属性（this代表当前对象）
				//User类中有三个属性：sno/sname/sage
				this.sno = a;
				this.sname = b;
				this.sage = c;
			}
			
			//创建对象
			var u1 = new User(111,"张三",30);
			//访问对象的属性
			alert(u1.sno);
			alert(u1.sname);
			alert(u1.sage);
			
			var u2 = new User(222,"李四",30);
			//访问对象的属性
			alert(u2.sno);
			alert(u2.sname);
			alert(u2.sage);
			
			var u3 = new User(333,"王五",30);
			//访问一个对象的属性，还可以使用这种语法
			alert(u3["sno"]);
			alert(u3["sname"]);
			alert(u3["sage"]);
			
			//定义类的另一种语法
			/* 
				Emp = function(a,b){
					this.ename = a;
					this.sal = b;
				}
			 */
			Emp = function(ename,sal){
				//属性
				this.ename = ename;
				this.sal = sal;
			}
			
			var e1 = new Emp("SMITH",800);
			alert(e1["ename"] + "," + e1.sal);
			
			Product = function(pno,pname,price){
				this.pno = pno;
				this.pname = pname;
				this.price = price;
				//函数
				this.getPrice = function(){
					return this.price;
				}
			}
			
			var xigua = new Product(111,"西瓜",4.0);
			var pri = xigua.getPrice();
			alert(pri);//4
			
			//可以通过prototype这个属性来给类动态扩展属性以及函数
			Product.prototype.getPname = function(){
				return this.pname;
			}
			
			//调用后期扩展的getPname()函数
			var pname = xigua.getPname();
			alert(pname);//西瓜
			
			//给String扩展一个函数
			String.prototype.suiyi = function(){
				alert("这是给String类型扩展的一个函数");
			}
			
			"abc".suiyi();
		</script>
	</body>
</html>

null NaN undefined的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null NaN undefined的区别</title>
	</head>
	<body>
		<script type="text/javascript">
			
			//数据类型不一致
			alert(typeof null);//"object"
			alert(typeof NaN);//"number"
			alert(typeof undefined);//"undefined"
			
			//null和undefined可以等同
			alert(null == NaN);//false
			alert(null == undefined);//true
			alert(undefined == NaN);//false
			
			//在js当中有两个比较特殊的运算符
			//==（等同运算符）
			//===（全等运算符：即判断值是否相同，又判断数据类型是否相同）
			alert(null === NaN);//false
			alert(null === undefined);//false
			alert(undefined === NaN);//false
			
			alert(1 == true);//true
			alert(1 === true);//false
		</script>
	</body>
</html>