js（函数-上）

最新推荐文章于 2023-12-17 10:19:51 发布

zombie$

最新推荐文章于 2023-12-17 10:19:51 发布

阅读量174

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_42630103/article/details/117961704

版权

js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

■教学目标

能够独立说出函数的好处

能够说出什么是函数&语法（参数&返回值）

能够独立完成综合案例

■函数（上）

一、为什么要有函数？

明确：代码中的函数跟上学接触的三角函数、二7次函数等不是一个概念。

循环：当一段代码需要重复执行用循环（减少工作量，提高效率）

函数：当一段代码需要多个地方使用用函数（减少代码冗余，方便维护开发一个地方改其他地方都好了）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQADIBAQ-1623832736324)(images/1566430115475.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GzbsWMZW-1623832736331)(images/1566430192878.png)]

二、函数概念

是什么

函数：名词解释不清

作用：将一段公共的代码封装起来，然后n次调用（留心：只要封装的地方改了其他地方同步

能干吗（好处）

减少代码冗余，一次定义多次调用
便于后期维护，一处修改，所有调用的地方同步

去哪下

不用下，直接通过JS关键词function就可以实现

切记切记切记：通过function关键词定义好了默认不会输出里面的代码，必须调用

小总结

为什么要有函数：将网站的公共代码封装起来，便于后期维护

什么是函数：将一段公共的代码封装起来，一次定义多次调用

好处：1-减少代码冗余，2-便于后期维护

去哪下：不用下直接写关键词function定义然后切记你的调用

三、函数语法！！！

定义语法

声明式：通过function关键词

function 函数名() {
    // 公共代码
}

赋值式：将函数内容复制变量

var 函数名 = function() {
    
}

留心1：function是系统关键词

留心2：函数名命名规则同变量（回忆：可以是英文、数字、下划线，但首字母不能是数字推荐小驼峰

留心3：定义好了默认不会触发公共代码，需要调用

调用语法

函数名()

练习

练习：定义fn1函数输出hello，webopenfather 1
练习：定义fn2函数输出hello，webopenfather 2

<script>
// - 练习：定义fn1函数输出hello，webopenfather 1
// - 练习：定义fn2函数输出hello，webopenfather 2


// - 练习：定义fn1函数输出hello，webopenfather 1
// 1. 定义fn1函数
function fn1() {
    console.log('hello, webopenfather 1')
}
// 2. 调用
fn1()
fn1()

// - 练习：定义fn2函数输出hello，webopenfather 2
function fn2() {
    console.log('hello, webopenfather 2')
}
fn2()
</script>

调用上的区别

声明式：随意

<script>
// 后调用
fn()

// 定义函数
function fn() {
    console.log("千锋刘德华")
}

// 后调用
fn()
</script>

赋值式：只能先声明，后调用（原理明天来说

<script>

fn()   // 不行报错  fn is not a function

// 定义函数fn 输出双击666
var fn = function() {
    console.log("双击666 +V①.4.5")
}

// 调用
fn()
fn()
</script>

小总结

定义

声明式 - 随意调用
function 函数名() {
    // 公共代码
}

赋值式 - 只能后调用
var 函数名 = function() {
    // 公共代码
}

调用：函数名() // 切记切记切记定义好了默认不会触发调用

四、函数参数！！！

明确需求

需求：定义一个函数计算员工工资

代码

function money() {
    console.log('工作20天，每天100块，共计：' + 20*100);
}

发现：上述代码存在问题（不够灵活，仅针对个别用户并不能适用于所有用户）

思考：如何优化呢?

解决：定义函数的时候传递【参数】，然后函数里面公共的代码根据传递的数据进行计算统计

语法

// 定义
function 函数名(形参1,...,形参n) 
{
    // 定义形参就相当于在函数体内创建变量★
    // var 形参1 = 实参1
    // ...
    // 公共代码
}

// 调用
函数名(实参1,...,实参n)

脚下留心

1 function是系统关键字，后面必须加空格

2 函数名命名规范同变量名

3 定义函数的参叫形参，多个之间用逗号隔开（留肾：形参可以在函数中当变量使用

