2021-11-28

八、初识函数

1.定义

function 是定义函数的关键字，函数也称为方法 。

函数分为：1.无参函数    2.带参函数    3.带返回值的函数

定义函数

function fn(形参) {

    方法体

}

调用函数

fn(实参)

<!DOCTYPE html>

<html>

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

        // 函数，也称之为方法，是完成某个功能的代码块

        // function 是定义函数的关键字

        // 函数分为：1.无参函数 2.带参函数 3.带返回值的函数


        //1.定义无参函数，函数的()里面没有定义参数，这样的函数就是无参函数

        function fun1(){

            let num1 = 100

            let num2 = 200

            console.log(`${num1}+${num2}=${num1+num2}`);

        }

        // 函数必须要调用后，才会执行里面的代码

        fun1()

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

        //2.定义带参数函数，函数的()里面需要传参数，参数可以传多个，参数名是自定义的

        // 函数在定义时候，定义的参数是：形参

        function fun2(num1,num2){

            console.log(`${num1}+${num2}=${num1+num2}`);

        }

        // 带有带参数的函数时，传递具体的实际值（函数在调用时，传递的参数是：实参）

        fun2(100,200)

        fun2(1000,2000)

        fun2(10,20)

        // 调用带参数的方法时，如果没有传递参数，那么参数就是值就是undefined

        fun2()

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

        // 3.带返回值的函数

        function fun3(num1,num2){

            let sum = num1 + num2

            // return关键字，只能用的函数中，用于返回函数的执行结果

            return sum

        }

        // 调用带返回值的函数，需要通过变量接收函数的返回值。

        let sum = fun3(100,200)

        console.log(sum);

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

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

    <!-- 导入外部js -->

    <script src="./js/$a.js"></script>

    <script>

        //创建一个当前日期

        let date1 = new Date()

        //创建一个指定日期

        let date2 = new Date('2020-1-1 12:8:8')

        //根据时间戳创建一个日期对象

        let date3 = new Date(123234214213)

        console.log(formatDate(date1));

        console.log(formatDate(date2));

        console.log(formatDate(date3));

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

        let arr1 = [11,66,33,245,7,99]

        let arr2 = [77,234,5,66,28]

        mySort(arr1)

        mySort(arr2)

        console.log(arr1);

        console.log(arr2);

    </script>

</body>

</html>

2.实现字符串函数

<!DOCTYPE html>

<html>

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

        // 定义一个函数：获取一个字符串指定下标的字符

        let str1 = 'abcdefg'

        function charAt(index){

            return str1[index]

        } 

        console.log(charAt(3));

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

        // 定义一个函数：返回字符串中指定字符第一次出现的位置

        let str2 = "abc你def你gwt你zyt"

        function indexOf(str){

            let index = -1  //定义一个变量，用于表述字符串的位置

            //循环出字符串中所有的字符串

            for(let i=0;i<str2.length;i++){

                //挨个比较字符串中所有的字符

                if(str2[i]===str){

                    //如果相对，就返回对应的下标

                    index = i;

                    break;

                }

            }

            return index

        }

        console.log(indexOf('你'));

        console.log(indexOf('好'));

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

        // 定义一个函数：返回字符串中指定字符最后一次出现的位置

        function lastIndexOf(str){

            let index = -1  //定义一个变量，用于表述字符串的位置

            //循环出字符串中所有的字符串

            for(let i=str2.length-1;i>=0;i--){

                //挨个比较字符串中所有的字符

                if(str2[i]===str){

                    //如果相对，就返回对应的下标

                    index = i;

                    break

                }

            }

            return index

        }

        console.log(lastIndexOf('你'));

        console.log(lastIndexOf('好'));

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

        // 定义一个函数：用于截取指定区间范围内的字符串，如果只传一个参数，从起始位置往后全部截取

        let str3 = 'abcdefghijklmn'

        function substring(index1,index2){

          let str = ""  //定义一个变量，用于保存截取的结果

          //如果index2没有值，截取到最后

          if(!index2){

              index2 = str3.length

          }

          //确定循环的范围

          for(let i=index1;i<index2;i++){

            str+=str3[i]

          }

          return str

        }

        console.log(substring(3,7));

        console.log(substring(3));

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

        // 定义一个函数：用于截取指定长度的字符串，第一个参数是位置，第二参数是长度

        function substr(index,len){

          let str = ""  //定义一个变量，用于保存截取的结果

          //确定查找范围

          let index2 = index+len

          //如果len是空，那么就从起始位置到最后全部截取

          if(!len){

            index2 = str3.length

          }

          //确定循环的范围

          for(let i=index;i<index2;i++){

            str+=str3[i]

          }

          return str

        }

        console.log(substr(3,7));

        console.log(substr(3));

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

    </script>

</body>

</html>

3.实现数组的函数

