Functions, recursion and simple dom operations

优质资源分享

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统.
Python量化交易实战	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

函数

函数概述

A function is a tool that has a function.A piece of code that performs a function.

The system provides many functions,But not all functions are included,So some functions need to be written by ourselves----自定义函数.函数定义好以后,It can be used like a system function,No need to write again.So often write code,Just write a function,Adjust when needed.

函数的优点

Functions reduce redundant code（Duplicate code is placed inside the function,在需要的时候调用）

函数封装（Certain pieces of code are wrapped with functions）,Improve the maintainability and readability of the code

函数的分类

• 系统函数：windowAll the functions in it are system functions(如console.log() , alert() , prompt())
• 内置函数：All functions in built-in objects are called built-in functions（如Math.pow()）
• 自定义函数：自己定义的函数

Built-in functions and system functions pay more attention to its use Customization focuses on definition and usage

Definition and calling of custom functions

1.使用function关键词 定义匿名函数（没有名字的函数）

function（形参（可以省略））{
    函数体（代码）
}
//when we define the function,and when the page is refreshed,You will find that this code is not executed.
//Because after the function is defined,是不会自动执行的,We need to make a call.

（） //直接调用 （Events can also be used to call）

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

匿名函数：Fewer statements,No reuse value（Anonymous self-executing functions cannot pass arguments）

2.使用function关键词 定义具名函数（有名字的函数）

function 函数名（形参,形参...（可以省略））{
    函数体（代码）
}函数名（）  //调用

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

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

Two declarations of several functions,In terms of calling speed, the corresponding first one is faster

function 和 var It is declared during the compilation phase！！！

varVariables modified by keywords are not assigned values ​​during precompile！！！

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('李四')

There is a pre-compilation process before the program is executed

Precompile will do

1.He will declare accordinglyfunction和var关键词修饰的变量（The operation of allocating memory）

2.对应的functionAfter the memory space is opened, it will put the corresponding code block in it 等待调用

3.var Modified keywords 只会开辟一个空间 并不会进行赋值（Give it one by defaultundefined的值）

return关键词

retrun 返回对应的数值 He returns data in the content of the function（当你调用了return操作后,The following content will not be executed）

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. Return a content in the function

函数执行的过程

1.Open up the corresponding onefunctionThe code block in memory is thrown to the method stack（执行栈）去执行

2.The execution stack will automatically execute the corresponding method,Return the corresponding result after execution

3.After the current result is returned, the memory space in the corresponding execution stack needs to be reclaimed（GC）Destroy this memory space

函数作用域

作用域：The current scope of a variable

分为局部作用域（函数作用域）（declared inside a function Or declared within a block of code Its scope is the current code block）（The inside can call the outside,But the outside can't call the inside） if和switchA code block does not contain a corresponding local scope

全局作用域（in the corresponding global declaration,作用范围是全局的）

作用域链

If the corresponding variable is not found in the current scope, it will beLook up,而这个过程构成的链式结构称为作用域链

示例

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是一个伪数组（There are some array properties）（可以通过length对应的长度[]Subscript to access the element inside）

function sum(){ //Not sure about the number of parameters(无参)
// arguments Can receive all the parameters inside
//Get all the parameters passed inside arguments 长度length
//下标索引是从0开始的
var result = 0
//遍历对应的argumentsAll parameters inside
for(var i=0;i<arguments.length;i++){
result += arguments[i] //Take out the parameters inside for summation
}
return result
}

All functions are availablearguments（对象）

访问

• lengthProperty access length
• []加下标（从0开始）访问里面的元素

函数的嵌套

• 函数的嵌套: Functions can contain other functions;
• 函数之间允许相互调用,Outgoing calls are also allowed（The inside can call the outside,But the outside can't call the inside）But it is not possible to call nested functions of the same level function;

注意事项

Extraction of functions（抽取冗余代码）

• 参数（可变的内容）
• 返回值（What do you want to get from this function）

函数的调试

Dom的简单操作

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

document.getElementById（'id的属性'）

2.inputGet the value of the boxvalue属性

document.getElementById（'input框的id'）.value

3.点击事件onclick

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

示例

//Enter the value through the input box to determine the corresponding parity and print it
"number" type="text">
<button id="btn">判断奇偶button>
<script>
 function handlerClick(){
 //拿到input框里面的内容 获取到input框
 var inputValue = document.getElementById('number').value //string类型
 // console.log(typeof inputValue); 如果是+The method operation must first convert the type
 //The operation of judging parity
 if(inputValue%2==0){
 console.log('Currently an even number');
 }else{
 console.log('Currently odd');
 }
 }
//First you need to click the button 获取按键 加点击事件
//The event trigger automatically calls the corresponding function （事件驱动）
document.getElementById('btn').onclick = handlerClick
script>

递归算法

Recursion can do everything a loop does（But recursion is extremely inefficient 一般不使用（文件遍历 menu traversal Deep copy is used a lot））

递归三要素

• 找规律
• 找临界值（There are no regular values）return
• 自己调自己（Call your own function inside the function）

2 4 6 8 10 第100What is the value of the bit

function fn（n）{//Usually there are parameters n表示位数
    if（n==1）{//没规律的（Usually in the front or back）
        return 2   //返回具体的值
    }else{//有规律的 
       return fn（n-1）+2   //Returns the formula for the corresponding law fn(n-1)Consider it a value
    }
}console.log(fn(100))

扩：bfs广度优先搜索 dfs深度优先搜索 （递归思想)