【 js基础 Day5】函数(重点),作用域,预解析,arguments,对象

在这里插入图片描述

01 复习

break:在循环中遇到这个关键字,直接跳出当前所在的循环
continue:在循环中遇到这个关键字,直接进行下一次循环

数组:存储一组有序的数据,数据类型可以不一样
数组的作用:一次性存储多个数据
数组元素:数组中存储的每个数据,叫数组元素,存储了5个数据,有5个数组元素

数组的长度:数组的元素的个数,叫数组的长度:数组名.length—>就是长度,数组的长度是可以改变的
索引(下标):存储数组元素的编号,从0开始,到数组的长度-1结束
索引是用来存储和读取数组元素的

遍历数组:通过循环的方式找到数组中的每个数据

冒泡排序:
求数组的和,最大值,最小值,平均值

数组定义的方式:

  1. 通过构造函数定义数组
    var 数组名=new Array();空数组 Array()就是构造函数
    var 数组名=new Array(长度);是设置数组的初始的长度,长度是可以改变的
    var 数组名=new Array(值,值,值…);定义数组并设置数组中的元素值
  2. 字面量的方式定义数组
    var 数组名=[];空数组
    var 数组名=[10];这个数组有一个元素,值是10,长度是1
    数组变量
 for(var i=0;i<数组名.length;i++){

  }

函数:把一些重复的代码封装起来,在需要的时候直接调用这个函数就可以了
函数作用:代码的重用
函数定义:

  function 函数名(){
      函数体
  }
  函数调用:
  函数名();

参数:形参和实参
形参:函数定义的时候函数名字后面的小括号里的变量就是参数,是不需要写var
实参:函数调用的时候小括号里传入的变量或者是值,都是实参
返回值:函数中如果有return,那么这个函数就有返回值
如果函数中没有return,那么这个函数没有返回值
如果函数中有return,但是后面什么内容都没有,这个函数没有明确返回值
如果一个函数没有明确的返回值,函数调用了,并且接收了,那么此时接收的结果undefined
如果直接输出函数名字,那么是这个函数的代码
无参数无返回值的函数

  function f1(){

  }

有参数无返回值的函数,2个参数

  function f2(x,y){

  }

无参数有返回值的函数

  function f3(){
    return 100;
  }

