JS函数

JS函数

函数概述

函数(方法)实际就是多行代码的抽取 —— 多行代码会构成特定的功能

函数的优点

减少冗余代码 —— 重复额代码放在函数里面 在需要的时候调用

函数封装 —— 特定的一些代码使用函数包起来

提高了代码的可维护性以及可阅读性

函数的分类
  • 系统函数 —— window里面的所有函数都属于系统函数(console.log() alert()prompt()...)
  • 内置函数 —— 所有的内置对象里面的函数(Math.pow)
  • 自定义函数 —— 自己定义的函数

系统函数和内置函数更注重于使用,自定义函数则朱中华定义以及使用

自定义函数的定义与调用

1.使用function关键词定义匿名函数(没有名字的函数) —— 自执行的匿名函数 没有复用价值 声明函数 不能传参
function(形参(可省略)){
    函数体
}
//函数调用后面带() 直接调用(自动调用)
(function(){
    console.log('匿名函数')
})()
2.使用function关键字 定义具名函数(有名字的函数)
function 函数名(形参,形参,...){
    函数体
}

//sayHello()  //成功调用
//声明 具名函数(第一种)
function sayHello(){
    console.log('hello')
}
//调用
sayHello()

//sayHi() //报错
//具名函数的变种声明(第二种)
var sayHi = function(){
    console.log('hi')
}
//调用
sayHi()

//具名函数的两种声明 第一种调用速度更快
//function 和 var 在预编译阶段就会声明
//var 关键词修饰的变量在预编译是不会复制的(后面的操作)


在程序执行之前有个预编译的过程

预编译:

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

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

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

3.使用new Function 方式 —— new 后面的内容首字母绝对是大写的
var 函数名 = new Function('形参,形参1','函数体')
//定义
var sayNo = new Function('console.log("No")')
//调用
sayNo()

//传参
var sayNo = new Function('name','console.log("No")')
sayNo('lucy')

return关键词

return 返回对应的数据 —— 在函数内容进行数据返回(当你调用了return操作后 后面的内容将不再执行)

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

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

function sayNo(){
    console.log('no')
}
console.log(sayNo())//undefined
函数执行过程

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

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

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

函数作用域
作用域

当前的一个变量的作用范围

局部作用域 —— 在一个函数内声明的或者是在一段代码块内声明的 它的作用范围是当前代码块

全局作用域 —— 全局变量就是定义在函数外部的变量,这个变量在任何函数中都有效,即作用域范围是当前文件的任何地方

注: 在定义变量时, 如果不写关键字var也是合法的, 且是全局变量, 但是这样写不安全,容易在其他地方被更改, 所以我们在函数中写变量要加上var

作用域链

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

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(参数数组 参数的集合)

argument是一个伪数组(有部分的数组特性)—— 可以通过length属性对应的长度[ ]下标来访问里面的元素

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

所有的函数都具备argument(对象)

访问

  • 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>

递归算法

效率极低 一般使用递归 不推荐 —— 文件的遍历 菜单遍历 深拷贝

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

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

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

示例

// 1 3 6 10 15 21 第100位 前一位+对应的位数 = 这个一位的值
function fn1(n){
    if(n==1){
        return 1
    }else{
        return fn1(n-1)+n
    }
}
console.log(fn1(6));
// 1 2 3 5 8 13 21 第100位值(递归的效率极低 一般不使用递归 不推荐 (文件的遍历 菜单遍历 深拷贝))
function fn2(n){
    if(n==1){
        return 1
    }else if(n==2){
        return 2
    }else{
        return fn2(n-2)+fn2(n-1)
    }
}
console.log(fn2(7));

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

posted @ 2022-07-28 19:03  CHENNGE  阅读(44)  评论(0)    收藏  举报