JavaScript 变量，数据类型与运算符

最新推荐文章于 2022-05-31 15:47:22 发布

Suxiaomowang

最新推荐文章于 2022-05-31 15:47:22 发布

阅读量791

点赞数 1

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.youkuaiyun.com/Suxiaomowang/article/details/120032208

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中的变量、数据类型和运算符。包括变量的声明和赋值，数据类型分为值类型（如String、Number、Boolean、Null、Undefined和Symbol）和引用类型（如对象和数组）。此外，还讲解了函数的参数列表、作用域（局部和全局）以及各种运算符（算术、比较、逻辑和条件运算符）的用法。

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

1. JavaScript 变量

变量是用于存储信息/数据的"容器"
在程序运行的过程中可以随时改变变量中存储的数据
通过var关键词声明（创建）定义 JavaScript 变量
格式 : var 变量名称；

var main;

变量声明之后，该变量是空的（它没有值）。
如果我们需要给这个变量保存信息/数据，就需要给变量赋值
如需向变量赋值，请使用等号。
格式：变量名称 = 数据;

main = 100;

您也可以在声明变量时对其赋值

var  main = 100;

一条语句可以声明多个变量，该语句以 var 开头，并使用逗号分隔变量即可

var  main1 , main2, main3;

可以逐个为声明的变量赋值

main1 = "字符串",
main2 = 333,
main3 = "中文";

同样也可以在声明时赋值

var main1 = "字符串",main2 = 333,main3 = "中文";

输出

alert(main1 + "," + main2 + "," + main3);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">		
				var  main1 , main2, main3;
				main1="字符串";
				main2=666;
				main3="中文";
				alert(main1+","+main2+","+main3);
		</script>
		
	</head>
	<body>
	</body>
</html>

2. JavaScript 数据类型

数据类型实际上是用来决定所定义的变量将来所能进行那些操作。
JavaScript中的数据类型有2大类：值类型(基本类型)和引用数据类型
值类型(基本类型): 字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol[ES6]

引用数据类型：对象(Object)、数组(Array)、函数(Function)

1. 值类型(基本类型)

值类型(基本类型): 字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol[ES6]

1. 字符串（String）

字符串（比如 "字符串"）是存储字符的变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			var str = "字符串";
			alert(str);
		</script>

	</head>
	<body>
	</body>
</html>

字符串可以是引号[''/""]中的任意文本 双引号中的双引号用单引号代替

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			var str = "字符串里的'单双引号'";
			alert(str);
		</script>
		
	</head>
	<body>
	</body>
</html>

2. JavaScript 数字

JavaScript 只有一种数字类型，数字可以带小数点，也可以不带

<script type="text/javascript">
	var num1 = 52.1;
	alert(num1);
</script>

极大或极小的数字可以通过科学（指数）计数法来书写

var y=123e5;      // 结果为12300000
var z=123e-5;     // 结果为0.00123

“0” 开头的是8进制 “0x”开头的是16进制

<script type="text/javascript">
	var num8 = 050;
	var num16 = 0X522;
    alert(num8);
	alert(num16);
</script>

3. JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false 布尔常用在条件判断中

<script type="text/javascript">
	var true1 = true;
	var false1 = false;
	alert(true1);
	alert(false1);
</script>

4. null undefined

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

undefined 什么都没有

<script type="text/javascript">
	var un;
	var nul = null;
	alert(un);
	alert(nul);
</script>

2. 引用数据类型

引用数据类型：对象(Object)、数组(Array)、函数(Function)

1. JavaScript 对象

对象由{}表示
{}内部可以出现2中元素
1.属性：属性名称 : 属性值，属性与属性之间/属性与方法之间使用","分割
2.方法：方法名称：function(){} ,方法与方法之间/方法与属性之间使用","分割

对象中的属性访问
1.得到对象中的属性值
对象名称.属性名称 / 对象名称["属性名称 "]
alert(student.name);
alert(student["address"]);
2.修改对象中的属性值
对象名称.属性名称 = 新值
student.name="小暖";
alert(student.name);
3.调用对象中的方法
对象名称.方法名称()
student.getInfo();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				var student = {
					name: "苏小暖",
					age: 21,
					address: "西安",
					getInfo: function() {
						alert("我的名字叫苏小暖，请多指教。");
					},
				};
				alert(student.name);
				alert(student.age);
				alert(student["address"]);
				student.name = "小暖";
				alert(student.name);
				student.getInfo();
			}
		</script>

	</head>
	<body>
	</body>
</html>

2. JavaScript 数组(Array)

数组：一组数据，使用一个变量来保存一组数据（三种方法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				var arr = new Array();
				arr[0]= "甘雨";
				arr[1]= "刻晴";
				arr[2]= "我们是又甘又刻组合";
				alert(arr[0]+","+arr[1]+","+arr[2]);
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				var arr = new Array("甘雨","刻晴","我们是又甘又刻组合");
				alert(arr[0]+","+arr[1]+","+arr[2]);	
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				var arr = new Array("甘雨","刻晴","我们是又甘又刻组合");
				alert(arr[0]+","+arr[1]+","+arr[2]);	
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

数组的 length 属性：得到数组中的元素的个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				var arr = new Array();
				arr[0]= "甘雨";
				arr[1]= "刻晴";
				arr[2]= "我们是又甘又刻组合";
				alert(arr.length);
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

3. JavaScript 函数

