JS中的数据类型

7种数据类型

  • Undefined、String、Boolean、Number、Null、Object、Symbol
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS中的数据类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				1、
					JS中数据类型有:原始类型、引用类型。
					原始类型:Undefined、Number、String、Boolean、Null
					引用类型:Object以及Object的子类
					
				2、ES规范(ECMAScript规范),在ES6之后,又基于以上的6种类型之外添加了一种新的类型:Symbol
				
				3、JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
					typeof运算符的语法格式:
						typeof 变量名
					typeof运算符的运算结果是以下6个字符串之一:注意字符串都是全部小写。
						"undefined"
						"number"
						"string"
						"boolean"
						"object"
						"function"
						
				4、在JS当中比较字符串是否相等使用“==”完成。没有equals。
			*/
		   
		   /*
		   // 求和,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型
		   // 因为以下定义的这个sum函数是为了完成两个数字的求和.
		   function sum(a, b){
			   if(typeof a == "number" && typeof b == "number"){
				   return a + b;
			   }
			   alert(a + "," + b + "必须都为数字!");
		   }
		   
		   // 调用sum函数.
		   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>

  1. 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"
		   alert(y == k); // false
		   
		</script>
		
	</body>
</html>
  1. 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)){
				   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(parseFloat("3.14") + 1); // 4.14
		   alert(parseFloat("3.2") + 1); // 4.2
		   
		   // Math.ceil()
		   alert(Math.ceil("2.1")); // 3
		   
		</script>
	</body>
</html>

  1. Boolean
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boolean类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			1、 JS中的布尔类型永远都只有两个值:true和false (这一点和java相同。)
			2、有一个函数叫做:Boolean()。
				语法格式:
					Boolean(数据) 
				Boolean()函数的作用是将非布尔类型转换成布尔类型。
			*/
		   // var username = "lucy";
		   var username = "";
		   
		   // if语句会自动调用Boolean()函数将数据转换成布尔类型:
		   /*
		   if(username){
			   alert("欢迎你" + username);
		   }else{
			   alert("用户名不能为空!");
		   }
		   等价于:
		   if(Boolean(username)){
			   alert("欢迎你" + username);
		   }else{
			   alert("用户名不能为空!");
		   }
		   */
		  
		  // 规律:“有"就转换成true,"没有"就转换成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
		   
		   /* while循环
		   while(10 / 3){
			   alert("hehe");
		   }
		   */
		   
		   // for循环
		   for(var i = 0; i < 10; i++){
			   alert("i = " + i);
		   }
			
		</script>
	</body>
</html>

  1. Null
<script type="text/javascript">
	// Null类型只有一个值,null
	alert(typeof null); // null属于Null类型,但对null使用运算符得到的结果却是"object"
</script>
  1. String
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				String类型:
					1、在JS当中字符串可以使用单引号,也可以使用双引号。
						var s1 = 'abcdef';
						var s2 = "test";
					2、在JS中创建字符串对象:
						两种方式:
							第一种:var s = "abc";
							第二种: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("https") >= 0 ? "包含" : "不包含"); // 不包含
		   
		   // replace (注意:只替换了第一个)
		   alert("name=value%name=value%name=value".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>

  1. Object
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				Object类型:
					1、自定义的任何类型,默认继承Object。
					2、Object类包括哪些属性?
						prototype属性(常用):作用是给类动态地扩展属性和函数。
						constructor属性
					3、Object类包括哪些函数?
						toString()
						valueOf()
						toLocaleString()
					4、在JS当中定义的类默认继承Object,会继承Object类中所有的属性以及函数。	
					5、在JS当中怎么定义类?怎么new对象?
						定义类的语法:
							第一种方式:
								function 类名(形参){
									
								}
							第二种方式:
								类名 = function(形参){
									
								}
						创建对象的语法:
							new 构造方法名(实参); // 构造方法名和类名一致。
			*/
		   function sayHello(){
			   
		   }
		   
		   // 把sayHello当做一个普通的函数来调用:
		   sayHello();
		   
		   // 把sayHello当做一个类来创建对象:
		   // 注意JS中所有变量都只用var关键字修饰。
		   var obj = new sayHello(); // obj是一个引用,保存内存地址指向堆中的对象.
		   
		   // 定义一个学生类
		   function Student(){
			   alert("Student.....");
		   }
		   
		   // 当做普通函数调用
		   Student();
		   
		   // 当做类来创建对象
		   var stu = new Student();
		   alert(stu); // [object Object]
		   
		   // JS中的类的定义,同时也是一个构造函数的定义
		   // 换句话说,就是在JS中,类的定义和构造函数的定义是放在一起来完成的.
		   function User(a, b, c){ // a b c是形参,属于局部变量.
			   // 声明属性 (this表示当前对象)
			   // User类中有三个属性:sno/sname/sage
			   this.sno = a;
			   this.sname = b;
			   this.sage = c;
		   }
		   
		   // 创建对象
		   var u1 = new User(111, "zhangsan", 30);
		   // 访问对象的属性
		   alert(u1.sno);
		   alert(u1.sname);
		   alert(u1.sage);
		   
		   var u2 = new User(222, "jackson", 55);
		   alert(u2.sno);
		   alert(u2.sname);
		   alert(u2.sage);
		   
		   // 访问一个对象的属性,还可以使用这种语法
		   alert(u2["sno"]);
		   alert(u2["sname"]);
		   alert(u2["sage"]);
		   
		   // 定义类的另一种语法:
		   /*
		   Emp = function(a, b){
			   this.ename = a;
			   this.sal = b;
		   }
		   */
		 
		   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这个类添加一个getPname()函数
		   Product.prototype.getPname = function(){
			   return this.pname;
		   }
		   
		   // 调用后期扩展的getPname()函数
		   var pname = xigua.getPname();
		   alert(pname)

			// 给String扩展一个函数
		   String.prototype.suiyi = function(){
			   alert("这是给String类型扩展的一个函数,叫做suiyi");
		   }
		   
		   "abc".suiyi();
		   
		</script>
	</body>
</html>
<!--
	java语言怎么定义类,怎么创建对象?(强类型)
		public class User{
			private String username;
			private String password;
			public User(){
				
			}
			public User(String username,String password){
				this.username = username;
				this.password = password;
			}
		}
		User user = new User();
		User user = new User("lisi","123");
		
	JS语言怎么定义类,怎么创建对象?(弱类型)
		User = function(username,password){
			this.username = username;
			this.password = password;
		}
		var u = new User();
		var u = new User("zhangsan");
		var u = new User("zhangsan","123");
-->

null、NaN、undefined这三个值的区别:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null NaN undefined这三个值有什么区别</title>
	</head>
	<body>
		<script type="text/javascript">
			// null NaN undefined 数据类型不一致.
			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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值