javaScript基础学习 - 10 - JavaScript函数 - 案例代码

最新推荐文章于 2023-03-18 22:19:49 发布
最新推荐文章于 2023-03-18 22:19:49 发布
阅读量230 收藏 3
点赞数
分类专栏： # JavaScript 案例代码 文章标签： javascript web开发 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lan123456_/article/details/108081380
版权

javaScript基础学习 - 10 - JavaScript函数 - 案例代码

1. 什么是函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 求 1~100的累加和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);

        // 2. 求 10~50的累加和
        var sum = 0;
        for (var i = 10; i <= 50; i++) {
            sum += i;
        }
        console.log(sum);

        // 3. 函数就是封装了一段可以被重复执行调用的代码块 目的： 就是让大量代码重复使用
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSum(1, 100);
        getSum(10, 50);
        getSum(1, 1000);
    </script>
</head>
<body>
</body>

</tml>

2. 函数的使用

<script>
        // 函数使用分为两步： 声明函数 和 调用函数
        // 1. 声明函数
        // function 函数名() {
        //     // 函数体
        // }
        function sayHi() {
            console.log('hi~~');
        }
        // (1) function 声明函数的关键字 全部小写
        // (2) 函数是做某件事情，函数名一般是动词 sayHi 
        // (3) 函数不调用自己不执行
        // 2. 调用函数
        // 函数名();
        sayHi();
        // 调用函数的时候千万不要忘记加小括号
    </script>

3. 利用函数封装求1~100的和

<script>
    // 利用函数计算1-100之间的累加和 
    // 1. 声明函数
    function getSum() {
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);

    }
    // 2. 调用函数
    getSum();
    getSum();
</script>

4. 带参数的函数

<script>
    // 1. 函数可以重复相同的代码
    // function cook() {
    //     console.log('酸辣土豆丝');

    // }
    // cook();
    // cook();
    // 2. 我们可以利用函数的参数实现函数重复不同的代码
    // function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参 （形式上的参数）

    // }
    // 函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）
    // 3. 形参和实参的执行过程
    function cook(aru) { // 形参是接受实参的  aru = '酸辣土豆丝' 形参类似于一个变量
        console.log(aru);

    }
    cook('酸辣土豆丝');
    cook('大肘子');
    // 4. 函数的参数可以有，也可以没有个数不限
</script>

5. 利用函数求任意两个数的和

<script>
    // 1. 利用函数求任意两个数的和
    function getSum(num1, num2) {
        console.log(num1 + num2);
    }
    getSum(1, 3);
    getSum(3, 8);
    
    // 2. 利用函数求任意两个数之间的和
    function getSums(start, end) {
        var sum = 0;
        for (var i = start; i <= end; i++) {
            sum += i;
        }
        console.log(sum);
    }
    getSums(1, 100);
    getSums(1, 10);
    
    // 3. 注意点
    // (1) 多个参数之间用逗号隔开
    // (2) 形参可以看做是不用声明的变量
</script>

6. 函数形参实参个数匹配

<script>
	// 函数形参实参个数匹配
	function getSum(num1, num2) {
	    console.log(num1 + num2);	
	}
	
	// 1. 如果实参的个数和形参的个数一致 则正常输出结果
	getSum(1, 2);
	
	// 2. 如果实参的个数多于形参的个数  会取到形参的个数 
	getSum(1, 2, 3);
	
	// 3. 如果实参的个数小于形参的个数  多于的形参定义为undefined  最终的结果就是 NaN
	// 形参可以看做是不用声明的变量  num2 是一个变量但是没有接受值  结果就是undefined 
	getSum(1); // NaN
	// 建议 我们尽量让实参的个数和形参相匹配
</script>

7. 函数的返回值

<script>
    // 1.函数是做某件事或者实现某种功能
    // function cook(aru) {
    //     console.log(aru);
    // }
    // cook('大肘子');
    
    // 2. 函数的返回值格式
    // function 函数名() {
    //     return 需要返回的结果;
    // }
    // 函数名();
    // (1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
    // (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者  函数名() = return后面的结果
   
    // 3. 代码验证
    function getResult() {
        return 666;
    }
    getResult(); // getResult()   = 666
    console.log(getResult());

    // function cook(aru) {
    //     return aru;
    // }
    // console.log(cook('大肘子'));
    
    // 4. 求任意两个数的和
    function getSum(num1, num2) {
        return num1 + num2;
    }
    console.log(getSum(1, 2));
</script>

8. 求两个数的最大值（函数版)

<script>
    // 利用函数 求两个数的最大值
    function getMax(num1, num2) {
        // if (num1 > num2) {
        //     return num1;
        // } else {
        //     return num2;
        // }
        return num1 > num2 ? num1 : num2;
    }
    console.log(getMax(1, 3));
    console.log(getMax(11, 3));
</script>

9. 求数组中的最大值(函数版)