有参数有返回值的函数

  function f4(x){
   return "您好";
  }
 var arr = [1, 3, 2, 7, 11, 99, 22, 5, 222];
    //循环控制比较的次数
    for (var i = 0; i < arr.length - 1; i++) {
      //此时只是比较了一次---如果需要比较多次---for循环
      for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {//第一个元素和第二个元素比较
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    console.log(arr)



     var arr = [1, 5, 10, 3, 100, 20];
     //循环控制比较的轮数
     for (var i = 0; i < arr.length - 1; i++) {
       //此时只是比较了一次---如果想要比较多次--for循环
       for (var j = 0; j < arr.length - 1 - i; j++) {
         if (arr[j] < arr[j + 1]) {
           var temp = arr[j];
           arr[j] = arr[j + 1];
           arr[j + 1] = temp;
         }
       }
     }
     console.log(arr);

         //隐式全局变量
    for( i=0;i<10;i++){
      console.log("今天天气真好");
    }

02 课程介绍

函数—案例-----重点
函数的注意问题—常见的一些错误—自己写代码,自己犯错,指点一二
作用域----重点的----写代码要注意变量的在哪声明和使用的问题—
预解析—重点----什么叫预解析, 什么东西发生了什么事
arguments—对象----伪数组
对象—js后面就轻松—什么是对象-找对象—重点

03 函数练习(1)

求2个数中的最大值

  function getMax(num1, num2) {
    return num1 > num2 ? num1 : num2;
  }
  console.log(getMax(10,20));
  //console.log(getMax);//函数的代码

  function getMax(num1, num2) {
    return num1 > num2 ? num1 : num2;
  }
  var num1=10;
  var num2=20;
  //函数外面的num1和函数的形参num1不是同一个变量
  var result=getMax(num1,num2);
  console.log(result);
  console.log(getMax);//函数的代码

求3个数中的最大值

  function getThreeMax(x, y, z) {
    return x > y ? (x > z ? x : z) : (y > z ? y : z);
  }
  console.log(getThreeMax(10,2,24));

判断一个数是否是素数(质数),只能被1和自身整除,质数是从2开始
用这个数字和这个数字前面的所有的数字整除一次(没有1的,没有自身的)

 function isPrimeNumber(num) {
   for (var i = 2; i < num; i++) {
     if (num % i == 0) {
       //说明有一个数字整除了,就没有必要向后继续整除了,
       //此时就已经验证出不是质数
       return false;
     }
   }
   return true;
 }

//  console.log(isPrimeNumber(7) ? "yyyyyes" : "nnnnnno")


 var aa = isPrimeNumber(17);
 if (aa) {
   console.log("yes");
 } else {
   console.log("no");
 }

 function isPrimeNumber(num) {
   for(var i=2;i<num;i++){
     if(num%i==0){
       //说明有一个数字整除了,就没有必要向后继续整除了,此时就已经验证出不是质数
       return false;
     }
   }
   return true;
 }
 console.log(isPrimeNumber(8)?"是质数":"不是质数");

    var result=isPrimeNumber(2);
    if(result){
      console.log("这个数字是质数");
    }else{
      console.log("这个数字不是质数");
    }

 function aaa(x,y){
   return x-y;
 }
 console.log(aaa(99,88))

求一组数字中的最大值

 function getArrayMax(array) {
   //定义变量假设这个变量存储的是最大值
   var max = array[0];
   for (var i = 0; i < array.length; i++) {
     if (max < array[i]) {
       max = array[i];
     }
   }
   return max;
 } 
 var arr=[11,22,33,44,444];
 var max=getArrayMax(arr);
 console.log(max);

求一组数字中的最小值

   function getArrayMin(array){
     //假设这个变量里存储的是最小值
     var min=array[0];
     for(var i=0;i<array.length;i++){
       if(min>array[i]){
         min=array[i];
       }
     }
     return min;
   }
  console.log(getArrayMin([11,33,44,88,33,100,11]))

04 函数练习(2)

求两个数字的差

 function getSub(x, y) {
   return x - y;
 }
 console.log(getSub(10, 20));

求一组数字中的最大值

 function getArrayMax(array) {
   //定义变量假设这个变量中存储的是最大值
   var max = array[0];
   for (var i = 0; i < array.length; i++) {
     if (max < array[i]) {
       max = array[i];
     }
   }
   return max;
 }
 //    var arr=[10,20,30,40,50];
 //    var max=getArrayMax(arr);
 //    console.log(max);
 var max = getArrayMax([10, 20, 30, 40, 50]);//可以直接把数组传到函数中的
 console.log(max);

求一组数字中的最小值

 function getArrayMin(array) {
   //假设这个变量里存储的是最小值
   var min = array[0];
   for (var i = 0; i < array.length; i++) {
     if (min > array[i]) {
       min = array[i];
     }
   }
   return min;
 }
测试----调用函数并传入一个数组,把数组中的最小值直接显示出来
 console.log(getArrayMin([10, 20, 30, 40, 1]));

求一组数字的和

  function getArraySum(array){
       var sum=0;
       for(var i=0;i<array.length;i++){
        sum+=array[i];
       }
       return sum;
     }
     console.log(getArraySum([1,2,3,4]))
// function getArraySum(array) {
   var sum = 0;
   for (var i = 0; i < array.length; i++) {
     sum += array[i];
   }
   return sum;
 }
 console.log(getArraySum([1, 2, 3, 4, 5, 6]));

ios VS 安卓
求一个数组中的最大值和最小值还有和

   function aa() {
       var min = array[0];
       var max = array[0];
       var sum = 0;
       for (var i = 0; i < array.length; i++) {
         sum += array[i];
         if (max < array[i]) {
           max = array[i];
         }//end if
         if (min > array[i]) {
           min = array[i];
         }//end if
       }//end for
       var arr = [max, min, sum];
       return arr;
     }
     var bb = aa([1, 2, 3, 4, 5, 6]);
     console.log("max:" + bb[0]);
     console.log("min:" + bb[1]);
     console.log("sum:" + bb[2]);

/**
* 给我一个数组,我返回一个数组(最大值,最小值,和)
* @param array参数是一个数组
* @returns {*[]}返回值是一个数组,第一个元素值是最大值,第二个元素值是最小值,第三个元素值是和
*/

 function getArrayMaxAndMinAndSum(array) {
  var min = array[0];//最小值
  var max = array[0];//最大值
  var sum = 0;//和
  for (var i = 0; i < array.length; i++) {
    sum += array[i];//和
    //最大值
    if (max < array[i]) {
      max = array[i];
    }// end if
    //最小值
    if (min > array[i]) {
      min = array[i];
    }// end if
  }// end for
  var arr = [max, min, sum];
  return arr;
}
//测试
var resultArray = getArrayMaxAndMinAndSum([1, 2, 3, 4, 5, 6, 7]);
console.log("最大值:" + resultArray[0]);//7
console.log("最小值:" + resultArray[1]);//1
console.log("和:" + resultArray[2]);//28

通过函数实现数组反转

 function reverseArray(arr) {
      for (var i = 0; i < arr.length / 2; i++) {
        var temp = arr[i];
        arr[i] = arr[arr.length - 1 - i];
        arr[arr.length - 1 - i] = temp;
      }
      return arr;
    }
    console.log(reverseArray([1, 2, 3, 4, 5]));

通过函数实现冒泡排序

 function sortArray(arr) {
      //控制比较的轮数
      for (var i = 0; i < arr.length - 1; i++) {
        //控制每一轮的比较次数
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }//end if
        }//end for
      }//end for
      return arr;
    }
    console.log(sortArray([0, 19, 34, 10, 100, 2]));

