JavaScript中的函数

最新推荐文章于 2022-09-09 22:07:56 发布
最新推荐文章于 2022-09-09 22:07:56 发布
阅读量651 收藏 4
点赞数
分类专栏： JavaScript 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/121460566
版权

JavaScript中的函数

1、函数的概念

在这里插入图片描述

2、函数的使用

在这里插入图片描述

2.1、声明函数

在这里插入图片描述

2.2、调用函数

在这里插入图片描述

2.3、函数的封装

在这里插入图片描述

2.4、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 利用函数计算1~100之间的累加和
        // 1、声明函数
        function getSum() {
            var sum = 0;
            for(var i=1;i<=100;i++){
                sum +=i;
            }
            console.log(sum);
        }
        // 2、调用函数
        getSum();
    </script>
</head>
<body>
    
</body>
</html>

3、函数的参数

3.1、形参和实参

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1、利用函数求任意两个数的和
        function getSum(num1,num2){
            console.log(num1+num2);
        }
        getSum(1,3);

         // 1、利用函数求任意两个数之间数的和
         function getSums(num1,num2){
            var sum = 0;
            for(var i = num1;i<=num2;i++){
                sum +=i;
            }
            console.log(sum);
        }
        getSums(1,100);
    </script>
</head>
<body>
    
</body>
</html>

3.2、形参和实参不匹配的问题

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数的形参和实参不匹配
        function getSum(num1,num2){
            console.log(num1+num2);
        }
        // 1、如果实参的个数和形参的个数一致，则正常输出结果
        getSum(1,2);
        // 2、如果实参的个数多余形参的个数，会取到形参的个数
        getSum(1,2,3);
        // 3、如果实参的个数小于形参的个数
        // 形参可以看作是不用声明的变量， num2 是一个变量但是没有接受值 结果就是undefined
        getSum(1);//NaN
        // 建议 我们尽量让实参的个数和实参相匹配
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.3、小结

在这里插入图片描述

4、函数的返回值

4.1、return语句

在这里插入图片描述

4.2、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 利用函数求数组的最大值
        function getArrMax(arr){
            var max = arr[0];
            for(var i =1;i<=arr.length;i++){
                if(arr[i]>max){
                    max = arr[i];
                }
            }
            return max;
        }
        // 调用函数
        var re = getArrMax([100,1,2,4,1000]);
        console.log(re);
        
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4.3、return 可以终止函数，并且只能返回一个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数返回值注意事项
        // 1、return 终止函数
        function getSum(num1,num2){
            return num1 + num2;//return后面的代码不会执行
            alert('我是不会被执行的哦')
        }
        console.log(getSum(1,1));
        
        // 2、return 只能返回一个值
        function fn(num1,num2){
            return num1,num2;//返回的结果是最后一个值
        }
        console.log(fn(1,2));

        // 3、我们求任意两个数的 加减乘除结果
        function getResult(num1,num2){
            return [num1+num2,num1-num2,num1*num2,num1/num2]
        }
        var re = getResult(1,2);//返回的是一个数组
        console.log(re);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4.4、函数没有return返回undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 4、函数如果有return 这返回值的是return后面的值，如果没有return 则返回undefined
        function fun1(){
            return 666;
        }
        console.log(fun1());//返回666
        
        function fun2(){

        }
        console.log(fun2());//函数返回的是undefined
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述

4.5、break，return、continue的区别

在这里插入图片描述

5、练习题

