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

2022-11-12 16:59:30

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

码农公寓

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

1.1 typeof

1.2 null、undefined

1.3 null与undefined的区别

2.JS类型转换

2.1 constructor属性

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

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

2.4 JS中某些自动转换类型

相关文章