JavaScript总结(2)

最新推荐文章于 2021-10-12 17:16:57 发布

WildKingxue

最新推荐文章于 2021-10-12 17:16:57 发布

阅读量170

点赞数

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

本文链接：https://blog.csdn.net/WildKingxue/article/details/120029483

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.JavaScript变量

变量是用于存储信息的"容器"。

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

关于变量名称的命名：

可以是数字，字母，$ , _ ,不能用数字开头
$ , _ 可以作为开头，单不推荐使用
变量名称对大小写敏感（y 和 Y 是不同的变量）
不能使用关键字【关键字是javascript语言为一个单词赋予特殊的含义，这些赋予特殊的含义的单词就是关键字】
不要用中文
全字母小写，如果有多个单词组成可以用$ , _ ,连接

1.声明（创建） JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

<1>我们使用 var 关键词来声明变量：

格式:

var 变量名称;

变量声明之后，该变量是空的（它没有值）。

如需向变量赋值，请使用等号：

格式：

变量名称=数据;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>声明 JavaScript 变量</title>
		<script type="text/javascript">
			//javascript的初始化函数
			window.onload=function(){
				var num1;//声明变量名称
				num1=100;//为变量名称赋值
				alert("num1=="+num1);//取出结果
			}
		</script>
	</head>
	<body>
	</body>
</html>

<2>我们也可以在声明变量时对其赋值：

格式：