求一个数字的阶乘

function getJieCheng(num) {
 var result = 1;
  for (var i = 1; i <= num; i++) {
    result *= i;
  }
  return result;
}
console.log(getJieCheng(5));//1*2*3*4*5

求一个数字的阶乘和 5 5的阶乘+4的阶乘+3的阶乘+2的阶乘+1的阶乘

 function getJieChengSum(num) {//5
   var sum = 0;//和
   for (var i = 1; i <= num; i++) {
     sum += getJieCheng(i);
   }
   return sum;
 }
 console.log(getJieChengSum(5));

1 +2+ 6+ 24+120
函数内部可以调用其他的函数

 function sayHi(fn){
   console.log("nihao");
   fn();//此时fn应该是一个函数
 }
 function suSay(){
  console.log("nice");
 }

suSay(suSay);

函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫做回调函数
只要是看到一个函数作为参数使用了,那就是回调函数

05 函数练习(3)

求斐波那契数列,12—144
1 1 2 3 5 8 13 21 34 55 89 144

  function getFib(num){
    var num1=1;
    var num2=1;
    var num3=0;
    for(var i=3;i<=nnum;i++){
      sum=num1+num2;
      num1=num2;
      num2=sum;
    }
    return sum;
  }
  console.log(getFib(12))
function getFib(num) {
  var num1=1;
  var num2=1;
  var sum=0;
  for(var i=3;i<=num;i++){
    sum=num1+num2;
    num1=num2;
    num2=sum;
  }
  return sum;
}
console.log(getFib(12));

06 函数案例

输入,年月日,获取这个日期是这一年的第多少天
判断这个年份是不是闰年

function isLeapYear(year) {
  return year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
}
//年---月---日:2017年4月28日
function getDays(year, month, day) {
  //定义变量存储对应的天数
  var days = day;
  //如果用户输入的是一月份,没必要向后算天数,直接返回天数
  if (month == 1) {
    return days;
  }
  //代码执行到这里-----说明用户输入的不是1月份
  //用户输入的是7月份23日----1,2,3  +23
  //定义一个数组,存储每个月份的天数
  var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  //小于的是输入的月份-1
  for (var i = 0; i < month - 1; i++) {
    days += months[i];

需要判断这个年份是不是闰年

    if (isLeapYear(year) && month > 2) {
      days++;
    }
    return days;
  }
}
console.log(getDays(2000, 3, 2));

函数里面可以调用其他的函数

  function f1() {
    console.log("我是一个函数");
    f2();//函数的调用
  }
  function f2() {
    console.log("我也是一个函数");
  }

  f1();

07 arguments对象

计算两个数字的和

function f1(x, y) {
  return x + y;
}

计算三个数字的和

function f2(x, y, z) {
  return x + y + z;
}

计算四个数字的和

function f3(x, y, z, k) {
  return x + y + z + k;
}

计算五个数字的和

function f4(a, b, c, d, e) {
  return a + b + c + d + e;
}

计算六个数字的和

function f5(a, b, c, d, e, f) {
  return a + b + c + d + e + f;
}

计算n个数字的和
定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传了几个参数,没办法计算,但是如果在函数中知道了参数的个数,也知道了,每个参数的值.

//定义
function f1() {
  //获取的是函数在调用的时候,传入了几个参数
  //console.log(arguments.length);
  //使用arguments对象可以获取传入的每个参数的值
  console.log(arguments);
}

f1(10,20,30,40,100,200);//调用
 function f1() {
   //arguments----->数组使用------伪数组---
   var sum=0;
   for(var i=0;i<arguments.length;i++){
     sum+=arguments[i];
   }
   return sum;
 }

 console.log(f1(10,20,30));

