2

函数,递归以及dom简单操作 - 叮叮巴士

 1 year ago
source link: https://www.cnblogs.com/gujmnlk/p/16548571.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

函数,递归以及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深度优先搜索 (递归思想)


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK