JavaScript数组与函数详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/118222462

这篇博客详细介绍了JavaScript中的数组操作，包括创建方式、元素类型、索引、遍历、新增元素以及冒泡排序。此外，还深入探讨了函数的使用，如声明、参数、返回值，以及arguments对象的应用。最后，讲解了JavaScript的作用域概念，包括全局和局部变量以及作用域链。

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

数组

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素

//普通变量一次只能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr = [1,2,3,4,5];

数组的创建方式

JS中创建数组有两种方式：

利用 new 创建数组
利用数组字面量创建数组

利用 new 创建数组

var 数组名 = new Array();
var arr = new Array();//创建一个新的空数组

注意：Array()，A要大写

利用数组字面量创建数组

// 1.使用数组字面量方式创建空的数组
var 数组名 = [];
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','阿橘'];

数组的字面量时方括号[ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 利用 new 创建数组
			var arr = new Array();// 创建了一个空的数组
			// 利用数组字面量创建数组 []
			var arr1 = [];// 创建了一个空的数组
			var arr2 = [1,2,'阿波',true];
			// 数组里面的数据一定用逗号分隔
			// 数组里面的数据，我们称为数组元素
	</head>
	<body>
	</body>
</html>

数组元素的类型

数组中可以存放任意类型的数据，例如字符串、数字、布尔值等

var arrStus = ['小白',12,true,28.9];

数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从0开始）

var 数组名 = ['小白','小黑','大黄','阿橘'];
索引号：        0      1      2      3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr1 = [1,2,'阿波',true];
			console.log(arr1);
			console.log(arr1[2]);// 阿波
			console.log(arr1[3]);// true
			
			var arr2 = ['琴瑟仙女','厄运小姐','放逐之刃'];
			console.log(arr2[0]);// 琴瑟仙女
			console.log(arr2[1]);// 厄运小姐
			console.log(arr2[2]);// 放逐之刃
			console.log(arr2[3]);// 因为没有这个数组元素，所以输出结果是 undefined
		</script>
	</head>
	<body>
	</body>
</html>

遍历数组

遍历数组就是把数组的元素从头到尾访问一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = ['red','green','blue'];
			for (var i = 0; i < 3; i++) {
				console.log(arr[i]);
			}
			// 1.因为我们的数组索引号从0开始，所以 i 必须从0开始
			// 2.输出的时候 arr[i] i 计数器当索引号来用
		</script>
	</head>
	<body>
	</body>
</html>

案例

请将[‘关羽’,‘张飞’,‘赵云’,‘马超’,‘黄忠’]; 数组里的元素依次打印到控制台

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 数组长度 ---> 数组名.length
			var arr = ['关羽','张飞','赵云','马超','黄忠'];
			for (var i = 0; i < arr.length; i++) {
				console.log(arr[i]);
			}
			// 1. 数组的长度是元素个数 不要跟索引号混淆
			// 2. arr.length 动态监测数组元素的个数
		</script>
	</head>
	<body>
	</body>
</html>

求数组[2,6,1,7,4] 里面所有元素的和以及平均值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 求数组的和以及平均值
			// 1.声明一个求和变量 sum
			// 2.遍历这个数组，把里面每个数组元素加到 sum 里面
			// 3.用求和变量 sum 除以数组长度就可以得到数组的平均值
			var arr = [2,6,1,7,4];
			var sum = 0;
			var average = 0;
			for (var i = 0; i < arr.length; i++) {
				sum += arr[i];// 我们加的是数组元素 arr[i] 不是计数器 i
			}
			average = sum / arr.length;
			console.log(sum,average);// 20 4
            // 想要输出多个变量，用逗号分隔开即可
		</script>
	</head>
	<body>
	</body>
</html>

求数组中的最大值

分析：

声明一个保存最大元素的变量max
默认最大值可以取数组中的第一个元素
遍历这个数组，把里面每个数组元素和 max 相比较
如果这个数组元素大于 max 就把这个数组元素存到 max 里面，否则继续下一轮比较
最后输出这个 max

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [2,6,1,77,52,26,78,99];
			var max = arr[0];
			for (var i= 0; i < arr.length; i++) {
				if (arr[i] > max) {
					max = arr[i];
				}
			}
			console.log('该数组里面的最大值是：' + max);
		</script>
	</head>
	<body>
	</body>
</html>

数组转换为分割字符串

分析：

需要一个新变量用于存放转换完的字符串str
遍历原来的数组，分别把里面的数据取出来，加到字符串里面
同时在后面多加一个分隔符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = ['red','blue','pink'];
			var str = '';
			var sep = '|';
			for (var i = 0; i < arr.length; i++) {
				str += arr[i] + sep;
			}
			console.log(str);// red|blue|pink|
		</script>
	</head>
	<body>
	</body>
</html>

数组新增元素

通过修改length长度新增数组元素

length属性是可读写的

var arr = ['red','green','blue','pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号4，5，6的空间没有给值，就是声明变量未给值，默认值就是undefined

修改索引号追加数组元素

不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = ['red','green','blue','pink'];
arr[4] = 'hotpink';
console.log(arr);// ['red','green','blue','pink','hotpink']

案例

新建一个数组，里面存放10个整数（1~10）

分析：

使用循环来追加数组
声明一个空数组arr
循环中的计数器 i 可以作为数组元素存入
由于数组的索引号是从0开始，因此计数器从0开始更合适，存入的数组元素要 +1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [];
			for (var i = 0; i < 10; i++) {
				// arr = i; 不要直接给数组名赋值 否则以前的元素都没了
				arr[i] = i + 1;
			}
			console.log(arr);
		</script>
	</head>
	<body>
	</body>
</html>

筛选数组

要求：将数组 [2,0,6,1,78,0,52,0,26,7] 中大于等于10的元素选出来，放入新数组

分析：

声明一个新的数组用于存放新数据newArr
遍历原来的旧数组，找出大于等于10的元素
依次追加给新数组newArr

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [2,0,6,1,78,0,52,0,26,7];
			var newArr = [];
			var j = 0;
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] >= 10) {
					// 新数组索引号应该从0开始 依次递增
					newArr[j] = arr[i];
					j++;
				}
			}
			console.log(newArr);
			// 方法2
			var arrs = [2,0,6,1,78,0,52,0,26,7];
			var newArrs = [];
			// 刚开始 newArrs.length 就是0
			for (var i = 0; i < arrs.length; i++) {
				if (arrs[i] >= 10) {
					// 新数组索引号应该从0开始 依次递增
					newArrs[newArrs.length] = arrs[i];
				}	
			}
			console.log(newArrs);
		</script>
	</head>
	<body>
	</body>
