前端-JS-数组/函数/作用域/预解析

1. 数组

一组数据的集合，将一组数据存在一个变量内

var num = [1,2,3,4,5]; // num 变量内存储 5 个值

1. 创建数组

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

   b.数组字面量创建;
   var 数组名 = [];
   var arr = [1, 2, 'IU', true]; // 数组中可放任意的值，数组里面的值用逗号隔开，数组中的值称为数组元素

2. 获取数组中的元素（提取数组元素中的某一项）

   索引（下标）：用来访问数组元素的序号（数组下标从0开始）
   表达形式：数组名[索引号]

   var arr = ['小白','小黑','小黄','小红'];
     索性号      0      1     2     3
   console.log(arr[3]);  // 输出为小红

3. 遍历数组（提取数组中的全部元素）

   将数组中的每个元素访问一次；利用循环，可一次性将数组中的元素全部提取出来

   var arr = ['小白','小黑','小黄','小红'];
   for (var i = 0; i < 4; i++){
      console.log(arr[i]);
   }  // 因为数组索引号从0开始，所以i=0；且索引号到3结束，所以i<4；

4. 数组长度

   a. 使用“数组名.length“可以访问数组元素的数量
   b. 数组的长度是元素的个数，不能加等于号

   var arr = ['小白','小黑','小黄','小红'];
   for (var i = 0; i < arr.length; i++){
      console.log(arr[i]);
   }

   ❤️案例：求[2,6,1,7,4]里面所有元素的和以及平均值
   var sum = 0;
   var aver = 0;
   var arr = [2, 6, 1, 7, 4];
   for (var i = 0; i < arr.length; i++) {
      sum = sum + arr[i];  // i是计数器，这里需要的是数组元素相加，所以应该为sum+arr[i];
   }
   aver = sum / arr.length; // 用sum/数组元素个数即可得出平均值；
   console.log(sum,aver);  // 输出多个变量用逗号隔开

   ❤️案例：求[2, 6, 1, 77, 52, 25, 7]中的最大值
   var arr = [2, 6, 1, 77, 52, 25, 7];
   var max = arr[0];  // 设置一个存储最大值的变量为数组元素中的第一个数
   for (var i =1; i < arr.length; i++){  // 因为已经将数组元素中的第一个数赋值给max，所以i可以从索引号1开始比较
      if (arr[i] > max){
         max = arr[i];  // 设置if条件：当数组元素大于max的值时，替换掉max中的原值，即可得出最大值
      }
   }

   ❤️案例：将数组['red', 'blue', 'green']输出为：red|blue|green|
   var arr = ['red', 'blue', 'green'];
   var str = '';
   var sep = '|';
   for (var i = 0; i < arr.length; i++) {
      str += arr[i] + sep;
   }

5. 数组中新增元素

   a. 通过修改length长度新增数组元素
   var arr = ['red', 'blue', 'green'];
   arr.length = 5; // 把数组长度修改为5，数组中应该有5个元素，后面增加的值为默认值：undefined;

   b. 通过修改数组索引新增数组元素
   var arr = ['red', 'blue', 'green'];
   arr[3] = 'IU'; // 输出arr数组元素为4个，新增一组元素：IU；
   arr[0] = 'yellow'  // 输出第一个数组元素被替换为yellow；
   arr = 'hz'  // 如果直接给数组名赋值会覆盖掉前面的数组元素；

   ❤️案例：设置一个数组，数组元素为1～10；
   var arr = [];  // 设置一个空数组
   for (var i = 0; i < 10; i++) {  // 索引从0开始，所以i=0；1-10位10个数，所以i<10；
     arr[i] = i + 1;  // 因为从0开始，所以需i+1；因需输出数组，所以需arr[i]=i;
   }

   ❤️案例：将数组[2, 0, 6, 1, 77, 0, 52, 25, 7]中大于等于10的数组成一个新的数组
   方法A：
   var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
   var arr1 = [];  // 将新数组设置一个变量赋值为空数组；
   var j = 0;  // 设置一个新数组的索引变量为0；
   for (var i = 0; i < arr.length; i++) {
     if (arr[i] >= 10) {
         arr1[j] = arr[i]; // 新数组应该从0开始依次递增
         j++;
      }
   }
   方法B：
   var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
   var arr1 = [];
   for (var i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
         arr1[arr1.length] = arr[i];  // 设arr1.length检测数组元素，
      }
   }

6. 数据排序（冒泡排序）