<!DOCTYPE html>

<html>

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

        // 手写一个数组函数：用于从数组中检查指定的数据是否存在，存在返回true，不存在返回false

        let arr1 = [25,66,3,46,38]

        function includes(val){

            let isFind = false  //定义一个变量，用于表示是否找到

            //循环数组

            for(let i=0;i<arr1.length;i++){

                //判断数组中的每一个元素

                if(arr1[i]==val){

                    isFind = true

                    break  //加上这个break，可以提高性能

                }

            }

            return isFind

        }

        console.log(includes(33));

        console.log(includes(88));

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

        // 手写一个数组函数：用于将一个数组根据某个字符串拼接成字符串，该方法不传参数，默认是根据逗号拼接

        function join(str){

            let str1 = ""  //定义一个字符串，用于拼接

            //如果str是空，赋值为逗号

            if(!str){

                str=","

            }

            //拼接数组最后一位前面的所有数据

            for(let i=0;i<arr1.length-1;i++){

                str1+=arr1[i]+str

            }

            //最后再拼接数组的最后一位

            str1+=arr1[arr1.length-1]

            return str1

        }

        console.log(join('你好'));

        console.log(join());

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

        // 手写push

        function push(val){

            //增加一个数组空间，存储数据

            arr1[arr1.length] = val

        }

        push(66)

        console.log(arr1);

        push(77)

        console.log(arr1);

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

        // 手写pop

        function pop(){

            //重新设置数组的长度，会去掉最新长度后面的元素。

            arr1.length = arr1.length-1

        }

        pop()

        console.log(arr1);

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

        // 手写unshift

        function unshift(val){

            //从后往前循环整个数组

            for(let i=arr1.length-1;i>=0;i--){

                //将数组里面原始数据完后挪一个位置

                arr1[i+1] = arr1[i]

            }

            //再将添加的元素，放到数组的第一位

            arr1[0] = val

        }

        unshift(123)

        console.log(arr1);

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

        // 手写shift

        function shift(){

            //循环整个数组，将数组中的后一位数，覆盖前一位数

            for(let i=0;i<arr1.length-1;i++){

                arr1[i] = arr1[i+1]

            }

            //再删除掉最后一位数

            arr1.length = arr1.length-1

        }

        shift()

        console.log(arr1);

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

        // 手写reverse

        function reverse(){

            //算出比较的次数（6个数比较3次，7个数也是比较3次）

            let count = Math.floor(arr1.length/2)

            //循环比较的次数

            for(let i=0;i<count;i++){

                //将前面的数，通过一个中间变量保存

                let temp = arr1[i]

                //将后面的数赋值给前面的数

                arr1[i] = arr1[arr1.length-1-i]

                //再将中间变量的值，赋给后面的数

                arr1[arr1.length-1-i] = temp

            }

        }

        reverse()

        console.log(arr1);

    </script>

</body>

</html>

4.定义函数的几种方式

1.第一个方式：通过function关键字直接定义

2.第二种方式：定义一个变量，接收定义的函数

3.ES6又推出了定义函数的简写方式，俗称：箭头函数

        （1).在箭头函数中，如果方法体只有一条语句，可以省略{}

          (2).在箭头函数中，如果方法只有一个参数，可以省略()

          (3).在箭头函数中，如果方法体只有一条语句，并该语句是返回语句，那么在省略{}的同时，必须省略return关键字

<!DOCTYPE html>

<html>

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

        // 第一种方式：通过function关键字直接定义

        function fun1(){

            console.log('我是方法一');

        }

        fun1()

        // 第二种方式：定义一个变量，接收定义的函数

        let fun2 = function(){

            console.log('我是方法二');

        }

        fun2()

        // 第三种方式：箭头函数，其实就是第二种方式的简写。(ES6新推出的一种方式)

        let fun3 = ()=>{

            console.log('我是方法三');

        }

        fun3()

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

        /* let fun4 = (num1,num2)=>{

            return num1 + num2

        } */

        // 如果箭头函数的函数体，只有一条语句，可以省略大括号，如果这一条语句还是返回语句，return关键字必须省略

        let fun4 = (num1,num2)=>num1 + num2

        console.log(fun4(100,200));

        let fun5 = (num1,num2)=>console.log(`${num1}+${num2}=${num1+num2}`);

        fun5(100,200)

        // 如果箭头函数的参数，只有一个，那么可以省略小括号

        let fun6 = num=>console.log(num*3);

        fun6(100)

        // 如果箭头函数没有参数，通常要保留小括号，如果非要去掉小括号，需要写一个下划线占一个位置

        let fun7 = _=>console.log('我是箭头函数')

        fun7()

    </script>

</body>

</html>

5.定义几个工具方法

1.检查一个年份是否是闰年

2.对个位数字补零

3.返回一个日期的短日期格式

