day04函数

函数

就是封装了一段可被 重复调用执行的代码块。

声明的函数如果不调用，函数相当于不存在。通过调用找函数。

函数的作用

减少了减少冗余代码，函数封装，提高了代码的可维护性及可阅读性

函数的分类

系统函数：电脑里面自带的所有函数（console.log()  alert()  ）

内置函数：内置对象的函数（math.pow()）

自定义函数：自己定义的函数，需要自己去赋予含义

 

自定义函数的定义及调用

1..使用function关键词 定义匿名函数（不能传参）

function(形参（可以省略的 可以有多个）){
函数体（代码）
}
//直接调用 让别人（事件）去调用（自动调用）
(function(){
console.log('匿名函数')
})()

2.使用function关键词 定义具名函数

function 函数名(形参,形参...){
函数体(代码)
}
//声明 具名函数（第一种）
function sayHello(){
console.log('hello')
}
sayHello()
//传递参数
function sayHello1(name,age){ //形参是形容的参数
console.log('hello'+name+age)
}
sayHello1('李四') //传进的是实参 根据你要的参数个数来传递对应的参数个数
//调用
// sayHi() //报错
// console.log(sayHi); undefined
//具名函数的变种声明 （第二种）
var sayHi = function(){
console.log('hi')
}
sayHi()

注：具名函数的两种声明，调用函数速度第一种更快

3.使用new Function方式

var 函数名 = new Function('形参,形参1','函数体')
//定义
var sayBye = new Function('console.log("bye bye!!")')
//调用
sayBye()
//传参
var sayBye = new Function('username','console.log("bye bye!!"+username)')
//调用
sayBye('李四')

注：function和var在预编译期间就会声明

var关键词修饰的变量在预编译时是不会赋值的

return关键词

函数都有一条return语句，return语句导致函数停止执行，并返回它的表达式的值给调用者。 如果return语句没有相关的表达式，则返回undefined。

function sum(a,b){
return a+b
console.log('不会执行的代码')
}
console.log(sum(1,2))//返回的对应的1+2的结果

没有return

function sayHi(){
console.log('hi')
}
console.log(sayHi()) //undefined

 

 函数作用域

作用域可分为全局作用域和局部作用域

全局作用域：定义的变量可以在任何地方使用，是最大的作用域。

局部作用域：定义的变量只能在这个局部作用域内部使用

 

var a = 20
function fn(){
console.log(a);//undefined 没有var关键词就20
var a = 10
if(10>9){
console.log(a);//undefined 没有var关键词就10
var a = 30
if(5>4){
console.log(a);//undefined 没有var关键词就30
var a = 40
if(a>10){
console.log(a);//40
}
}
}
}
fn()

作用域链

当前的作用域内没有找到对应的变量就会向上去寻找 而这个过程构成的链式结构称为作用域链 （子集可以访问父级，父级不能访问子集）

 var a = 20
  function fn(){
   console.log(a);//undefined 没有var关键词就20
    var a = 10
     if(10>9){
       console.log(a);//undefined 没有var关键词就10
        var a = 30
          if(5>4){
            console.log(a);//undefined 没有var关键词就30
           var a = 40
         if(a>10){
       console.log(a);//40
      }
    }
   }
}
fn()

函数的arguments

arguments.length获取函数的参数个数

function sum(){ //不清楚参数个数(无参)
// arguments 可以接收里面所有的参数
//获取里面传递的所有的参数 arguments 长度length
//下标索引是从0开始的
var result = 0
//遍历对应的arguments里面的所有的参数
for(var i=0;i<arguments.length;i++){
result += arguments[i] //取出里面的参数进行求和
}
return result
}

所有的函数都具备arguments （对象）

length属性访问长度    [ ] 加下标（从0开始）访问里面的元素

函数的嵌套

函数里面可以继续嵌套函数（要注意函数之间可以相互调用，也可以向外调用，但不允许去调用同级的嵌套函数）

function fn1(){
console.log('函数1');
function fn2(){
console.log('函数2');
// fn1() 没有结束就是死循环
}
function fn3(){
console.log('函数3');
//调用函数2
fn2()
}
fn2()
fn3()
}
fn1() //函数1 函数2 函数3 函数2

Dom的简单操作

1.获取对应的标签 （通过id获取）

document.getElementById('id的属性值')

2.input框的值获取 value属性

document.getElementById('input框的id').value //得到input框内的值

3.点击事件 onclick

element.onclick = function(){
//相关操作
}

事件驱动实例

//通过输入框输入数值判断对应的奇偶并打印
<input id="number" type="text">
<button id="btn">判断奇偶</button>
<script>
function handlerClick(){
//拿到input框里面的内容 获取到input框
var inputValue = document.getElementById('number').value //string类型
// console.log(typeof inputValue); 如果是+法操作必须要先转类型
//判断奇偶的操作
if(inputValue%2==0){
console.log('当前为偶数');
}else{
console.log('当前为奇数');
}
}
//首先需要点击按钮 获取按键 加点击事件
//事件触发自动调用对应的函数 （事件驱动）
document.getElementById('btn').onclick = handlerClick
</script>

递归算法

所有的循环都可以通过递归算法进行，缺点是计算效率较低

案例

 4, 写个函数实现n的阶乘 递归

        // 1 1 2 1*2 3 1*2*3

        function fn2(n){

            if(n==1){

                return 1

            }else{

                return fn2(n-1)*n

            }

        }

        console.log(fn2(3));

8, 兔子繁殖问题，设有一只新生兔子，从第四个月开始他们每个月, 月初都生一只兔子,
 新生的兔子从第四个月月初开始又每个月生一只兔子按此规律，并假定兔子没有死亡, 
n(n<=20)个月月末共有多少只兔子？
        function fn5(n){
            if(n==1 || n==2 || n==3){
                return 1
            }else{
                return fn5(n-1)+fn5(n-3)
            }
        }
       /* 月份  1 2 3 4  数量
            1   1 0 0 0  1
            2   0 1 0 0  1
            3   0 0 1 0  1
            4   0 0 1 1  2
            5   0 0 2 1  3
            6   1 1 1 1  4
            7   2 1 1 2  6
            8   3 1 2 3  9
            9   4 2 3 4  13
            10  6 3 4 6  19
            11  9 4 6 9  28
        */
       console.log(fn5(20));