JavaScript入门（三）-函数

最新推荐文章于 2024-08-14 15:45:18 发布

博白

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量159

点赞数 1

分类专栏： JavaScript学习文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_43534861/article/details/114552248

版权

JavaScript学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScrpit入门(三)-函数

一、何为函数？

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

这里采用w3school-JavaScript函数给的定义。

使用函数，能有效时结构高内聚、低耦合。

在JavaScript中函数作为一种引用变量存在，在特性上颇具特色。

二、学习函数须知

函数也是一种数据类型，被划为为引用类型变量
开发命名规范：当多个单词拼写在一起时，第一个单词小写，其余单词许首字母大写。
loadingFile()、keepClick()、isEmpty();
小括号放参数。以下为函数的两种形式
JavaScript中函数的实参（实际参数）个数和形参（形式参数）个数不一定要相同。（该点在本文章内会介绍->五、函数的组成->1. 函数的参数）
return 会停止函数执行，并返回值。

三、命名函数表法式

在此，用例子来更好的说明

/* 
    var 函数(变量)名 = function [表达式名](){
        执行的语句；
        ....
        ....
        ....
    }
*/
    var test = function abc(){
        console.log("hello world");
    }

    // 在此情况下，调用函数需test()调用
    // 此时test.name为abc

    //抑或是:
    //此种方式为常用方法
   //demo 为函数变量
   //demo.name 为demo
   //调用函数为demo()
    var demo = function(){
        return 0;
    }
    //  test为该函数体，在控制台输入test会返回
    /*
    ƒ abc() {
                console.log("hello world");
            }
    */

控制台输入test时，附图

四、一般函数

    /*
        var 函数(变量)名 = function(){
            执行的语句；
            ....
            ....
            ....
        }
    */

   //此种方式为常用方法
   //demo 为函数变量
   //demo.name 为demo
   //调用函数为demo()
     function demo(){
        return 0;
    }

五、函数的组成

1. 函数（变量）存在的属性

在此仅介绍几个（此处假设函数变量名为demo）：

demo.length 为函数的形参个数

其次，在函数内部可以调用的属性

arguments[]（形参列表）为引用的数组类型，其用于存储实参。
- arguments[0],为第一个实参的值（存在的话）
- arguments.length 为传递实参的个数
demo[]（实参列表）为引用的数组类型,其用于存储形参。
- demo[0] ,为第一个形参的参数的值（存在的话）
- demo.length 为传递形参的个数。

附：正因为有该种属性的存在，使得JavaScript函数的实参的形参数目可以不同，⬇。

2. 函数的参数

    //在函数声明定义的参数为形参,以下a,b,c为形参
    var demo = function(a,b,c){
        return a+b+c;
    }
    //在调用函数时的参数为实参，3、4、5为实参
    var result = demo(3,4,5);

在JavaScript中，颇具特色的一点为其函数的实参个数与形参的个数不一定要相同，可以不同。

在函数调用时，实参和形参调用时，存在一定的映射关系，其具体规则如下。

    //函数在调用时，形参列表仅当对应位置存在实参时，才会映射值；
    //例如
    var demo = function (a,b,c,d){
        for(var i=0; i < arguments.length;i ++){
            document.write(arguments[i]);
        }
    }

    demo(1,2);//此时输出为1 2.arguments[]有1 2 demo[0],demo[1]分别为1、2 ，其余为undefined
    demo(1,2,3,4,5);//此时输出为1 2 3 4 5，arguments[]有1 2 3 4 5；demo[]有1 2 3 4 5
    demo(1,2,3,4,5,6);//此时输出为1 2 3 4 5 6，arguments[]有1 2 3 4 5 6；demo[]有1 2 3 4 5

3.函数相关题目及参考代码

以下为函数.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>
    <script>
        /*
                        函数说明：
                        此为对于四个问题的函数，函数的调用与输入、输出均在网页的控制台操作.
                        例如:在页面点击右键后，点击检查（或者按F12），即可看到控制台，输入即可
                        文章末会附教程相关图。
        */

        //示例，在控制台输出 
            console.log("控制台在此输出，其余函数均为调用还未输入，如不明白控制台怎么使用情况文章末步骤");
        
        //示例：在控制台输出hello world
        var test = function abc() {
                console.log("hello world");
            }
        // 1.写一个函数，输出告知的动物的叫声
        var animalVoice = function(animal) {
            var voice = "未知声音";
            if (animal == "老鼠") {
                voice = "吱吱";
            } else if (animal == "猫") {
                voice = "喵喵";
            } else if (animal == "狗") {
                voice = "汪汪";
            }

            return voice;
        }

        // 2.累加器
        var sum = function() {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                result += arguments[i];
            }
            return result;
        }


        // 3.输入数字，逆转并且输出汉字形式
        var han = function(a) {
            switch (a) {
                case 1:
                    return "一";
                case 2:
                    return "二";
                case 3:
                    return "三";
                case 4:
                    return "四";
                case 5:
                    return "五";
                case 6:
                    return "六";
                case 7:
                    return "七";
                case 8:
                    return "八";
                case 9:
                    return "九";
                case 0:
                    return "零";
            }
        }
        var reseverHan = function(num) {
            var c;
            var str = "";
            do {
                c = num % 10;
                num = parseInt(num / 10);
                str += (han(c));
            } while (num > 0);
            return str;
        }


        //4.输出n!
        var factorial = function(n) {
            if (n == 1)
                return 1;
            else
                return n * factorial(n - 1);
        }

        //5.输出1-n位斐波那契数列
        var Fibonacci = function(n) {
            var result = "";
            var first = 1;
            var second = 1;
            if (n >= 1)
                result += first + " ";
            if (n >= 2)
                result += second + " ";
            for (var i = 3; i <= n; i++) {
                var t = first + second;
                first = second;
                second = t;
                result += second + " ";
            }
            return result;
        }
    </script>
</body>

</html>

六、浏览器-控制台的相关使用

示例（基于函数.html文件）：

1. 页面内右键点击检查或者F12
1. 点击控制台
1. 在控制台调用函数使用

在这里插入图片描述

以上，此为本人学习过程中的笔记，可能因为能力不足存在一些不足，还请大家多多包涵和给予建议，共同进步。如有问题，敬请私信。

博白

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
JavaScript入门（三）-函数

JavaScrpit入门(三)-函数一、何为函数？JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。这里采用w3school-JavaScript函数给的定义。使用函数，能有效时结构高内聚、低耦合。在JavaScript中函数作为一种引用变量存在，在特性上颇具特色。二、学习函数须知函数也是一种数据类型，被划为为引用类型变量开发命名规范：当多个单词拼写在一起时，第一个单词小写，其余单词许首字母大写。loadingFile()、k
复制链接

扫一扫