4 调用函数叫参叫实参，多个之间逗号隔开

练习

// 需求：定义学生stu函数，输出姓名张三，年龄18

// 需求：上面呢只能输出张三&18岁，将张三替换为变量name，18替换为变量age

// 优化：工资案例

<script>
// 需求：定义学生stu函数，输出姓名张三，年龄18
// 需求：上面呢只能输出张三&18岁，将张三替换为变量name，18替换为变量age
// 优化：工资案例


// 需求：定义学生stu函数，输出姓名张三，年龄18
function stu() {
    // console.log("姓名：张三 年龄： 18")
    console.log("姓名：", "张三", "年龄：", 18)
}
stu()
console.log('---------')
// 需求：上面呢只能输出张三&18岁，将张三替换为变量name，18替换为变量age
function stu2(name, age) {
    // var name = 实参1
    // var age = 实参2
    console.log("姓名：", name, "年龄：", age)
}
stu2("xzmly", 88)
stu2("ldh", 18)

// 优化：工资案例
// function money() {
//     console.log('工作20天，每天100块，共计：' + 20*100);
// }

function money(day, qian) {
    // var day = 数据1
    // var qian = 数据1
    console.log('工作',day,'天，每天', qian,'块，共计：' + day*qian);
}
money(10, 1)
money(10, 998)
</script>

参数的顺序和个数(细节)

函数的形参个数和实参个数，必须一样，否则undefined 可能会导致代码有瑕疵
函数的形参顺序和实参顺序，必须一致，否则逻辑BUG 大瑕疵

<script>

function stu(uname, age) {
   // var 形参;
   // var 形参;
   console.log('我叫：', uname, '，今年：', age)
}

// 函数的形参个数和实参个数，必须一样，否则undefined  可能会导致代码有瑕疵
stu()        // undefined，undefined
stu("海王")  // 海王，undefined
stu("浩浩", 98) // 浩浩，98

console.log('------')

// 函数的形参顺序和实参顺序，必须一致，否则逻辑BUG   大瑕疵
stu(18, "赵四")
</script>

小总结

定义

function 函数名(形参,...,形参n) { // 定义形参相当于在函数里面声明变量
    
}

调用

函数名(实参,..,实参n)

留心1：实参和形参个数不一样 undefined 可能出现

留心2：实参和形参顺序不一样逻辑BUG 大问题

■ 综合案例

公式

1、先完成功能

2、搞一个空函数

3、将1放到2里面

4、细调（例如形参等

题目1

编写一个函数，计算两个数字的和、差、积、商（注：使用传参的形式）

<script>
// 编写一个函数，计算两个数字的和、差、积、商  
// 要求：使用传参的形式


// function sumFn(num1, num2) {
//     document.write(num1 + num2, "<br />")
//     document.write(num1 - num2, "<br />")
//     document.write(num1 * num2, "<br />")
//     document.write(num1 / num2)
// }

// sumFn(1, 1)

// 需求：升级，根据传递的fuhao参数返回结果

function sumFn(num1, num2, fuhao) {

    switch (fuhao) {
        case '+':
            document.write(num1 + num2, "<br />")
            break;
        case '-':
            document.write(num1 - num2, "<br />")
            break;
        case '*':
            document.write(num1 * num2, "<br />")
            break;
        case '/':
            document.write(num1 / num2, "<br />")
            break;
        default:
            document.write("你有瑕疵")
            break;
    }
}

sumFn(1, 1, '+')
sumFn(1, 1, '-')
</script>

题目2

编写一个函数，计算二个数字的大小，按从小到大顺序输出

<script>
// 编写一个函数，计算二个数字的大小，按从小到大顺序输出

// var num1 = 11
// var num2 = 22

// if (num1>num2)
// {
//     document.write(num2, num1)
// } else {
//     document.write(num1, num2)
// }


function bijiaoFn(num1, num2) 
{
    // var num1 = 11
    // var num2 = 22

    if (num1>num2)
    {
        document.write(num2, num1)
    } else {
        document.write(num1, num2)
    }
}

