函数,递归以及dom简单操作

函数

函数概述
函数就是具备某个功能的一个工具。是完成某个功能的一段代码。
系统提供了很多函数,但是并不能包含所有的功能,所以有些功能需要我们自己来写----自定义函数。函数定义好以后,就可以像系统函数一样使用了,不用再重复写了。所以经常写的代码,就写一个函数,需要的时候调一下好了。
函数的优点
函数能减少冗余代码(重复的代码放在函数里面,在需要的时候调用)
函数封装(特定的一些代码使用函数包起来),提高了代码的可维护性以及可阅读性
函数的分类
  • 系统函数:window里面的所有函数都属于系统函数(如console.log() , alert() , prompt())
  • 内置函数:所有的内置对象里面的函数都叫内置函数(如Math.pow())
  • 自定义函数:自己定义的函数
内置函数和系统函数更注重它的使用 自定义注重定义及使用
自定义函数的定义及调用
1.使用function关键词 定义匿名函数(没有名字的函数)
function(形参(可以省略)){
    函数体(代码)
}
//当我们定义好函数,并在页面中刷新的时候,会发现这段代码并没有被执行。
//因为函数定义好后,是不会自动执行的,需要我们进行调用。

() //直接调用 (也可用事件去调用)

(function(){
    console.log('匿名函数')
})()

匿名函数:声明较少,没有复用价值(匿名自执行函数不能传参)

2.使用function关键词 定义具名函数(有名字的函数)
function 函数名(形参,形参...(可以省略)){
    函数体(代码)
}函数名()  //调用

//第一种
sayHello()    //调用
function sayHello(){
   console.log('hello')
}

// 第二种
var sayHi=function(){
    console.log('hi')
}
sayHi()       //调用

几名函数的两种声明,调用速度来说对应的第一种更快

function 和 var 在与编译阶段就会声明!!!

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

3.使用new Function方式(字符串形式)(new后面的首字母大写)
var 函数名 = new Function(形参,形参1,'函数体')

 var sayBye =  new Function(‘  console.log("bye")’)
  sayBye()        //调用
  
  
 var sayBye = new Function('username',
 'console.log("bye bye!!"+username)')    //传参

sayBye('李四')
在程序执行之前有个预编译过程
预编译会做的事

1.他会声明对应的function和var关键词修饰的变量(开辟内存的操作)

2.对应的function的内存空间开辟后它会将对应的代码块放到其中 等待调用

3.var 修饰的关键词 只会开辟一个空间 并不会进行赋值(默认给它一个undefined的值)

return关键词

retrun 返回对应的数值 他是在函数内容进行数据返回的(当你调用了return操作后,后面的内容不会再执行)

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

如果没有return关键词 返回的一个undefined的值

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

return的作用:

  1. 终止代码继续运行
  2. 在函数中返回一个内容
函数执行的过程

1.把对应的开辟的function内存里面的代码块丢给方法栈(执行栈)去执行

2.执行栈就会自动执行对应的方法,执行完返回对应的结果

3.当前结果返回完毕以后对应的执行栈里面的内存空间要进行回收(GC)将这个内存空间销毁

函数作用域
作用域:当前一个变量的作用范围

分为局部作用域(函数作用域)(在一个函数内声明 或者是在一段代码块内声明的 他的作用范围就是当前的代码块)(里面的可以调用外面的,但外面的不能调用里面的) if和switch代码块不包含对应的局部作用域

全局作用域(在对应的全局声明,作用范围是全局的)

作用域链

当前的作用域内没有找到对应的变量就会向上去寻找,而这个过程构成的链式结构称为作用域链

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

总结:

1. 用var关键字声名的变量,将变量的声名提升到当前作用域的最前面,赋值不提升
2. 自定义的函数整体提升到当前作用域的最前面
3. 函数同名,后面的会覆盖前面的
4. 变量和函数同名,函数优先提升
函数的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开始)访问里面的元素
函数的嵌套
  • 函数的嵌套: 函数内部可以再包含其他函数;
  • 函数之间允许相互调用,也允许向外调用(里面的可以调用外面的,但外面的不能调用里面的)但是不可以调用同级函数的嵌套函数;

注意事项

函数的抽取(抽取冗余代码)

  • 参数(可变的内容)
  • 返回值(想从这个函数得到什么)

函数的调试

image

Dom的简单操作

1.获取对应的标签(通过id获取)

document.getElementById('id的属性')

2.input框的值获取value属性

document.getElementById('input框的id').value

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>
递归算法

递归可以完成所有循环做的事情(但递归的效率极低 一般不使用(文件遍历 菜单遍历 深拷贝使用多))

递归三要素
  • 找规律
  • 找临界值(没有规律的值)return
  • 自己调自己(在函数内部调用自己的函数)

2 4 6 8 10 第100位的值是什么

function fn(n){//一般情况下都有参数  n表示位数
    if(n==1){//没规律的(一般在前面或后面)
        return 2   //返回具体的值
    }else{//有规律的  
       return fn(n-1)+2   //返回对应的规律的公式 fn(n-1)当成值来看
    }
}console.log(fn(100))

扩:bfs广度优先搜索 dfs深度优先搜索 (递归思想)

posted @ 2022-08-03 20:21  叮叮巴士  阅读(409)  评论(0编辑  收藏  举报