<script>
    // 利用函数求数组 [5,2,99,101,67,77] 中的最大数值。
    function getArrMax(arr) { // arr 接受一个数组  arr =  [5,2,99,101,67,77]
        var max = arr[0];
        for (var i = 1; i <= arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
    // getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
    // 在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
    // var re = getArrMax([5, 2, 99, 101, 67, 77]);
    var re = getArrMax([3, 77, 44, 99, 143]);
    console.log(re);
</script>

10. 函数返回值注意事项

<script>
    // 函数返回值注意事项
    // 1. return 终止函数
    function getSum(num1, num2) {
        return num1 + num2; // return 后面的代码不会被执行
        alert('这里不会执行！')
    }
    console.log(getSum(1, 2));  // 3
    
    // 2. return 只能返回一个值
    function fn(num1, num2) {
        return num1, num2; // 返回的结果是最后一个值
    }
    console.log(fn(1, 2));  // 2

    // 3.  我们求任意两个数的 加减乘数结果
    function getResult(num1, num2) {
        return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
    }
    var re = getResult(1, 2); // 返回的是一个数组
    console.log(re);  // [3, -1, 2, 0.5]
    
    // 4. 我们的函数如果有 return 则返回的是 return 后面的值，如果函数没有 return 则返回 undefined
    function fun1() {
        return 666;
    }
    console.log(fun1()); // 返回 666
    
    function fun2() {

    }
    console.log(fun2()); // 函数返回的结果是 undefined
</script>

11. arguments使用

<script>
    // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
    function fn() {
        // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
        // console.log(arguments.length);
        // console.log(arguments[2]);
        // 我们可以按照数组的方式遍历arguments
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
    fn(1, 2, 3);
    fn(1, 2, 3, 4, 5);
    // 伪数组 并不是真正意义上的数组
    // 1. 具有数组的 length 属性
    // 2. 按照索引的方式进行存储的
    // 3. 它没有真正数组的一些方法 pop()  push() 等等
</script>

12. 利用函数求任意个数的最大值

<script>
    // 利用函数求任意个数的最大值
    function getMax() { // arguments = [1,2,3]
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    }
    console.log(getMax(1, 2, 3));
    console.log(getMax(1, 2, 3, 4, 5));
    console.log(getMax(11, 2, 34, 444, 5, 100));
</script>

13. 利用函数翻转数组

<script>
    // 利用函数翻转任意数组 reverse 翻转
    function reverse(arr) {
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i];
        }
        return newArr;
    }
    var arr1 = reverse([1, 3, 4, 6, 9]);
    console.log(arr1);
    var arr2 = reverse(['red', 'pink', 'blue']);
    console.log(arr2);
</script>

14. 利用函数冒泡排序

<script>
    // 利用函数冒泡排序 sort 排序
    function sort(arr) {
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        return arr;
    }
    var arr1 = sort([1, 4, 2, 9]);
    console.log(arr1);
    var arr2 = sort([11, 7, 22, 999]);
    console.log(arr2);
</script>

15. 利用函数判断闰年

<script>
    // 利用函数判断闰年
    function isRunYear(year) {
        // 如果是闰年我们返回 true  否则 返回 false 
        var flag = false;
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag;
    }
    console.log(isRunYear(2000));
    console.log(isRunYear(1999));
</script>

16. 函数是可以相互调用的

<script>
    // 函数是可以相互调用的
    // function fn1() {
    //     console.log(11);
    //     fn2(); // 在fn1 函数里面调用了 fn2 函数
    // }
    // fn1();

    // function fn2() {
    //     console.log(22);

    // }

    function fn1() {
        console.log(111);
        fn2();
        console.log('fn1');
    }

    function fn2() {
        console.log(222);
        console.log('fn2');
    }
    fn1();
</script>

17. 输出年份的2月份天数

<script>
    // 用户输入年份，输出当前年份2月份的天数
    function backDay() {
        var year = prompt('请您输入年份:');
        if (isRunYear(year)) { // 调用函数需要加小括号
            alert('当前年份是闰年2月份有29天');
        } else {
            alert('当前年份是平年2月份有28天');
        }
    }
    backDay();


    // 判断是否为闰年的函数
    function isRunYear(year) {
        // 如果是闰年我们返回 true  否则 返回 false 
        var flag = false;
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag;
    }
</script>
来杯卡布奇洛
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript前端开发案例教程-PPT(2).rar
04-29
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
JavaScript 代码的加入
weixin_34309543的博客
07-17 137
JavaScript 的脚本包括在 HTML 中，它成为 HTML 文档的一部分。与 HTML 标识相结合，构成动态 的、能够交互的网页。 JavaScript代码应该放在Web页的什么位置呢？ 方式一：在 HTML 页面中直接写入 JavaScript （1）HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 JavaS...
JavaScript 函数
余月初贰的博客
06-22 131
JavaScript 函数
用JavaScript实现，通过调用至少两个函数来实现任意两个数平方的阶乘和
狮子座的男孩
05-13 565
Ⅰ、问题描述： 通过调用至少两个函数来实现两个数平方的阶乘和 分析： 一个函数来实现输入数的平方； 一个函数来实现数的阶乘； 通过函数的嵌套调用等方式，来实现最终结果； Ⅱ、实现过程如下： 1、运行软件VScode，亲测可实现； 2、运行代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
第六次作业
2301_76534925的博客
03-18 102
System.out.println("学生编号\t语文成绩\t数学成绩\t英语成绩\t平均成绩\t总成绩");System.out.println(" 简单客车售票系统" + "\n 9排4列的大巴车开始售票");System.out.println("请输入第" + (i + 1) + "个学生的编号：");System.out.println("请输入语文成绩：");System.out.println("请输入数学成绩：");System.out.println("请输入英语成绩：");
Javascript学习之函数(function)
weixin_30645617的博客
04-12 316
在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。 一 函数的声明方式 //1.函数声明方式 function add(num1,num2){ return num1+num2; } //2.函数表达式定义函数 var...
JavaScript前端开发案例教程-PPT(3).rar
04-29
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
JavaScript前端开发案例教程-PPT(1).rar
04-29
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
javascript基础学习代码总结
01-18
该资源在有21个html文件，每个文件都是用来讲述对应知识点的用法，如循环、函数、内置对象等。还有写对于javascript对应的知识...4.适合于没有javascript基础或javascript基础不扎实想要学习js知识点的人群参考和学习。
fc-alibaba-component:阿里云 函数计算 组件
05-01
通过本组件，您可以简单快速的将阿里云函数计算项目部署到线上。 使用 最简使用方法 模版拉取： s init python3-http -p alibaba 其中Yaml的默认配置为： MyFunctionDemo: Component: fc Provider: alibaba ...
Day11 函数进阶
从不喝奶茶的博客
01-30 135
day11 函数进阶 目标：掌握函数相关易错点 & 项目开发必备技能。 今日概要： 参数的补充 函数名，函数名到底是什么？ 返回值和print，傻傻分不清楚。 函数的作用域 1.参数的补充 在函数基础部分，我们掌握函数和参数基础知识，掌握这些其实完全就可以进行项目的开发。 今天的补充的内容属于进阶知识，包含：内存地址相关、面试题相关等，在特定情况下也可以让代码更加简洁，提升开发效率。 1.1 参数内存地址相关【面试题】 在开始开始讲参数内存地址相关之前，我们先来学习一个技能： 如果想要查看下某
day11-函数基础作业
Ka_neki的博客
12-13 93
写一个函数，实现maketrans的功能，将两个字符串转换成一个字典，第一个字符串中的字符是键，第二个字符串中的字符是值 第一个字符串： ‘abcmn’ 第二个字符串：‘一二三四五’ 结果：{‘a’: ‘一’, ‘b’: ‘二’, ‘c’: ‘三’, ‘m’: ‘四’, ‘n’: ‘五’} def create_dic(str1, str2): list1 = [] for x in range(len(str1)): list1.append((str1[x],..
python语言基础笔记_Python3.6学习笔记总结(三),看完这些，Python你就基本掌握了
weixin_39553423的博客
11-23 94
原标题：Python3.6学习笔记总结(三),看完这些，Python你就基本掌握了学习Python语言的，这本书可以参考参考哦，自己还是要拥有一本属于自己的书的，因为你在忘记的时候可以经常拿出来翻阅一下，巩固一下。文章内容面向对象编程面向对象编程 Object Oriented Programming 简称 OOP，是一种程序设计思想。OOP把对象作为程序的基本单元，一个对象包含了数据和操作数据的...
JavaScript函数案例
qq_58492621的博客
07-23 986
JavaScript函数案例，包含基本函数、arguments的使用以及构造函数的案例介绍，是比较全面典型的案例，对熟悉函数有很大的作用。
JavaScript，函数的多个案例学习
zhangawei123的博客
10-23 447
本文章列举了多个JavaScript的函数案例，帮助大家理解和使用函数，包括函数的封装调用，参数的传递，switch，continue 练习。提供源码为初学者进行更好的学习。
JavaScript经典应用案例
houzeyu666的博客
10-11 6773
########JavaScript#######       ## JS注册表单的校验雏形   &lt;!-- 1. 需求:     1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;     2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）     -后台校验: 也是需要校验的； 2. 需要...
JavaScript函数以及案例
小桂的博客
12-09 666
文章目录​​​​​ 一.为什么需要函数 二.函数使用 三.函数传参 四.函数返回值 五.作用域 六.匿名函数 前言 1. 掌握函数的基本使用，让代码具备复用能力 2. 理解封装的意义，能够具备封装函数的能力 一.为什么需要函数? 1.函数是什么？ function，是被设计为执行特定任务的代码块 2.说明 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势 是有利于精简代码方便复用。 3....
JavaScript 函数实例集合
梁辰兴的博客
03-07 75
【代码】JavaScript 函数实例集合。
JavaScript之几个函数案例
weixin_30521649的博客
01-20 322
几个案例 <script> //求2个数中的最大值 function getMax(num1, num2) { return num1 > num2 ? num1 : num2; } console.log(getMax(5, 10)); //求3个数中的最大值 function getMax_3(x, y, z...
JavaScript：综合案例---房贷计算器的实现
最新发布
06-10
在上面的代码示例中，我们首先通过`document.getElementById()`方法获取了页面中的各个元素，然后定义了一个计算每月还款金额的函数`calculateMonthlyPayment()`，最后定义了一个计算房贷支付指标的函数`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值