</html>

删除指定数组元素

要求将数组中的0去掉后，形成一个不包含0的新数组

分析：

需要一个新数组存放筛选之后的数据
遍历原来的数组，把不是0的数据添加到新数组里面
新数组里面的个数，用length不断累加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [2,0,6,1,78,0,52,0,26,7];
			var newArr = [];
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] != 0) {
					newArr[newArr.length] = arr[i];
				}
			}
			console.log(newArr);
		</script>
	</head>
	<body>
	</body>
</html>

翻转数组

要求将数组 [‘娑娜’,‘璐璐’,‘莫甘娜’,‘格温’,‘娜美’] 的内容反过来存放

输出：[娜美’,‘格温’,‘莫甘娜’,‘璐璐’,‘娑娜’]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.声明一个新数组newArr
			// 2.把就数组索引号第4个取过来（arr.length - 1） 给新数组索引号第0个元素（newArr.length）
			// 3.我们采取 递减的方式 i--
			var arr = ['娑娜','璐璐','莫甘娜','格温','娜美'];
			var newArr = [];
			for (var i = arr.length - 1; i >= 0; i--) {
				newArr[newArr.length] = arr[i];
			}
			console.log(newArr);
		</script>
	</head>
	<body>
	</body>
</html>

冒泡排序

是一种算法，把一系列数据按照一定的顺序进行排列显示（从小到大或从大到小）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [5,4,3,2,1];
			for (var i = 0; i <= arr.length - 1; i++) {// 外层循环管趟数
				for (var j = 0; j <= arr.length - i - 1; j++) {// 里面的循环管 每一趟的交换次数
					// 内部交换2个变量的值 前一个和后面一个数组元素相比较
					if (arr[j] > arr[j + 1]) {
						var temp = arr[j];
						arr[j] = arr[j + 1];
						arr[j + 1] = temp;
					}
				}
			}
			console.log(arr);
		</script>
	</head>
	<body>
	</body>
</html>

函数