var 变量名称=数据；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>声明 JavaScript 变量</title>
		<script type="text/javascript">
			//JavaScript的初始化函数
			window.onload=function(){
				var num1=80;//变量名称以及赋值
				alert(num1);//取出变量结果
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.一条语句，多个变量

<1>一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

格式：

var 变量名称1=数据1，变量名称2=数据2，......；

【最后一组不用逗号】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript  变量</title>
		<script type="text/javascript">
			//初始化函数
			window.onload=function(){
				var num1=100,num2=80,num3=60;//变量名称赋值；一个语句可以有多个变量
				num4=num1+num2+num3;//num4为三个赋值的总和
				alert("num4=="+num4);//取出num4的结果
			}
		</script>
	</head>
	<body>
	</body>
</html>

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

格式：

var 变量名称1=数据1；

var 变量名称2=数据2；

......

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量</title>
		<script type="text/javascript">
			//初始化函数
			window.onload=function(){
				var name="xiaoshao";//给变量名称赋值
				var age=20;//给变量名称赋值
				var address="渭南";//给变量名称赋值
				alert(name+","+age+","+address);//取出结果
			}
		</script>
	</head>
	<body>
	</body>
</html>

<3>一条语句中声明的多个变量不可以同时赋同一个值:

例如：

var 变量名称1，变量名称2，变量名称3=数据；

在这个语句中，变量名称1和变量名称2值为undefined，只有变量名称3=数据。

二.JavaScript 数据类型

数据类型实际上是用来决定所定义的变量将来所能进行那些操作。

JavaScript中的数据类型有2大类：值类型(基本类型)和引用数据类型

1.值类型（基本类型）

值类型(基本类型)：字符串（String）、数字（Number）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symbol【ES6】。

<1>字符串（String）

字符串是存储字符的变量。

字符串可以是引号中的任意文本，您可以使用单引号或双引号。

还可以在字符串中使用引号，只要不匹配包围字符串的引号即可。

双引号中的双引号用单引号代替：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串</title>
		<script type="text/javascript">
			window.onload=function(){
				var str1="love";//变量赋值字符串
				var str2="you";//变量赋值字符串
				var str3="l";//变量赋值字符串
				alert(str3+ str1 + str2);//取出最终结果
			}
		</script>
	</head>
	<body>
	
	</body>
</html>

<2>数字（Number）

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

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

例如：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字型</title>
		<script type="text/javascript">
			var num1,num2;//变量名称
			num1=123;//变量赋值
			num2=321;//变量赋值
			num3=num1+num2;//算数运算符
			alert(num3);//得到的值
		</script>
	</head>
	<body>
	</body>
</html>

<3>布尔（Boolean）

布尔（Boolean）只有两种false和true

false：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布尔型</title>
		<script type="text/javascript">
			var num1=875413,num2=789451;//变量名称赋值
			num3=num1-num2;//算数运算符
			alert(num3>num1);//得到的值false
		</script>
	</head>
	<body>
	</body>
</html>

true：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布尔型</title>
		<script type="text/javascript">
			var num1=875413,num2=789451;//变量名称赋值
			num3=num1-num2;//算数运算符
			alert(num3<num2);//得到的值true
		</script>
	</head>
	<body>
	</body>
</html>

<4>对空（Null）

var 变量名称=null；//表示一个空对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>空</title>
		<script type="text/javascript">
			var text1=null;//变量名称
			alert(text1);//取值
		</script>
	</head>
	<body>
	</body>
</html>

<5>未定义（Undefined）

var 变量名称；//未赋值【未定义】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>未定义</title>
		<script type="text/javascript">
			var num1;//变量名称
			alert(num1);//取出
		</script>
	</head>
	<body>
	</body>
</html>

null 与 undefined 的异同点是什么呢？

共同点：都是原始类型，保存在栈中变量本地。

不同点：

undefined——表示变量声明过但并未赋过值。它是所有未赋值变量默认值。

例如：var a; // a 自动被赋值为 undefined

null——表示一个变量将来可能指向一个对象。一般用于主动释放指向对象的引用

例如：var emps = ['ss','nn'];

emps = null; // 释放指向数组的引用

2.引用数据类型

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

<1>对象（Object）

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。

属性由逗号分隔：

var 对象={属性名称1：属性值1，属性名称2：属性值2，属性名称3：属性值3};

上面例子中的对象有三个属性：属性名称1，属性名称2，属性名称3。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
		<script type="text/javascript">
			window.onload=function(){
				var str={str1:"100",str2:"300"}//对象名称{属性名称 : 属性值}
				alert(str["str2"]);//对象名称[属性名称]
			}
		</script>
	</head>
	<body>
	</body>
</html>

空格和折行无关紧要。声明可横跨多行：

var 对象={

属性名称1：属性值1，

属性名称2：属性值2，

属性名称3：属性值3

};

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
		<script type="text/javascript">
			window.onload=function(){
				var num={//对象名称
					num1:100,//{属性名称 : 属性值}
					num2:300,//{属性名称 : 属性值}
					};
				alert(num.num1);//对象名称[属性名称]
			}
		</script>
	</head>
	<body>
	</body>
</html>

<2>数组（Array）

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

数组有三种写法：

第一种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
		<script type="text/javascript">
			window.onload=function(){
				var arr1=["love","you","l"];//创建数组并赋值
				alert(arr1[2]+","+arr1[0]+","+arr1[1]);
				alert(arr1.length);//数组的元素个数
			}
		</script>
	</head>
	<body>
	</body>
</html>

第二种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
		<script type="text/javascript">
			window.onload=function(){
				var arr1=new Array("love","you","l");//创建数组并赋值
				alert(arr1[2]+","+arr1[0]+","+arr1[1]);
				alert(arr1.length);//数组的元素个数
			}
		</script>
	</head>
	<body>
	</body>
</html>

第三种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
		<script type="text/javascript">
			window.onload=function(){
				var arr1=new Array();
				arr1[0]="love";//数组赋值
				arr1[1]="you";//数组赋值
				arr1[2]="l";//数组赋值
				alert(arr1[2]+","+arr1[0]+","+arr1[1]);
				alert(arr1.length);//数组的元素个数
			}
		</script>
	</head>
	<body>
	</body>
</html>

这三种结果都是一样的。

length表示在数组中有多少个元素。

alert(arr1.length);//数组的元素个数

<3>函数（Function）

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

函数是由事件驱动的，或者当它被调用时执行的可重复使用的代码块。

函数声明的语法 :

function 函数名称（参数） {

alert("");//调用执行的内容

return "";//接收返回值

}

函数声明后不会立即执行，会在我们需要的时候调用到。

1.没有参数，没有返回值的函数

function 函数名称（） {

alert("");//调用执行的内容

}

2.有一个参数，没有返回值的函数

function 函数名称（参数） {

alert("");//调用执行的内容

}

3.有多个参数，没有返回值的函数

function 函数名称（参数1，参数2） {

alert("");//调用执行的内容

}

4.没有参数，有返回值的函数

function 函数名称（） {

alert("");//调用执行的内容

return "";//接收返回值

}

5.有参数，返回值的函数

function 函数名称（参数） {

alert("");//调用执行的内容

return "";//接收返回值

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
		<script type="text/javascript">
			window.onload = function() {
				//1.没有参数，没有返回值的函数
				function test1() {
					alert("没有参数，没有返回值的函数");
				}
				//2.有一个参数，没有返回值的函数
				function test2(num1) {
					alert("有一个参数，没有返回值的函数,参数是==" + num1);
				}
				//3.有多个参数，没有返回值的函数
				function test3(num1, num2, num3) {
					alert("有一个参数，没有返回值的函数,参数是==" + num1 + "," + num2 + "," + num3);
				}
				//4.没有参数，有返回值的函数
				function test4() {
					alert("没有参数，有返回值的函数");
					return "hello！";
				}
				//5.有参数，返回值的函数
				function test5(num1, num2) {
					alert("有多个参数，有返回值的函数,参数是==" + num1 + "," + num2);
					return "野王";
				}
				test1();
				test2("love");
				test3("my","name","xiaoshao");
				var res=test4();
				alert("test4的运行结果==="+res);
				var res=test5("wild","ling");
				alert("test5的运行结果==="+res);
			}
			//总结:要什么，给什么;给什么，收什么。
		</script>
	</head>
	<body>
	</body>
</html>

test1的结果：

test2的结果：

test3的结果：

test4的结果：

test5的结果：

三.JavaScript作用域

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

1.JavaScript 局部变量

变量在函数内声明，变量为局部作用域。

局部变量：只能在函数内部访问。

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

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

test1输出的值：

test2输出的值：

2.JavaScript 全局变量

变量在函数外定义，即为全局变量。

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局变量</title>
		<script type="text/javascript">
			window.onload = function() {
				var name = "xiaoshao",age = 20;
 				function test1() {
					//全局变量
					alert("全局变量test1==" + name+","+age);
				}
				function test2() {
					alert("全局变量test2==" + name+","+age);
				}
				test1();
				test2();
			}
		</script>
	</head>
	<body>
	</body>
</html>

test1输出的值：

test2输出的值：

3.JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

4.函数参数

函数参数只在函数内起作用，是局部变量。

5.HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局</title>
	</head>
	<body>
		<p>在 HTML 中, 所有全局变量都会成为 window 变量。</p>
		<p id="demo"></p>
		<script>
			myFunction();
			document.getElementById("demo").innerHTML = "我可以显示 " + window.carName;

			function myFunction() {
				carName = "Volvo";
			}
		</script>
	</body>
</html>

局部变量与全局变量的结合：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局变量</title>
		<script type="text/javascript">
			window.onload = function() {
				var age = 20;//全局变量
 				function test1() {
					//局部变量
					var name="xiaoshao";
					alert("局部变量test1==" + name+","+age);
				}
				function test2() {
					var name="xiaozhi";
					alert("局部变量test2==" + name+","+age);
				}
				test1();
				test2();
			}
		</script>
	</head>
	<body>
	</body>
</html>

test1输出的值：

test2输出的值：

四.JavaScript 运算符

1.算数运算符

算术运算符 [+ - * / % ++ --]

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

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>算术运算符</title>
		<script type="text/javascript">
			window.onload=function(){
				var num1=100;//赋值
				var num2=145;//赋值
				var num3=60;//赋值
				var num4=44;//赋值
				num5=num1+num2;//算数运算符+
				num6=num3-num4;//算数运算符-
				num7=num6*num3;//算数运算符*
				num8=num5/num6;//算数运算符/
				num9=num5%num6;//算数运算符%
				num10=num1++;//算数运算符值++
				num11=num4--;//算数运算符值--
				num12=++num2;//算数运算符++值
				num13=--num6;//算数运算符--值
				document.write("num5="+num5 + "<br>");
				document.write("num6="+num6 + "<br>");
				document.write("num7="+num7 + "<br>");
				document.write("num8="+num8 + "<br>");
				document.write("num9="+num9 + "<br>");
				document.write("num10="+num10 + "<br>");
				document.write("num11="+num11 + "<br>");
				document.write("num12="+num12 + "<br>");
				document.write("num13="+num13 + "<br>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.比较运算符

比较运算符 [> < >= <= == === !=]

比较运算符在逻辑语句中使用，以判定变量或值是否相等。

比较和逻辑运算符用于测试 true 或者 false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比较运算符</title>
		<script type="text/javascript">
			window.onload=function(){
				var num1=100;//赋值
				var num2=145;//赋值
				var num3=60;//赋值
				var num4=44;//赋值
				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.逻辑运算符

逻辑运算符 [|| && !]

逻辑运算符用于测定变量或值之间的逻辑。

比较和逻辑运算符用于测试 true 或者 false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>逻辑运算符</title>
		<script type="text/javascript">
			window.onload = function() {
				//JavaScrip逻辑运算符 [||  &&  !]
				// || --- 左右都为false是结果为false,其他都是true 
				alert(true || false); //true
				alert(false || true); //true
				alert(true || true); //true
				alert(false || false); //false
				// && --- 左右都为true是结果为true,其他都是false 
				alert(true && false); //false
				alert(false && true); //false
				alert(true && true); //true
				alert(false && false); //false
				// ！---非true结果就是非false，非false结果就是非true
				alert(!true); //false
				alert(!false); //true
			}
		</script>
	</head>
	<body>
	</body>
</html>

4.条件运算符

条件运算符（conditional operator）有时候也称为三元运算符（ternary operator，或者trinary operator），因为它是唯一需要 3 个操作数的运算符：

var 属性名称=条件 ? 表达式1 : 表达式2；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件运算符</title>
		<script type="text/javascript">
			window.onload = function() {
				var testvalue1 = (12 > 3) ? "大于" : "小于";
				var testvalue2 = (2 > 3) ? "大于" : "小于";
				alert(testvalue1); //大于
				alert(testvalue2); //小于
			}
		</script>
	</head>
	<body>
	</body>
</html>

5.操作符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作符</title>
		<script type="text/javascript">
			window.onload = function() {
				var num1 = 12.5;
				var str1 = "love";
				var boo = false;
				var nul = null;
				var un;
				var student = {
					name: "xiaoshao"
				};
				var arr = ["xiaoshao", "xiaozhi"];

				var fun = function test1() {
					alert("test1函数");
				}
				document.write(typeof num1 + "<br>"); //number
				document.write(typeof str1 + "<br>");//string
				document.write(typeof boo + "<br>");//boolean
				document.write(typeof nul + "<br>");//object
				document.write(typeof un + "<br>");//undefined
				document.write(typeof student + "<br>");//object
				document.write(typeof arr + "<br>");//object
				document.write(typeof fun + "<br>");//function
				//alert(typeof num1); //number
				//alert(typeof str1); //string
				//alert(typeof boo); //boolean
				//alert(typeof nul); //object
				//alert(typeof un); //undefined
				//alert(typeof student); //object
				//alert(typeof arr);  //object
				//alert(typeof fun);  //function
				//null,对象，数组都是object类型
			}
		</script>
	</head>
	<body>
	</body>
</html>