javascript基础知识之函数（五）

最新推荐文章于 2023-07-18 14:05:18 发布

「已注销」

最新推荐文章于 2023-07-18 14:05:18 发布

阅读量293

点赞数 1

分类专栏： # Javascript基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45419127/article/details/117133833

版权

本文详细介绍了JavaScript中的函数，从函数的基本概念、使用方法到封装、参数、返回值等方面进行了深入探讨。通过实例展示了如何声明和调用函数，以及如何处理函数的形参和实参匹配，还讲解了如何利用return和arguments，以及函数之间的相互调用和不同声明方式。内容覆盖了函数的实战应用，包括数组操作、判断闰年等。

摘要由CSDN通过智能技术生成

函数

Js函数的定义：封装了一段可重复执行调用的代码块

目的：可以让大量代码重复使用

函数的体验

函数之求和

函数名的命名是动词，而变量名的命名是名词

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数之求和</title>
</head>

<body>

</body>
<script>
    function getSum(num1, num2) {
        var sum = 0;
        for (var i = num1; i <= num2; i++) {
            sum += i;
        }
        return sum;
    }
    console.log(getSum(1, 100));
    console.log(getSum(1, 1000));
</script>

</html>

在这里插入图片描述

函数的使用

声明函数
调用函数

声明函数

  function 函数名() {
        //函数体
    }

调用函数

  函数名()

注意事项

function是声明函数的关键字，因此必须是小写
函数是做某件事情，因此函数的命名为动词
函数本身不执行函数体代码，必须要调用才能执行
调用时千万不要忘记加小括号

函数的简单使用


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数之初体验</title>
</head>

<body>

</body>
<script>
    function sayHi() {
        console.log('Hello Word');
    }
    sayHi()
</script>

</html>

在这里插入图片描述

函数的封装

简单而言，就是把一个功能及多个功能以函数的方式进行封装，对外只提供一个简单的函数接口。

简单理解：类似于快递打包

函数的封装之求1~10之间的累乘

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数封装之1~10的累乘</title>
</head>

<body>

</body>
<script>
    function getBy(num1, num2) {
        var ride = 1;
        for (var i = num1; i <= num2; i++) {
            ride *= i;
        }
        console.log(ride);
    }
    getBy(1, 10)
</script>

</html>

在这里插入图片描述

函数的参数

函数的参数：形参与实参
声明函数时，函数名后面的小括号里面的参数被称为形参，形参是形式上的参数，是为了接收实参传递过来的值。
调用函数时，函数名后面的小括号里面的参数被称为实参。
函数内部的值不确定，可以通过实参传递不同的值进去
函数的参数可有可无

函数案例

函数案例之任意两个数的和

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数案例之求两个数的和</title>
</head>

<body>

</body>
<script>
    function getSum(num1, num2) {
        var sum = num1 + num2;
        return sum;
    }
    console.log(getSum(1, 10));
</script>

</html>

在这里插入图片描述

函数案例求任意两个数之间的和


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    function getSum(num1, num2) {
        var sum = 0;
        for (var i = num1; i <= num2; i++) {
            sum = sum + i;
        }
        return sum;
    }

    console.log(getSum(1, 10));
    console.log(getSum(1, 100));
</script>

</html>

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascript基础知识之函数（五）

函数Js函数的定义：封装了一段可重复执行调用的代码块目的：可以让大量代码重复使用函数的体验函数之求和函数名的命名是动词，而变量名的命名是名词<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
复制链接

扫一扫

专栏目录