4.返回一个中国式的日期格式

5.对字符串反转

外部javascript代码：

// 判断是否是闰年的方法

let isLeapYear = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

// 对个位数字补零的方法

let repair0 = (val) => (val < 10 ? "0" + val : val);

// 返回一个日期的短日期格式方法

let miniDate = (date, type) => {

  let year = date.getFullYear(); //年

  let month = date.getMonth() + 1; //月

  let day = date.getDate(); //日

  let hour = date.getHours(); //时

  let minute = date.getMinutes(); //分

  let second = date.getSeconds(); //秒

  let week = date.getDay(); //周几

  //定义一个返回值，默认拼接：年，月，日

  let ret = [repair0(year), repair0(month), repair0(day)].join("-");

  if (type == "1") {

    ret += " " + [repair0(hour), repair0(minute), repair0(second)].join(":");

  } else if (type == "2") {

    ret +=

      " " +

      [repair0(hour), repair0(minute), repair0(second)].join(":") +

      " 星期" +

      "日一二三四五六"[week];

  }

  return ret;

};

// 对字符串反转的方法

let reverseStr = (str) => str.split("").reverse().join("");

<!DOCTYPE html>

<html>

<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 src="./js/$a.js"></script>

    <script>


        console.log(isLeapYear(2000));

        console.log(isLeapYear(2003));

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

        console.log(repair0(15));

        console.log(repair0(5));

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

        console.log(miniDate(new Date()));

        console.log(miniDate(new Date(),'1'));

        console.log(miniDate(new Date(),'2'));

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

        console.log(reverseStr('abcdefg'));

    </script>

</body>

</html>

6.递归方法

什么是递归方法：就是一个方法，自己调用自己。注意：递归方法，一定要控制好合适跳出，否则就是死循环

<!DOCTYPE html>

<html>

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

        // 什么是递归方法：就是一个方法，自己调用自己

        // 注意：递归方法，一定要控制好何时跳出，否则就是死循环


        // 经典面试题：使用递归算法1-20之间所有数之和

        function calc(num){

            //这个if是退出递归的条件

            if(num===1) {

                return num

            }

            return num + calc(num-1)

        }

        console.log(calc(1));

        console.log(calc(2));

        console.log(calc(3));

        console.log(calc(20));

    </script>

</body>

</html>

实现系统菜单

function menu(){

    let no = parseInt(prompt('1.添加学生，2.修改学生，3.删除学生，0.退出系统'))

    switch(no){

        case 1:

            alert('执行添加学生')

            menu()

            break;

        case 2:

            alert('执行修改学生')

            menu()

            break;

        case 3:

            alert('执行删除学生')

            menu()

            break;

        default:

            return  //表示退出方法

    }

}

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

        // 实现系统菜单

        function fun1(){

            let menu = 0

            do{

                menu = parseInt(prompt('1.添加 2.修改 3.删除 4.查询 0.退出'))

                switch(menu){

                    case 1:

                        alert('执行添加')

                        break;

                    case 2:

                        alert('执行修改')

                        break;

                    case 3:

                        alert('执行删除')

                        break;

                    case 4:

                        alert('执行查询')

                        break;

                    default:

                        alert('欢迎下次继续使用');

                        break;

                }

            }while(menu!==0)

        }

        // fun1()

        function fun2(){

            let menu = parseInt(prompt('1.添加 2.修改 3.删除 4.查询 0.退出'))

            switch(menu){

                case 1:

                    alert('执行添加')

                    fun2()  //在方法内部，又重新调用自己

                    break;

                case 2:

                    alert('执行修改')

                    fun2()

                    break;

                case 3:

                    alert('执行删除')

                    fun2()

                    break;

                case 4:

                    alert('执行查询')

                    fun2()

                    break;

                default:

                    alert('欢迎下次继续使用');

                    break;

            }

        }

        fun2()

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342

推荐阅读更多精彩内容

  • 2021-11-28
    七、Math和Date 1.排序算法 sort()方法，用于对数组排序。注意：该排序方法，是根据数组中，每一个元素...
    默默_01cf阅读 123评论 0赞 0
  • JS函数
    函数，也称之为方法，是完成某个功能的代码块 function 是定义函数的关键字 函数分为：1.无参函数 2.带参...
    kygo阅读 290评论 0赞 1
  • 2019-11-25
    https://blog.csdn.net/feiyunjs/article/details/94722766 /...
    FsdSoyu阅读 939评论 0赞 0
  • JS合集（总）
    [if !supportLists]第一章 [endif]基本语法 [if !supportLists]一、[en...
    海绵宝宝_b8a2阅读 508评论 0赞 0
  • ES6相关
    1、es5和es6的区别，说一下你所知道的es6 ECMAScript5，即ES5，是ECMAScript的第五次...
    没糖_cristalle阅读 675评论 0赞 0