在这里插入图片描述

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript常用函数大全
极客神殿
10-24 1万+
javascript函数一共可分为五类： •常规函数 •数组函数 •日期函数 •数学函数 •字符串函数 1.常规函数 javascript常规函数包括以下9个函数： (1)alert函数：显示一个警告对话框，包括一个OK按钮。 (2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。 (3)escape函数：将字符转换成Unicode码。 (4)eval函数：计算表达式的结果。 ...
前端面试题大全
m0_53912016的博客
04-08 1042
css篇 js篇 内置函数 js内置函数是浏览器内核自带的，不用任何函数库引入就可以直接使用的函数。javascript内置函数一共可分为五类： 1、常规函数 2、数组函数 3、日期函数 4、数学函数 5、字符串函数 第一类：常规函数 包括以下9个函数： (1)alert函数：显示一个警告对话框，包括一个OK按钮。 (2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。 (3)escape函数：将字符转换成Unicode码。 (4)eval函数：计算表达式的结果。 (5)isNaN函数：
js中的函数
weixin_52346897的博客
04-19 2803
函数 引入（认识函数） 说起函数，其实我们并不陌生，在初中数学中我们就接触过函数；例如我们所学的 y = 2X+1 ; 这是一个二元一次方程，也是我们数字中的函数； 当我们每次输入一个X的值时，经过这个函数的运算，就会输出一个对应的y; 从这里我们可以看出：函数能够揭示一些规律，后续凡是具备相同的规律，可以用一种方法来解决 那么js中的函数是什么呢？ 什么是函数 函数：可以无限次完成特定功能代码块； 函数的作用 1.代码重用 2.用于组织代码 函数声明的方法： 1.函数声明式 2.函数表达式
JavaScript函数详细介绍
叶子yes的博客
08-12 8336
自由变量的值如何得到 —— 要到创建这个函数的那个父级作用域寻找，如果没有就一直向上级祖先元素寻找（这就是所谓的"静态作用域"，静态作用域是指函数的作用域在函数定义时就已经确定了）...
Javascript中的函数
weixin_54835055的博客
05-09 144
JavaScript中的函数 一、函数简介（function） ①函数也是一个对象。 ② 函数中可以封装和保存一些代码（功能），在需要时可执行与调用。 ③使用typeof检查一个函数对象时，会返回function （1）使用构造函数创造一个函数对象（在开发时，不建议用这方法） ①可以将要封装的代码以字符串的形式传递给构造函数。 ②封装到函数中的代码不会即可执行，而是在调用的时候执行。 ③调用函数时，...
了解Javascript中函数作为对象的魅力
10-16
主要介绍了了解Javascript中函数作为对象的魅力,javascript中函数可以有属性，可以有方法， 可以享有所有对象所拥有的特性。并且最重要的，她还可以直接被调用,需要的朋友可以参考下
JavaScript中函数与对象的解析.pdf
最新发布
01-03
JavaScript 中函数与对象的解析 JavaScript 中的函数与对象是掌握 JavaScript 语 言的基础。JavaScript 语 言与 C++、Java 等语 言在语法上类似，但其函数具有独特性。本文将深入了解 JavaScript 语言中的函数与...
javascript中函数作为参数调用的方法
10-24
主要介绍了javascript中函数作为参数调用的方法,实例分析了函数作为操作调用的原理与相关技巧,需要的朋友可以参考下
javascript中函数和方法的区别
01-08
2. **上下文**：方法中的`this`关键字通常指向调用该方法的对象，而在普通函数中，`this`的值取决于函数的调用方式（例如，作为对象的方法、通过`call`或`apply`等）。这使得方法能够直接访问和操作所属对象的属性。...
javascript中函数的写法实例代码详解
10-17
主要介绍了javascript中函数的写法 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
JS中一些常用的函数(持续更新)
weixin_44482737的博客
08-02 1092
JS中一些常用的函数
JS中的函数
weixin_47267628的博客
09-09 699
/ 定义函数方式一：一般不使用这种方式 var fun = new Function(" console.log('加油，学习前端!');");// 调用函数 fun();// 判断函数类型 alert(typeof fun);//返回值是：function，注意是：函数也是对象方式二：常用语法： function 函数名([ 形参 1 , 形参 2 , . . ]) {语句 ... }console . log("您好，明天!");} fun2();方式三：常用。
23、JavaScript执行（三）：你知道现在有多少种函数吗？
qq_46143850的博客
12-05 784
在前一篇文章中，我们大致了解了执行上下文是什么，也知道了任何语句的执行都会依赖特定的上下文。一旦上下文被切换，整个语句的效果可能都会发生改变。那么，切换上下文的时机就显得非常重要了。在JavaScript，切换上下文最主要的场景是函数调用。在这一课，我们就来讲讲函数调用切换上下文的事情。我们在讲函数调用之前，首先来认识一下函数家族。函数在ES2018中，函数已经是一个很复杂的体系了，我在这里整理了一下。第一种，普通函数：用function关键字定义的函数。示例：function foo(){ //
javascript中函数的分类
banjing_1993的博客
07-11 5269
前段写js代码的时候经常会碰到“长得特别的” function ，现在在此做下总结： 函数分类： 普通函数 匿名函数 闭包函数 普通函数 1.1 简单示例 function test(){ console.log("简单示例"); } test(); //控制台输出:简单示例 1.2 Js中同名函数的覆盖 在Js中函数是没有重载，定义相同函数名、不同参数签名的函...
JS:函数里的函数
sinat_35803474的博客
04-02 3133
题目描述 实现函数 functionFunction，调用之后满足如下条件： 1、返回值为一个函数 f 2、调用返回的函数 f，返回值为按照调用顺序的参数拼接，拼接字符为英文逗号加一个空格，即 ‘, ’ 3、所有函数的参数数量为 1，且均为 String 类型 输入例子:functionFunction(‘Hello’)(‘world’)输出例子:Hello, world思路 刚开始看不
web页面输出信息的几种方式
bianyaoyao的博客
03-19 4829
1. <script type="text/javascript"> alert("hhehe"); </script> 2. <script type="text/javascript"> confirm("123"); </script> 3. <script type="text/javascr...
JavaScript中的函数简述
weixin_44418584的博客
03-22 429
对于最近学的JavaScript中的函数，我稍微的整理了一下，希望会对大家有帮助 一 函数的定义与调用 1 在Javascript中，函数就是对象，其应用：被赋值给一个变量；被赋值为对象的属 性；作为参数被传入别的函数；作为函数的结果被返回。它可以避免相同功能的代码重复编写，函数的使用可以方便程序的开发和使用。 2 内置函数 注意：parseFloat()用于返回解析字符串后的浮点数；...
JavaScript中函数是如何调用的
03-24
JavaScript中函数可以通过函数名加括号的方式进行调用，也可以将函数赋值给变量，然后通过变量名加括号的方式调用。函数调用时可以传入参数，也可以不传参数。在函数内部，可以使用return语句返回一个值，也可以不...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值