web前端学习（三十七）——JavaScript typeof、null、undefined及简单类型转换的相关设置

2021-02-17 12:57:56 阅读：135 来源： 互联网

标签：类型转换 web 转换 undefined Number typeof var null

1.JS几个重要的操作符与变量值

1.1 typeof

可以使用 typeof 操作符来检测变量的数据类型。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p> typeof 操作符返回变量或表达式的类型。</p>
		<p id="demo"></p>
		<script>
			var x=666;
			var s="redis";
			var flag=true;
			var num=[1,2,3,4];
			var person={name: "zhangsan",age: 25};
			document.getElementById("demo").innerHTML=
				typeof x + "<br />" + 
				typeof s + "<br />" + 
				typeof flag + "<br />" + 
				typeof num + "<br />" + //在JavaScript中，数组是一种特殊的对象类型。 因此 typeof num 返回 object。 
				typeof person;
		</script>
	</body>
</html>

1.2 null、undefined

在 JavaScript 中 null 表示 "什么都没有"，null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回 object。

在 JavaScript 中，undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。

用 typeof 检测 undefined 返回 undefined。

可以设置为 null 来清空对象，也可以设置为 undefined 来清空对象。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>对象可以通过设置为 <b>null</b> 或 <b>undefined</b> 来清空。</p>
		<p id="demo1"></p>
		<script>
			var person={name: "zhangsan",age: 25};
			var person=null;
			var num=[1,2,3,4];
			var num=undefined;
			document.getElementById("demo1").innerHTML=
				"对象person的类型为：" + typeof person + "<br />" + 
				"对象num的类型为：" + typeof num;
		</script>
		
	</body>
</html>

1.3 null与undefined的区别

null 和 undefined 的值相等，但类型不等。（只能说相等，但不是绝对相等）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<h2>undefined 和 null 的区别</h2>
		<p id="demo"></p>
		<script>
			document.getElementById("demo").innerHTML=
				"undefined的类型为：" + typeof undefined + "<br />" + 
				"null的类型为：" + typeof null + "<br />" + 
				"undefined与null是否绝对相等：" + (null === undefined) + "<br />" + 
				"undefined与null是否相等：" + (null == undefined);
		</script>
	</body>
</html>

2.JS类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

通过使用 JavaScript 函数
通过 JavaScript 自身自动转换

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值。

请注意：

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

2.1 constructor属性

constructor 属性返回所有 JavaScript 变量的构造函数。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p> constructor 属性返回变量或对象的构造函数。</p>
		<p id="demo"></p>
		<script>
			document.getElementById("demo").innerHTML = 
				"redis".constructor + "<br />" +
				(10.24).constructor + "<br />" +
				false.constructor + "<br />" +
				[1,2,3,4].constructor + "<br />" +
				{name:'zhangsan', age:25}.constructor + "<br />" +
				new Date().constructor + "<br />" +
				function() {}.constructor;
		</script>
	</body>
</html>

2.2 将数字、布尔值、日期转为字符串

全局方法 String() 可以将数字、布尔值、日期转换为字符串，该方法可用于任何类型的数字，字母，变量，表达式。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>String() 或者 toString() 方法可以将数字转换为字符串。</p>
		<p id="demo1"></p>
		<script>
			var x=51;
			document.getElementById("demo1").innerHTML=
				//也可以写成 x.toString()
				String(x) + "<br />" + 
				//也可以写成 (51).toString()
				String(51) + "<br />" + 
				//也可以写成 (50 + 1).toString()
				String(50 + 1);
		</script>
		<hr />
		<p>String() 或者 toString() 方法可以将布尔值转换为字符串。</p>
		<p id="demo2"></p>
		<script>
			document.getElementById("demo2").innerHTML=
				String(true) + "<br />" + 
				String(false) + "<br />" + 
				true.toString() + "<br />" + 
				false.toString() + "<br />";
		</script>
		<hr />
		<p>String() 或者 toString() 方法可以将日期转换为字符串。</p>
		<p id="demo3"></p>
		<script>
			document.getElementById("demo3").innerHTML=
				new Date() + "<br />" + 
				String(new Date()) + "<br />" + 
				new Date().toString();
		</script>
	</body>
</html>

2.3 将字符串、布尔值、日期转为数字

全局方法 Number() 可以将字符串、布尔值、日期转换为数字。

一元运算符 + 可用于将变量转换为数字，如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>全局方法 Number() 可以将字符串转换为数字。</p>
		<p id="demo1"></p>
		<script>
			document.getElementById("demo1").innerHTML=
				Number("10.24") + "<br />" + 
				Number(" ") + "<br />" + 
				Number("") + "<br />" + 
				Number("55 66");
		</script>
		<hr />
		<p>一元运算符 + 可以将其他变量转换为数字。</p>
		<p id="demo2"></p>
		<script>
			var a="5";      //a是一个字符串
			var x= + a;		//x是一个数字
			var b="redis";  //b是一个字符串
			var y= + b;		//y是一个数字(NaN)
			document.getElementById("demo2").innerHTML=
				typeof x + "<br />" + typeof y;
		</script>
		<hr />
		<p>全局方法 Number() 可将布尔值转换为数字。</p>
		<p id="demo3"></p>
		<script>
			document.getElementById("demo3").innerHTML=
				Number(true) + "<br />" + Number(false);
		</script>
		<hr />
		<p>全局方法 Number() 可将日期转换为数字、日期方法 getTime() 也有相同的效果。</p>
		<p id="demo4"></p>
		<script>
			document.getElementById("demo4").innerHTML=
				Number(new Date()) + "<br />" + new Date().getTime();
		</script>
	</body>
</html>

2.4 JS中某些自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

5 + null    // 返回 5        null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"     1 转换为 "1" 
"5" - 1     // 返回 4        "5" 转换为 5

标签：类型转换,web,转换,undefined,Number,typeof,var,null
来源： https://blog.csdn.net/weixin_43823808/article/details/113832646

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9