是一种简单算法，可以将一系列数据按照一定的顺序进行排列（从小到大或从大到小）
// 将数组从小到大排列
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; i++){  //里层循环管理的是每一次交换时的次数
		// 内部交换两个变量值，前一个与后一个相比较
		if（arr[j] > arr[j + 1]){
			var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
		}
	}
}
// 方法二
var arr = [1,3,2,5,4];
arr.sort(); // 只能实现个位数从小到大排序
console.log(arr); // 输出为[1,2,3,4,5];
arr.sort(function(a,b){  // 可以实现多位数排序
  return a - b; // 升序排列
  return b - a; // 降序排列
})

7. 翻转数组

将数组[2, 0, 6, 1, 77, 0, 52, 25, 7]内容反过来输出
var arr = [2, 0, 6, 1, 77, 0, 52, 25, 7];
var arr1 = [];
for (var i = arr.length - 1; i >= 0; i--) {
   // 将新数组的最后一个（arr.length - 1)给新数组索引第0个元素（arr1.length）；新数组元素索引从0开始所以i>=0；采取递减形式
   arr1[arr1.length] = arr[i];
}

// 方法二
var arr =[1,2,3,4];
arr.reverse();
console.log(arr); // 输出为[4,3,2,1]

2. javascrip 函数

1. 函数的概念

a. 封装一段可以被重复执行调用的代码块，为了让大量代码重复使用

b. 封装：把一个或多个功能通过函数进行封装，对外只提供一个简单的函数接口

2. 函数的使用

   a. 申明函数   //  函数时做某些事，函数名一般用动词；函数不调用自己不执行
   	function 函数名(){
       // 函数体（函数代码）;
      }

   b. 调用函数  // 调用函数时勿忘加小括号
   	函数名();

   ❤️案例：利用函数计算1～100总和
   function getSum(num1,num2){
      var sum = 0;
      for (var i = num1; i <= num2; i++){
         sum += i;
     }
   }
   getSum(1,100); // 1～100的总和
   getSum(10,50); // 10～50的总和

3. 函数的参数

   // 参数的作用：在函数内部的值不固定时，可通过参数在调用函数时传递不同的值进去

   function 函数名(形参1,形参2...){
       // 在声明函数的小括号内是形参（形式上的参数）
   }
   函数名(实参1,实参2...)；  // 在函数调用的小括号内是实参（实际的参数）

   形参与实参的执行过程：
   function cook(aru){  // 形参类似于一个变量，是接收实参的
      console.log(aru);
   }
   cook('IU');
   a. 先进行函数调用，在进行函数判断
   b. 调用函数后，实参的值赋值给形参，进行代码输出

   ❤️案例：利用函数求任意两个的和

   function getSum(num1, num2){
   	console.log(num1 + num2);
   }
   getSum(1,100); // 输出为101，多个参数用逗号隔开

   ⚠️ 函数实参与形参个数不匹配的情况
   function getSum(num1, num2){
   	console.log(num1 + num2);
   }
   getSum(1,2,3)； // 输出为3，多出的实参3，不会加入运算
   getSum(1)； // 输出为NaN，num2未赋值为undefined,数值+undefined=NaN

4. 函数的返回值

   a. return语句：将函数返回值返回给函数调用者
   b. return是终止函数，return后的代码不会执行；
   c. return只会返回一个值，多个值的情况会返回最后一个值；
   d. 函数中没有return返回的值为undefined;

   function 函数名(){
      return 需要返回的结果;  // 当函数遇到return会把后面的结果返回给函数的调用者；函数名()=return后面的结果；
   }
   函数名();

   function cook(aru){
      return aru;
   }
   console.log(cook('IU'));  // 输出为IU

   ❤️案例：求两个数的最大值
   function getMax(num1,num2){
      if(num1 > num2){
         return num1;
      } else {
         return nmu2;
      }
   }
   console.log(getMax(1,2));  // 输出为2

   ❤️案例：利用函数求数组中的最大值
   function getMax(arr){
      var max = arr[0];
      for (var i = 1; i < arr.length; i++) {
         if (age[i] > max) {
         max = age[i];
     	   }
   	}
      return max;
   }
   var re = getMax([5,2,99,101]);  // 实际开发中常用一个变量接收函数的返回结果
   console.log(re); // 输出为101；