函数(Function) 实现某一个功能的代码块
格式:function 函数名称(参数列表){函数体 [return xxxx]}
function：声明函数的关键词
函数名称的规则
1.可以是字母，数字，$ , _ ,不能用数字开头
2.$ , _ 可以作为开头，单不推荐使用
3.函数名称对大小写敏感
4.不能使用关键字
关键字是javascript语言为一个单词赋予特殊的含义，这些赋予特殊的含义的单词就是关键字
5.全字母小写，如果有多个单词组成可以用$ , _ ,连接

1. JavaScript 函数参数列表

参数---接收函数之外的数据进入本函数中进行运算
没有参数--()
有一个参数----(变量名称)
有多个参数(变量名称，变量名称，变量名称)
{}--函数体包含的是具体功能实现的代码
[return xxxx]--函数的执行结果，有结果就写在函数体的最后一行，没有结果就不写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				function test1() {
					alert("没有参数，没有返回值的函数");
				}

				function test2(num1) {
					alert("有一个参数，没有返回值的函数,参数是==" + num1);
				}

				function test3(num1, num2, num3) {
					alert("有3个参数，没有返回值的函数,参数是==" + num1 + "," + num2 + "," + num3);
				}

				function test4() {
					alert("没有参数，有返回值的函数");
					return "返回值";
				}

				function test5(num1, num2, num3) {
					alert("有3个参数，有返回值的函数,参数是==" + num1 + "," + num2 + "," + num3);
					return "返回值";
				}

				test1();

				test2("苏小暖");

				test3("苏小暖", 21, "西安");

				var res = test4();
				alert(res);

				var res = test5("苏小暖", 21, "西安");
				alert(res);

			}
		</script>

	</head>
	<body>
	</body>
</html>

总结: 要什么，给什么;给什么，收什么

2. JavaScript 的作用域

1. 局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量
所以只能在函数内部访问它（该变量的作用域是局部的）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				function xiaonuan(){
					//局部变量
					var name="小暖";
					alert("局部变量"+name);
				}
				xiaonuan();
				function suxiaonuan(){
					//局部变量
					alert("局部变量"+name);
				}
				suxiaonuan();
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

可以看到函数suxiaonuan是无法用到函数xiaonuan中的变量的

局部变量只可本函数使用

2. 全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				//全局变量
				var name="小暖";
				function xiaonuan(){
					alert("全局变量"+name);
				}
				function suxiaonuan(){
					alert("全局变量"+name);
				}
				xiaonuan();
				suxiaonuan();
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

可以看到函数都可以被作用，所有函数都可以访问

局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				name="小暖";
				function xiaonuan(){
					alert("window属性"+name);
				}
				xiaonuan();
			}
		</script>
		
	</head>
	<body>
	</body>
</html>

4. JavaScript 运算符

1. JavaScript 算术运算符 [+ - * / % ++ --]

+ 用于把文本值或字符串变量加起来（连接起来）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				var str1 = "苏";
				var str2 = "小暖";
				alert(str1 + str2);
			}
		</script>

	</head>
	<body>
	</body>
</html>

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				var num1 = 7;
				var num2 = 33;
				var num3 = 100;
				alert( num2 + num1 );//结果为40
				alert( num2 - num1 );//结果为26
				alert( num2 * num1 );//结果为231
				alert( num2 / num1 );//结果为4.714285714285714
				alert( num2 % num1 );//结果为5
				alert( num3++);//结果为100
				var num3 = 100;
				alert( ++num3);//结果为101
				var num3 = 100;
				alert( num3--);//结果为100
				var num3 = 100;
				alert( --num3);//结果为99
			}
		</script>

	</head>
	<body>
	</body>
</html>

2. JavaScript比较运算符 [> < >= <= == === !=]

比较运算符在逻辑语句中使用，以测定变量或值是否相等。
运算结果是boolean值【true [正确] / false[错误]】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				var num1 = 520;
				var num2 = 521;
				alert(num1 > num2);//结果为false
				alert(num1 < num2);//结果为true 
				alert(num1 >= num2);//结果为false
				alert(num1 <= num2);//结果为true 
				alert(num1 == num2);//结果为false
				alert(num1 != num2);//结果为true 
				alert(num1 === num2);//结果为false
			}
		</script>

	</head>
	<body>
	</body>
</html>

3. JavaScrip 逻辑运算符 [ || && ! ]

|| ：左右都为false是结果为false,其他都是true

&& ：左右都为true是结果为true,其他都是false

! : 取反

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				alert(true || false);//结果为true 
				alert(false || true);//结果为true 
				alert(true || true);//结果为true 
				alert(false || false);//结果为false
				alert(true && false);//结果为false
				alert(false && true);//结果为false
				alert(true && true);//结果为true 
				alert(false && false);//结果为false
			}
		</script>

	</head>
	<body>
	</body>
</html>

4. JavaScrip条件运算符

格式: var res=(表达式)?value1:value2;
判断表达式的结果

1. true value1数据值赋值给res
2. false value2数据值赋值给res

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			window.onload = function() {
				var xiao = (3 < 5) ? "小" : "大";
				alert(xiao);
			}
		</script>

	</head>
	<body>
	</body>
</html>

5. typeof 操作符

操作符检测变量的数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script type="text/javascript">
			var num = 333;
			var str = "hello";
			var boool = false;
			var nul = null;
			var un;
			var student = {
				name: "xiaonuan"
			};
			var arr = ["苏小暖", "小暖"];
			var fun = function test1() {
				alert("函数");
			}
			alert(typeof num);//结果为number
			alert(typeof str);//结果为string
			alert(typeof bool);//结果为undefined
			alert(typeof nul);//结果为object
			alert(typeof un);//结果为undefined
			alert(typeof student);//结果为object
			alert(typeof arr);//结果为object
			alert(typeof fun);//结果为function
		</script>

	</head>
	<body>
	</body>
</html>