Javascript知识分享——函数

最新推荐文章于 2022-11-17 08:00:44 发布

墨承天

最新推荐文章于 2022-11-17 08:00:44 发布

阅读量813

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/DS153/article/details/121076361

版权

5.break，continue，return的区别

前言

前面给大家分享的javascript的流程控制，不知道大家学会了多少。学习完了javascript的内容之后，我们也要进入下一个阶段了。当我们初次学习java的时候，java存在着函数，对象，方法等等的内容，而我们的javascript也同样存在着函数和对象。他们含义是一样的，但是javascript的使用和操作可能相比java会更加简单。今天就让我们来看看javascript的函数有些什么样的内容吧。

一、函数的概念

在javascript里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用javascript中的函数。
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

二、函数的使用

函数在使用时分为两步：声明函数和调用函数。我们先来看看函数是如何声明的：

1.函数的声明

// 声明函数
function 函数名() {
//函数体代码
}

function 是声明函数的关键字,必须小写。由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum。通过这个方式，我们可以吧函数放入花括号里面，然后包装这个代码。函数声明之后，我们就需要调用他：

2.函数的调用

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

这里需要注意的是，调用的时候千万不要忘记添加小括号。
口诀：函数不调用，自己不执行。
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

可以看一个例子来理解一下：

function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        getSum(1, 2);

包装好的函数，只需要通过getsum调用，然后里面放上实参就可以执行函数。结果如下：

3.函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。例如下面这个代码：

function getMax() {
    var max = arguments[0];
    for (var i = 0; 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, ));
console.log(getMax(11, 2, 34, 444, 5, 100));

我们可以看到我们封装了一个复杂的代码在函数里面，但是我们需要调用的时候，只需要使用getmax去调用，就可以重复的使用这个代码去得出结果，这就是函数的封装。它的结果如下：

三、函数的参数

虽然我们了解了函数是什么，但是函数内部的内容，还不能完全明白，代码可能看着也会很迷惑。现在，我们就来深入的了解一下函数的参数是什么。

1.形参和实惨

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

eg：
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

2.函数参数的传递过程

让我们先来看一段代码：

        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        getSum(1, 3); // 4
        getSum(6, 5); // 11

让我们来看看它的执行过程：

我们可以看到，代码执行的时候，因为还没有检测到调用函数，所以代码运行的时候，略过了函数，先找到了调用。之后，调用函数内的实参传递给了函数的形参，所以我们能够看到getsum旁边的形参获得了num1=1，num2=3的变量赋予的过程。之后运行了函数内的log，结果4打印出来，跳出了函数。之后遇到了第二个调用函数，同样的过程把实参传递给形参，num1=6，num2=5，之后执行log，输出了11，最后才结束了代码，这就是函数参数传递的过程。

3.函数形参和实参个数不匹配的问题

关于形参和实惨不匹配的问题，显然我们直接用代码来测试一下我们就会明白了。这里直接上去就是一个代码的演示！

        function sum(num1, num2) {
            console.log(num1 + num2);
        }
        sum(100, 200);
        sum(100, 400, 500, 700);
        sum(200);

让我们来看看它的运行结果：

为什么是这样的结果呢？接下来我用动图来解释这个过程。

我们可以看到，当参数对应的时候，就是正常的实参传递给形参，一一对应，功能是正常实现的。当实参个数超过了形参的个数，实参仍然还是一一对应的传递，多余的则不会被形参接受，可以认为形参每次只会接受一个实参，而多余的实参是不会接受的。当实参个数少于形参的时候，只有第一个num1接受了实参的数值，而没有被传递的形参num2，则被定义为undefined。也就是说，形参在javascript中是被定义为undefined的，只有实参传递给形参，赋值给形参，形参才会改变undefined的数据类型。这里我们用一张图来归纳这个过程：

4.总结

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