08 函数的其他的定义方式

命名函数:函数如果有名字,就是命名函数
匿名函数:函数如果没有名字,就是匿名函数

函数的另一种定义方式

函数表达式:
把一个函数给一个变量,此时形成了函数表达式
var 变量=匿名函数;
例子:
var f1=function (){
  
};

如果是函数表达式,那么此时前面的变量中存储的就是一个函数,而这个变量就相当于是一个函数,就可以直接加小括号调用了

f1();

注意:
函数表达式后面,赋值结束后,要加分号

  函数定义:
    1. 函数声明--函数定义
    function 函数名(){
        函数体
    }
  var f1=function(){console.log("阿涅哈斯诶呦");};
        f1();

函数的自调用,没有名字,调用—声明的同时,直接调用
一次性的--------

   (function(){console.log("阿涅哈斯诶呦");})();
   (function(){console.log("嘎嘎")})();
   function f1() {
     console.log("哈哈,我又变帅了");
   }
   f1();//函数调用
   //如果一个函数能够调用:  函数的代码();

函数表达式

  var f2 = function () {
    console.log("哈哈,真的好帅哦");
  };

匿名函数不能直接调用

   f2();


   var f4 = function () {
     console.log("我是一个函数");
   };
   f4();

   var num=10;

函数声明

 function f1() {
   console.log("助教好帅哦");
 }
 f1();
 function f1() {
   console.log("小苏好猥琐哦");
 }
 f1();

函数表达式

 var f2 = function () {
   console.log("助教没有小杨帅");
 };
 f2();
 f2 = function () {
   console.log("小杨真的很帅");
 };
 f2();

函数自调用

 (function () {
    console.log("阿涅哈斯诶呦");
  })();
  (function () {
    console.log("嘎嘎")
  })();
 var num=10;
 console.log(num);
 num=100;
 console.log(num);

09 函数也是一种数据类型

 function f1() {
      console.log("我是函数");
    }

如何获取某个变量的类型? typeof

console.log(typeof f1);

函数是有数据类型,数据类型:是function 类型的

10 函数作为参数使用

函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数 只要是看到一个函数作为参数使用了,那就是回调函数

function sayHi(fn) {
  console.log("您好啊");
  fn();//fn此时应该是一个函数
}
function suSay() {
  console.log("我猥琐,我邪恶,我龌龊,小苏说");
}


sayHi(suSay);



function f1(x,y) {
  console.log(x+y);
}
f1(10,20);

function f2(x,y) {
  console.log(x+y);
}
f2("小苏","猥琐");
function f3(x) {
  console.log(x);
}
f3(true);

函数声明,fn是变量,fn是参数,

 function f1(fn) {
   fn();//函数调用---说明fn这个变量中存储的是一个函数
 }

 function f2() {
   console.log("哦,这也可以");
 }
 f1(f2);


var f1=function () {
  console.log("哈哈");
};

11 函数作为返回值使用

结论:函数是可以作为返回值使用的:

function f1() {
  console.log("f1函数调用了");
  return function () {
    console.log("这是一个函数");
  };
}
var ff=f1();//调用
//ff就是一个函数了
ff();

12 作用域:使用范围

全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用
除了函数以外,其他的任何位置定义的变量都是全局变量
局部变量:在函数内部定义的变量,是局部变量,外面不能使用
全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存

全局作用域:全局变量的使用范围
局部作用域:局部变量的使用范围

块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;
说明:js没有块级作用域,只有函数除外

隐式全局变量:声明的变量没有var,就叫隐式全局变量
全局变量是不能被删除的,隐式全局变量是可以被删除的
定义变量使用var是不会被删除的,没有var是可以删除的

function f1() {
  number=1000;//是隐式全局变量
}
f1();
console.log(number);
 var num1=10;
 num2=20;
 delete num1;//把num1删除了
 delete num2;//把num2删除了
 console.log(typeof num1);
 console.log(num1+10);
 console.log(typeof num2);
num=100;
console.log(num);

扩展:隐式

function f1() {
  var num=100;
  num+=10;
}
f1();//这个函数结束之后


{
  var num=10;
  console.log(num);//10
}
console.log(num);

if(true){
  var num=10;
}
console.log(num);
for(var i=0;i<5;i++){
  var number=20;
}
console.log(number);

 var i=0;
 while (i<5){
   var num=100;
   i++;
 }
 console.log(num);


function f1() {
  var num=10;
}
f1();
console.log(num);

var num=10;
console.log(num);//10

