这篇博客详细介绍了JavaScript中的数组操作，包括创建方式、元素类型、索引、遍历、新增元素以及冒泡排序。此外，还深入探讨了函数的使用，如声明、参数、返回值，以及arguments对象的应用。最后，讲解了JavaScript的作用域概念，包括全局和局部变量以及作用域链。
数组
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素
//普通变量一次只能存储一个值
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>
数组转换为分割字符串
要求将数组[‘red’,‘blue’,‘pink’] 转换为字符串，并且用 | 或其他符号分割，输出：‘red|green|blue|pink|’
分析：
- 需要一个新变量用于存放转换完的字符串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>
扫一扫
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
