声明的基本用法、函数的传参、函数的返回值、函数的几种形式、案例求两个数的最大值、函数的声明方式、回调函数、函数的参数

还是个连前端的门在哪都找不到的小白
114 阅读2分钟

封装函数和回调函数

1.声明的基本用法

​ 1.语法

function 函数名（）{
	//函数执行的代码
}

​ 2.注意：函数里面的代码不会自动执行，需要调用

​ 3.调用函数

函数名()

​ 4.代码演示

// 1.声明函数
function  name() {
	console.log ('你好')
}
//2.调用函数

2.函数的传参

    <script>
        // 1.函数声明的时候写的参数. 形式参数（形参）
        // 形参的本质相当于是函数内部的一个局部变量

        function shangke(fan, lj, ls) {
            console.log(`打开${fan}电脑`);
            console.log(`打开${ls}电脑`);
            console.log(`打开${lj}电脑`);
        }
        // 1.函数声明的时候写的参数. 形式参数（实参）
        // 调用的时候，把实参的值，传给形参

        shangke('联想', '苹果', '无牌')

    </script>

3.函数的返回值

1.函数的返回值

​ 语法：return 返回值

function getSum  (num1 , num2) {
	let sum = num1 + num2
}

let result = getSum(10,20)
console.log(result) // 30

2.注意：如果函数内部没有 return 之际上有个默认的返回值 undefined

function trst() {
	console.log('test函数')
}

let result = trst()
console.log(result) //undefines

3了解：如果函数内部有 return ，但是return 后面没有跟内容 ，那就会返回 undefined

function test2() {
	console.log('test2函数')
	return
}
let result = test2()
console.log(result) //undefined

4.函数内部有return，那return下面的代码不会执行了

​ 函数中的return会提前结束函数

  function test3() {
                console.log('你好');
                console.log('真好');
                return 100
                console.log('一点也不好');
                console.log('把return移开，我要去控制台');
            }
            let result = test3()
            console.log(result);

5总结： return 只能返回一个值 需要返回多个可以用return 返回数组

4.函数的几种形式

1.无参无返回值

function test() {
	console.log(123)
}
test()

2.有参无返回值

function trst1(guozhi) {
	console.log(`我今天喝了一杯${guozhi}果汁`)
}
test1('汇源')
test1('果粒橙')

3.无参有返回值

function test2() {
	console.log('test2函数') //test2函数
	return 100
}
console.log(test2()) //100

4.有参有返回值

function test3(num1,num2) {
	return num1 + num2
}
console.log(test3(10,20))//30

5案例求两个数的最大值

1.第一种方式

function getSum(num1 , num2) {
let max
	if (num1 > num2) {
		return max = num1 
	} else {
		return max = num2
	}
}
console.log(getSum(10,20))

2.第二种方式

 <script>
        function getSum(num1, num2) {
            return num1 > num2 ? num1 : num2
        }
        console.log(getSum(10, 20))
  </script>

6.求圆的周长和面积

 <script>
        function getMianji(r) {
            let zc = Math.PI * r
            //面积
            let mj = Math.PI * r * r

            return [zc, mj]
        }
        let result = getMianji(10)

        console.log(`圆的周长为${result[0]}, 面积为 ${result[1]}`)
    </script>

7.函数的声明方式

1.函数声明语句的方式声明

​ 调用 可以在声明前调用 ，也可以在声明后调用

  <script>
        // getSum() //这是声明前调用
        function getSum() {
            console.log('getSum函数')
        }
        getSum() //这是声明后调用
   </script>

2.匿名函数：函数表达式的声明方式

​ 只能在声明后调用

 <script>
        let getTiem = function () {
            console.log('getTiem函数')
        }
        getTiem()
    </script>

8.检测函数类型

1,函数也是一个数据类型 是一个复杂数据类型（引用类型）

1.typeof 检测

		function test() {
            console.log('result函数')
       	 }

        console.log(typeof test); //funcetion

2.instanceof 检测

   function test() {
            console.log('result函数')
        }
        console.log(test instanceof Function); //true
        console.log(100 instanceof Function); //false

3.万能检测监控

  <script>
        function test() {
            console.log('result函数')
        }
        console.log(Object.prototype.toString.call(test)); //[object Function]
    </script>

9.回调函数

1.回调函数

​ 如果get的实参里面的函数 又有一个函数 就叫回掉函数

  <script>
        function get(num1, num2) {
            num1() //调用函数 10
            num2() //调用函数 20
        }

        get(
            function () {
                console.log(10)
            },
            function () {
                console.log(20)
            }
        )
    </script>

2.加强回调函数

​ 1.实参给形参传值

函数声明的时候小括号的是形参，调用函数的小括号里面的是实参

  <script>
        function a(fn) {  //fn是声明函数所以是形参
            let num1 = 10
            let num2 = 20
            // 如果处理这个函数 就取决于调用函数的函数
            fn(num1, num2) //这里是调用函数 小括号里面的是实参
        }

        //调用函数 这里面两个函数就是 实参了
        a(
            function (num1, num2) { //这里的名字可以随便起 ，有语义化就好了
                console.log(num1 + num2)//30
            })
        a(
            function (num1, num2) {
                console.log(num1 * num2)//200
            })

10.函数自调用

1自调用函数 ：函数自调用自己

​ 1.第一种方式

(function test1() {
	console.log('test1函数')
} ())

​ 2.第二种方式

(function test2() {
	console.log ('test2函数')
})()

2.一般情况下 ， 函数自调用是匿名函数自调用

1.第一种方式

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

2.第二种方式

	(function () {
        console.log('我也是匿名函数');
       })()

3.自调用函数 也是可以传参的 还有返回值

1.第一种方式

<script>
        let result = (function (num1, num2) {
            return num1 + num2
        }(10, 20))

        console.log(result)//30
    </script>

2第二种方式

  <script>
        let result = (function (num1, num2) {
            return num1 + num2
        })(10, 20)

        console.log(result) //20
    </script>

11.自执行函数

  1. 如果页面上有多个自执行函数，在自执行前面加一个分号

;(function(){
	console.log('我是函数')
}())

;(function(){
	console.log('我也是函数')
} )()

2，如果分号不在前面家的话， 就有可能导致出错

错误演示

function test() {
	console.log('test函数')
} 
//就是这里如果忘记加后面的 就会导致报错
test 

//这里前面必须加分号
(function{
 	console.log('12')
 }())

12.函数的参数

函数的参数;值类型和（引用类型）

1.参数的值类型

function getSum(num1) {
	return num = 100
}
let  num2 = 10 
console.log(getSum(num2))// 200
console.log(num2) //10

  1. 参数的引用类型

    function test(arr1) {
	return arr1[0] = 1000
}

let arr2 = [10,20,30]
//因为数组在技术栈中存在地址的 所以在技术堆中就改变了
console.log(test(arr2)) //1000
console.log(arr2[0])// 1000

    13.arguments为数组

       <script>
        // 1.arguments    
        // 2.只能在函数内部使用
        // 3.它不是一个数组，单又有下标和length ，所以叫伪数组
        // 4.arguments 这个伪数组存放的是实参的值
        // 5.arguments和形参一一对应 有一个值改变了 一起改变

        function test(num1, num2) {
            num1 = 1000
            console.log('test函数', num1, num2); //1000  20
            console.log(arguments);

            console.log(Array.isArray(arguments)); // false 不是数组

            arguments[0] = 100
            
            console.log(num1);//100
        }
        test(10, 20, 30)
    </script>
avatar
文章
阅读
粉丝