函数就是封装了一段可以被重复执行调用的代码块，目的：就是让大量代码重复使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 求累加函数
			function getSum(num1,num2) {
				var sum = 0;
				for (var i = num1; i <= num2; i++) {
					sum += i;
				}
				console.log(sum);
			}
			getSum(1,100);// 5050
			getSum(10,50);// 1230
			getSum(1,1000);// 500500
		</script>
	</head>
	<body>
	</body>
</html>

函数的使用

声明函数

// 声明函数
function 函数名() {
    // 函数体代码
}

function是声明函数的关键字，必须小写

由于函数一般是为了实现某个功能才定义的，所以通常我们将函数命名为动词，比如getSum

调用函数

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

调用的时候千万不要忘记添加小括号

口诀：函数不调用，自己不执行

注意：声明函数本身并不会执行代码，只有调用函数才会执行函数体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 声明函数
			function sayHi() {
				console.log('hi~~');
			}
			// 调用函数
			sayHi();
		</script>
	</head>
	<body>
	</body>
</html>

利用函数求1~100累加和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function getSum() {
				var sum = 0;
				for (var i = 1; i <= 100; i++) {
					sum += i;
				}
				console.log(sum);
			}
			// 调用函数
			getSum();
		</script>
	</head>
	<body>
	</body>
</html>

函数的参数

形参和实参

参数	说明
形参	形式上的参数函数定义的时候传递的参数当前并不知道是什么
实参	实际上的参数函数调用的时候传递的参数实参是传递给形参的

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.函数可以重复相同的代码
			function cook() {
				console.log('野菇鸡肉串');
			}
			cook();
			cook();
			// 2.可以利用函数的参数实现函数重复不同的代码
			// function 函数名(形参1,形参2…) { // 在声明函数的小括号里面是 形参 （形式上的参数）
				
			// }
			// 函数名(实参1,实参2…);// 在函数调用的小括号里面是实参 （实际的参数）
			// 3.形参和实参的执行过程
			function cook(aru) { // 形参是接收实参的 aru = '野菇鸡肉串' 形参类似于一个变量
				console.log(aru);
			}
			cook('野菇鸡肉串');
			cook('蒙德烤鱼');
			// 4.函数的参数可以有，也可以没有个数不限
		</script>
	</head>
	<body>
	</body>
</html>

利用函数求任意两个数的和以及累加和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.利用函数求任意两个数的和
			function getSum(num1,num2) {
				console.log(num1 + num2);
			}
			getSum(1,3);// 4
			getSum(3,8);// 11
			// 2.利用函数求任意两个数之间的和
			function getSums(start,end) {
				var sum = 0;
				for (var i = start; i <= end; i++) {
					sum += i;
				}
				console.log(sum);
			}
			getSums(1,100);// 5050
		</script>
	</head>
	<body>
	</body>
</html>

函数形参和实参匹配问题

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

注意：在JavaScript中，形参的默认值是undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 函数形参实参个数匹配
			function getSum(num1,num2) {
				console.log(num1 + num2);
			}
			// 1.如果实参的个数和形参的个数一致 则正常输出结果
			getSum(1,2);
			// 2.如果实参的个数多于形参的个数 会取到形参的个数
			getSum(1,2,3);
			// 3.如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN
			// 形参可以看做是不用声明的变量 num2 是一个变量但是没有接收值 结果就是undefined
			getSum(1);// NaN
			// 建议：我们尽量让实参的个数和形参相匹配
		</script>
	</head>
	<body>
	</body>
</html>

函数的返回值return

希望函数将值返回给调用者，此时通过使用return语句就可以实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 函数的返回值格式
			// function 函数名() {
			// 	return 需要返回的结果;
			// }
			// 函数名();
			// (1) 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名()通过return 实现的
			// (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
			// 代码验证
			function getResult() {
				return 666;
			}
			getResult(); // getResult() = 666
			console.log(getResult());
			
			function cook(aru) {
				return aru;
			}
			console.log(cook('蒙德薯饼'));
			console.log(cook('蜜酱胡萝卜煎肉'));
			
			// 求任意两个数的和
			function getSum(num1,num2) {
				return num1 + num2;
			}
			console.log(getSum(1,2));// 3
		</script>
	</head>
	<body>
	</body>
</html>