bijiaoFn(11, 22)
bijiaoFn(33, 44)

// 1. 先实现功能
// 2. 定义空函数
// 3. 将1放到2中
</script>

题目3

编写一个函数，根据传递的数字，输出直角三角形（传递1输出一行，传递2输出2行

<script>
/*
*
**
***
****
*/
// for (var i = 1; i<=5; i++)
// {
//     // 输出星
//     // i = 1   1个星  也就是 j<=1
//     // i = 2   2个星  也就是 j<=2
//     // i = 3   3个星  也就是 j<=3
//     // for (var j=1; j<=4; j++)
//     for (var j=1; j<=i; j++)
//     {
//         document.write('*')
//     }
//     // 输出隐藏的br
//     document.write('<br />')
// }



function starFn(line) {
    // for (var i = 1; i<=5; i++)
    for (var i = 1; i<=line; i++)
    {
        // 输出星
        // i = 1   1个星  也就是 j<=1
        // i = 2   2个星  也就是 j<=2
        // i = 3   3个星  也就是 j<=3
        // for (var j=1; j<=4; j++)
        for (var j=1; j<=i; j++)
        {
            document.write('*')
        }
        // 输出隐藏的br
        document.write('<br />')
    }
}

starFn(5)

document.write('<hr />')

starFn(4)

document.write('<hr />')

starFn(4)

document.write('<hr />')

starFn(8)
</script>

五、函数return！！！

明确需求

// 定义计算工资函数
function money(day, qian) {
    console.log('工作', day, '天，每天', qian, '块，共计：', day*qian);
}
// 调用
money(30, 1000);

// 有时候调用完函数后，需要里面的结果进一步判断等  关键怎么获取呢？

说明：在实在工作中，调用函数有时候需要直接输出，有时候需要返回数据让后面代码进一步判断操作

举例：prompt、confirm

解决：通过return就行、上述案例底层原理也是这样

语法

function 函数名(形参1,...,形参n) {
    // ....
    
    return 数据  
    
    // 留心1：return你不写  则默认return undefined
    // 留心2：1 返回值， 2 退出函数
}

var 变量名 = 函数名(实参1,...,实参n)

以前：
var data = prompt(内容)
var data = confirm(内容)

返回值

完成明确需求案例

<script>
// // 定义计算工资函数
// function money(day, qian) {
//     console.log('工作', day, '天，每天', qian, '块，共计：', day*qian);
// }
// // 调用
// money(30, 1000);



// 定义计算工资函数
function money(day, qian) {
    console.log('工作', day, '天，每天', qian, '块，共计：', day*qian);
    return day*qian
}
// 调用
var data = money(30, 1000);

console.log(data)
</script>

终断函数

<script>
function fn1() {
    console.log(1)
    console.log(2)
}
fn1()  // 1 2

console.log('---------')

function fn2() {
    console.log(1)
    return // 终止函数，值可写可不写
    console.log(2)
}
fn2()  // 1

console.log('---------')


function fn3() {
    for(var i=1; i<30;i++) {
        return  // 退出循环、还是退出函数
                // 退出函数
        console.log(i)
    }
}
fn3() // 如果只有for 没有函数 就不能写return   你想退出用循环的break
</script>

小总结

return

1 - 返回值默认不写则返回 undefined

2 - 退出函数切记切记没有函数就没有return

■ 今日总结

■ 其他：断点调试

1. 下个断点： 如果后面没有断点了, 那么代码直接执行完; 
2. 单步调试: 下一步，没有断点遇到函数就直接跳过
3. 单步调试: 进入函数 
4. 单步调试: 跳出函数
5. 单步调试: 下一步  不管有没有断点，都会一步一会的走
6. 让所有的断点失效
7. 自动根据错误断点,性能不好

watch 查看变量数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3RISkqvE-1623832736338)(images/1566461636957.png)]

<script>
function sum(num1, num2) 
{
	var num = num1 + num2;
	return num;
}

var rs = sum(1, 1);
console.log(rs);
// console.log(test);  //test变量未声明报错
</script>