5. arguments 的使用

   a. 当不确定有多少个参数传递的情况下，可以用arguments来获取
   b. arguments是当前函数的一个内置对象，argumets对象中存储了传递的所有实参
   c. 展示形式是一个伪数组（不是真正意义上的数组），伪数组的特性：
      i. 具有数组的length属性；
      ii. 按照索引的方式进行存储；
      iii. 没有真正数组的一些方法;

   function fn(){
      console.log(arguments); // 里面存储了所有传递过来的实参。输出[1,2,3];
      console.log(arguments[2]);  // 输出为3
   }
   fn(1,2,3);

   function age(){
      for (var i = 0; i < arguments.length; i++){
         console.log(arguments[i]);
      }
   }

   ❤️案例：利用函数求最大值
   function getMax(){
      var max = arguments[0];
      for (var i = 1; i < arguments.length; i++){
         if(arguments[i] > max){
         max = arguments;
         }
      }
      return max;
   }

6. 函数相互调用

   function fn1(){
     fn2();  // 在fn1中调用fn2函数
   }
   fn1();
   function fn2(){
   }
   
   // 用户输入年份，输出当前年份2月份的天数
   function backDay() {
      var year = prompt('请输入一个年份');
      if (isRunYear(year)) {  // 调用isRunYear函数
         alert('这是一个闰年2月份为29天');
      } else {
         alert('这是一个平年2月份为28天');
      }
   }
   backDay();
   
   function isRunYear(year) {
      var flag = false;
      if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
         flag = true;
      }
      return flag;
   }

7. 函数的两种声明方式

   a. 利用函数关键字自定义函数
   	function fn(){} // 定义函数
   	fn(); // 调用函数
   b. 函数表达式（匿名函数）
   	var 变量名 = function(){} // 利用变量定义函数
   	变量名(); // 调用函数
   
   var fun = function(aru){
      console.log(aru);
   }
   fun('IU');  // 输出IU

❤️案例

// 利用函数翻转任意数组
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,2,3,4,5]);
console.log(arr1);  // 输出结果为[5,4,3,2,1]

// 利用函数封装冒泡排序
function aort(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] = remp;    
         }
      }
   }
   return arr;
}
var arr1 = aort([1,2,3,4,5]);
console.log(arr1);

// 输入年份，判断是否为闰年
function isRunYear(year){
   // 如果是闰年返回true 否则返回false
   var flag = false;
   if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
      flag = true;
   }
   return flag;
}

3. javaScrip作用域

a. 代码名字（变量）在某个范围内起作用和效果

b. 目的是为了提高程序的可靠性，更重要的是减少命名冲突

1. js作用域（es5）的分类

a. 全局作用域：整个script标签中或一个单独的js文件（在全局下都能调用）

b. 局部作用域：在函数内部就是局部作用域（只在函数内起作用和效果）

c. 在不同作用域下相同变量名不会冲突

d. es5中js没有块级作用域。es6中有（块级作用域是{}中的内容）

2. 变量作用域的分类

a. 全局变量：整个script标签中或一个单独的js文件（在全局下都能调用）

b. 局部变量：在函数内部就是局部作用域（只在函数内起作用和效果）

c. 如果在函数内部没有声明，直接赋值的变量也属于全局变量

d. 函数的形参也属于局部变量

e. 全局变量只有浏览器关闭时才会销毁，占内存资源大；局部变量在程序执行完毕就会销毁，比较节约内存资源

3. 作用域链

   var num = 1;
   function fun(){
      var num = 2;
      function fn(){
         console.log(num);  // 输出为2，作用域链会一层层向外查找相应的数据；
      }
   }

4. javaScrip预解析

a. js引擎运行js分为两步：预解析和代码执行

b. 预解析：js引擎会把js里面的var还有function提升到当前作用域的最前面

c. 代码执行：按照代码书写的顺序从上往下执行

a. 变量预解析（变量提升）:将所有的变量声明提升到当前的作用域最前面，不提升赋值操作
console.log(num);
var num = 10;  // 输出为undefined

b. 函数预解析（函数提升）:将所有的函数声明提升到当前的作用域最前面，不调用函数
fun();
function fun(){
   console.log(11);
}   // 可正常输出11结果

❤️案例：
var num = 10;
fun();
function fun(){
   console.log(num);
   var num = 20;
}
// 执行代码如下：
var num; // 变量提升到全局的最前面
function fun(){  // 函数提升到全局的最前面
   var num; // 变量提升到当前函数作用域的最前面
   console.log(num);  // 输出结果为undefined，当前num未赋值
   num = 20;
}
num = 10;
fun();