求两个数的最大值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function getMax(num1,num2) {
				// if (num1 > num2) {
				// 	return num1;
				// } else {
				// 	return num2;
				// }
				return num1 > num2 ? num1 : num2;
			}
			console.log(getMax(1,3));
			console.log(getMax(11,3));
		</script>
	</head>
	<body>
	</body>
</html>

利用函数求任意一个数组中的最大值

求数组 [5,2,99,101,67,77] 中的最大数值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function getArrMax(arr) {
				var max = arr[0];
				for (var i = 1; i <= arr.length; i++) { // arr 接收一个数组 arr = [5,2,99,101,67,77]
					if (arr[i] > max) {
						max = arr[i];
					}
				}
				return max;
			}
			// getArrMax([5,2,99,101,67,77]); // 实参是一个数组送过去
			// 在我们实际开发里面，我们经常用一个变量来接收 函数的返回结果 使用更简单
			// var re = getArrMax([5,2,99,101,67,77]);
			var re1 = getArrMax([5,2,99,101,67,77]);
			var re2 = getArrMax([3,77,44,99,143]);
			console.log(re1); // 101
			console.log(re2); // 143
		</script>
	</head>
	<body>
	</body>
</html>

return的返回值

return只能返回一个值，如果使用逗号隔开多个值，以最后一个为准

函数都是有返回值的

如果return则返回return后面的值
如果没有return则返回undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 函数返回值注意事项
			// 1.return 终止函数
			function getSum(num1,num2) {
				return num1 + num2;// return 后面的代码不会被执行
				alert('我是不会被执行的哦！');
			}
			console.log(getSum(1,2));
			// 2.return 只能返回一个值
			function fn(num1,num2) {
				return num1,num2; // 返回的结果是最后一个值
			}
			console.log(fn(1,2));// 2
			// 3.求任意两个数的加减乘除结果
			function getResult(num1,num2) {
				return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];// 3 -1 2 0.5 
			}
			var re = getResult(1,2); // 返回的是一个数组
			console.log(re);
			// 4.我们函数如果有return 则返回的是 return 后面的值，如果函数没有return 则返回undefined
			function fun1() {
				return 666;
			}
			console.log(fun1()); // 返回666
			function fun2() {
				
			}
			console.log(fun2()); // 函数返回的结果是 undefined
		</script>
	</head>
	<body>
	</body>
</html>

break、continue、return的区别

break：结束当前循环体（如for、while）
continue：跳出本次循环，继续执行下次循环（如for、while）
return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

arguments的使用

当不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

arguments展示形式是一个伪数组，具有以下特点：

具有length属性
按索引方式存储数据
不具有数组的push、pop等方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// arguments 的使用
			function fn() {
				// console.log(arguments);// 里面存储了所有传递过来的实参 arguments = [1,2,3]
				// console.log(arguments.length); // 3
				// console.log(arguments[1]);// 2 
				// 按照数组的方式遍历arguments
				for (var i = 0; i < arguments.length; i++) {
					console.log(arguments[i]);
				}
			}
			fn(1,2,3); // 1,2,3
			// fn(1,2,3,4,5);// 1,2,3,4,5
		</script>
	</head>
	<body>
	</body>
</html>

求任意个数的最大值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 利用函数求任意个数的最大值
			function getMax() { // arguments = [1,2,3]
				var max = arguments[0];
				for (var i = 1; i < arguments.length; i++) {
					if (arguments[i] > max) {
						max = arguments[i];
					}
				}
				return max;
			}
			console.log(getMax(1,2,3));// 3
			console.log(getMax(1,2,3,4,5));// 5
			console.log(getMax(11,2,34,444,5,100));// 444
		</script>
	</head>
	<body>
	</body>
</html>

利用函数翻转数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 利用函数翻转任意数组 reverse 翻转
			function reverse(arr) {
				var newArr = [];
				for (var i = arr.length - 1; i >= 0; i--) {
					newArr[newArr.length] = arr[i];
				}
				return newArr;
			}
			var arr1 = reverse([1,3,4,6,9]);
			console.log(arr1);
			var arr2 = reverse(['阿波','波波','宏波']);
			console.log(arr2);
		</script>
	</head>
	<body>
	</body>
</html>