13 作用域链

  var num=10;
    function f1() {
      var num=20;
      function f2() {
        var num=30;
        function f3() {
          var num=50;
          console.log(num);
        }
        f3();
      }
      f2();
    }
    f1();

14 预解析:提前解析代码

预解析:就是在解析代码之前
预解析做什么事?
把变量的声明提前了----提前到当前所在的作用域的最上面
函数的声明也会被提前—提前到当前所在的作用域的最上面

函数调用的时候,把会函数的声明提升到作用域的上面

 f1();//调用
 var num=20;//这个变量的声明会提升到变量使用之前
 function f1() {
   console.log(num);
   //var num=10;
 }

 function f1() {
   console.log("小苏好猥琐");
 }


 f1();
 function f1() {
   console.log("小苏没有助教猥琐");
 }
 f1();

把变量的声明提前了

   var num;
   console.log(num);
   num=10;
   function f1() {
     console.log("哈哈,助教好猥琐哦");
   }
   //f1();//报错

15 预解析分段的问题的局部作用域的问题

预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面

  function f1() {

    console.log(num);//undefined
    var num = 10;
  }
  f1();
  console.log(num);//报错 

函数中的变量只会提前到函数的作用域中的最前面,不会出去
预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)

 function f1() {

   console.log(num);//undefined
   var num=10;
 }
 f1();
 console.log(num);//


 function f1() {
   console.log("哈哈");
 }

16 快速识别预解析的结果

f1();//报错
var f1=function(){
  console.log(a);
  var a=10;
}


var f1;//此处没有赋值
f1();//不能调用
fi=function(){
  console.log(a);
  var a=10;
}
//表达式是赋值的,


f2();
function f2(){

}



  var a = 25;
  function abc (){
    alert(a);//undefined
    var a = 10;
  }
  abc();
  console.log(a);//25


   var a;
 function a() {
   console.log('aaaaa');
 }
     console.log(a);
 
    a = 1;
     console.log(a);//1

   var a;
   a = 18;
   function f1() {
     var b;
     var a;
     b = 9;
     console.log(a);//undefined
     console.log(b);//9
    a = '123';
   }
   f1();
 function f1() {
   var a;//局部变量
   a=9;
   //隐式全局变量
   b=9;
   c=9;
   console.log(a);//9
   console.log(b);//9
   console.log(c);//9
 }
 f1();
 console.log(c);//  9
 console.log(b);// 9
 console.log(a);//报错

console.log(parseInt(Math.random()*57+1));
f1();//-----报错
   var f1=function () {
      console.log(a);
      var a=10;
    };

    function f2() {

    }
    f2();

百度MDN查 Date Array String 的方法
https://www.so.com/s?q=MDN&ie=utf-8&src=se7_newtab_new

function Array(){
       for(var i=1;i<=5;i++){
         sum+=i;
       }
     }
     console.log(sum)
     Array();//调用函数


     var arr=[1,2,3,4,5];
     var sum=0;
     function sortArray(){
      for(var i=0;i<=arr.length;i++){
        sum+=i;
        console.log(arr[i]) 
        console.log("i的值为"+i+"arr对应下标值为"+arr[i])

        } 
      }
     sortArray();

    f1();
    console.log(c);
    console.log(b);
    console.log(a);//报错

    function f1() {
      var a = b = c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }

    //上面的代码可以写成如下的代码:
    function f1() {
      var a;//局部变量
      a = 9;//隐式全部变量
      b = 9;
      c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }
    f1();
    console.log(a);
    console.log(b);
    console.log(c);

其他参考链接

【 js基础 Day1】js的介绍及基本语法变量,运算符

【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构

【 js基础 Day3】关键字的使用,数组(重点)和函数(重点)

【 js基础 Day4】面向过程,面向对象,自定义对象,内置对象

【 js基础 Day5】函数(重点),作用域,预解析,arguments,对象

【 js基础 Day6】内置对象和基本包装类型等知识

【如果你不是新手】推荐链接

【js高级 Day1】深入理解原型及作用,构造函数和实例对象和原型对象之间的关系

【js高级 Day2】深入理解原型添加方法,私有函数,面向对象的编程思想(案例小贪吃蛇)

【js高级 Day3】深入理解原型的方式继承,借用构造函数继承,组合继承,拷贝继承

【js高级 Day4】深入理解apply和call方法,作用域,闭包,递归

【js高级 Day5】深入理解浅拷贝,深拷贝,遍历DOM树,正则表达式

发布了227 篇原创文章 · 获赞 41 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_42554191/article/details/104303455