四、函数的返回值

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。在讲函数封装的时候，我们可以看到函数内部存在一个return。这是在java、python、c++里面都会看到的语句，他就是我们需要讲的函数的返回值。

1.return语句

eg:
// 声明函数
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值。如果函数没有 return ，返回的值是 undefined。一些没有return而有log的函数，因为log就是一个结果的输出，所以函数是可以正常输出的。

2.return终止函数

当函数运行到return的时候，return 语句之后的代码不被执行。这里我们用代码演示一遍给大家看：

        function add(num1, num2) {
            return num1 + num2; // 注意：return 后的代码不执行
            console.log('我不会被执行，因为前面有 return');
        }
        var resNum = add(21, 6);
        console.log(resNum);

我们来看看动图演示它的代码运行的情况：

我们可以看到，代码在调用函数之后，实参传递给形参，return执行了num1+num2，最上面显示了return value = 27之后，结果存储在resnum，通过log打印出来。但是return后的语句直接被跳过了。所以return后的语句是不会再执行的。

3.return返回值

我们可以看到return可以放入很多内容，这包括了表达式和变量，那么return能不能返回多个值呢？我们用代码实战演示一下：

        function add(num1, num2) {
            return num1, num2;
        }
        var resNum = add(21, 6);
        console.log(resNum);

我们可以看到，retuen的数值只把后面的一个数值输出出来了。 这说明return只能返回一个值。如果用逗号隔开多个值，以最后一个为准。如果需要返回多个值可以选择用数组来存储数据。

4.当没有return的时候？

我们把2.return终止函数的return去掉，结果是什么呢？

我们从这里和上面的知识结合：

函数都是有返回值的
如果有return 则返回 return 后面的值
如果没有return 则返回 undefined

5.break，continue，return的区别

这里我们直接总结一下知识，大家可以自己对比看看他们的区别：

break ：结束当前的循环体（如 for、while）
continue ：跳出本次循环，继续执行下次循环（如 for、while）
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

五、关于函数的其他知识

函数最基本的就是调用声明，和返回语句了。除此之外还有其他的内容：arguments的使用，函数可以调用另一个函数的情况，函数的两种声明方式的知识和大家介绍。

1.arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上，它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

而它的代码的使用就在前面的例子里，这里我们用图片来说明：

我们可以看到函数没有形参的传递，但是我们可以使用arguments形成一个数组，当实参传递了多少，都可以通过arguments传递给内部的函数，只需要在关键的位置替换成和arguments相关的变量就可以了。

2.函数可以调用另一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。我们可以用例子来看看他们的执行变化：

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

这段代码的运行结果会是什么呢？我们来运行看看：

为什么会这样运行呢？这是因为函数不调用，函数不执行的原则，上面不调用，首先执行了fn1();的函数，函数执行之后又遇到了调用函数的fn2();，因此111按顺序执行先被执行之后，又执行了222和fn2的语句，最后执行了fn1的语句。

3.函数的两种声明方式

函数的声明方式有两种，第一种是我们现在使用的声明方式，叫做自定义函数方式（命名函数），另外一种叫做函数表达式方式（匿名函数）。

利用函数关键字 function 自定义函数方式。
eg：
// 声明定义方式
function fn() {...}
// 调用
fn();

因为有名字，所以也被称为命名函数
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

利用函数表达式方式的写法如下：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也被称为匿名函数
这个fn 里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的
函数调用的代码必须写到函数体后面

结尾

函数的声明和使用是最为重要的内容，请务必多多复习学习，同时不要忘记了return语句的内容。上述的内容就是这次我想分享的知识了，希望大家也要努力学习，多多完善自己的javascript的知识。可以的话给我点个赞吧！

墨承天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript知识分享——函数

前言学习javascript的过程中，基础是非常重要的。基础中，函数和对象都是非常重要的对象之一。今天我们就来学一下，函数的知识，学习为什么需要函数，怎么声明，调用函数等等的知识。一、函数的概念在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用...
复制链接

扫一扫