利用函数冒泡排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 利用函数冒泡排序 sort 排序
			function sort(arr) {
				for (var i = 0; i < arr.length - 1; i++) {
					for (var j = 0; j < arr.length - i - 1; j++) {
						if (arr[j] > arr[j + 1]) {
							var temp = arr[j];
							arr[j] = arr[j + 1];
							arr[j + 1] = temp;
						}
					}
				}
				return arr;
			}
			var arr1 = sort([1,4,2,9]);
			console.log(arr1);
			var arr2 = sort([11,7,22,999]);
			console.log(arr2);
		</script>
	</head>
	<body>
	</body>
</html>

利用函数判断闰年

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 利用函数判断闰年
			function isRunYear(year) {
				// 如果是闰年我们返回 true 否则 返回 false
				var flag = false;
				if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
					flag = true;
				}
				return flag;
			}
			console.log(isRunYear(2000)); // true
			console.log(isRunYear(1999)); // false
		</script>
	</head>
	<body>
	</body>
</html>

函数调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 函数是可以互相调用的
			function fn1() {
				console.log(11);
				fn2(); // 在fn1函数里面调用了fn2函数
			}
			fn1();
			
			function fn2() {
				console.log(22);
			}
			// 结果：
			// 11
			// 22
		</script>
	</head>
	<body>
	</body>
</html>

案例

用户输入年份，输出当前年份2月份的天数，如果是闰年，则2月份是29天，如果是平年，则2月份是28天

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function backDay() {
				var year = prompt('请输入年份：');
				if (isRunYear(year)) {
					alert('当前年份是闰年，2月份有29天');
				} else {
					alert('当前年份是平年，2月份有28天');
				}
			}
			backDay();
			
			//判断是否为闰年的函数
			function isRunYear(year) {
				// 如果是闰年返回true 否则 返回false
				var flag = false;
				if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
					flag = true;
				}
				return flag;
			}
		</script>
	</head>
	<body>
	</body>
</html>

函数的两种声明方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 函数的两种声明方式
			// 1.利用函数关键字自定义函数（命名函数）
			function fn() {
				
			}
			fn();
			// 2.函数表达式（匿名函数）
			// var 变量名 = function(){};
			var fun = function(aru) {
				console.log('我是函数表达式');
				console.log(aru);
			}
			fun();
			// (1)fun是变量名 不是函数名
			// (2)函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
			// (3)函数表达式也可以进行传递参数
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript作用域

就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，重要的是减少命名冲突

变量的作用域

根据作用域的不同我们变量分为全局变量和局部变量

全局变量和局部变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.全局变量：在全局作用域下的变量 在全局下都可以使用
			// 注意：如果在函数内部 没有声明直接赋值的变量也属于全局变量
			var num = 10;// num就是一个全局变量
			console.log(num);// 10
			
			function fn() {
				console.log(num);
			}
			fn(); // 10
			// 2.局部变量 在局部作用域下的变量 后者在函数内部的变量就是 局部变量
			// 注意：函数的形参也可以看做是局部变量
			function fun(aru) {
				var num1 = 10;// num1 就是局部变量 只能在函数内部使用
				num2 = 20;
			}
			fun();
			// console.log(num1);
			// console.log(num2);// 20
		</script>
	</head>
	<body>
	</body>
</html>

全局变量

全局变量在代码的任何位置都可以使用
在全局作用域下var声明的变量是全局变量
特殊情况下，在函数内不使用var声明的变量也是全局变量（不建议使用）

局部变量

局部变量只能在该函数内使用
在函数内部var声明的变量是局部变量
函数的形参实际上就是局部变量

区别

// (1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
// (2) 局部变量 当我们程序执行完毕就会销毁，比较节约内存资源

作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链 就近原则
			var num = 10;
			function fn() { // 外部函数
				var num = 20;
				
				function fun() { // 内部函数
					console.log(num);
				}
				fun();
			}
			fn();// 20
		</script>
	</head>
	<body>
	</body>
</html>

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 案例1：结果是几？
			function f1() {
				var num = 123;
				
				function f2() {
					var num = 0;
					console.log(num);// 站在目标出发，一层一层的往外查找
				}
				f2();
			}
			var num = 456;
			f1();// 0
			
			// 案例2：结果是几？
			var a = 1;
			function fn1() {
				var a = 2;
				var b = '22';
				fn2();
				function fn2() {
					var a = 3;
					fn3();
					function fn3() {
						var a = 4;
						console.log(a);// a的值？
						console.log(b);// b的值？
					}
				}
			}
			fn1();
		</script>
	</head>
	<body>
	</body>
</html>