Js基础-函数

这篇具有很好参考价值的文章主要介绍了Js基础-函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

函数是实现功能的载体, 它应该是一个最小功能的封装, 比如我们要计算两个数之和,再比如我们要实现计算正方形的体积等等。

函数定义和调用

函数定义

我们使用 function 关键字定义函数


// demo 为函数名, 自己命名但必须符合JS标识符命名规则
// () 小括号中可以带参数, 这种参数还有个称呼 叫做 形式参数 简称形参 。 形参可以省略,但小括号不能省
// {} 大括号内部的函数就是逻辑运算部分, 如果我们要计算 传入的 a、b 的和,就可以在这里写
function demo(a, b){
   // 函数的主题内容
}

函数调用

我们希望在哪里执行定义的函数, 就在哪里进行调用。

// 函数调用,写清楚函数名称,已经调用的参数
demo(2, 3);

从函数定义中,我们可以看出函数总共由三部分构成, 输入、输出和计算

输入告诉我们外部的一些变量值,然后通过计算把结果输出

输入

输入传的值,我们也叫形参,即形式参数,意思是我们还不知道具体传什么值,先拿一个变量占上坑。如函数定义中的 a, b 两个参数

当我们具体调用的时候才会确定要传什么值, 这时候的参数叫做实参(实际参数)

// 传入 2, 3 在函数运算的时候会替换掉 形参, 所以我们叫他们实参
demo(2, 3);

形参 和 实参 有时候数量并不相等,不等情况有两种

  1. 形参比实参多
<script>
  function print(a, b , c) {
		console.log("a=", a,",b=",b,",c=",c);
	}

// 形式参数 定义了三个 a, b ,c 但此时之传入了两个, 则 1赋值给 a , 2赋值给b , c 只能为 undefined了
print(1, 2)
</script>
  1. 实参比形参多
<script>
  function print(a, b , c) {
		console.log("a=", a,",b=",b,",c=",c);
	}

// 形式参数 定义了三个 a, b ,c , 但是我们没有形参接受4 这个实际传入的参数,这个参数在这个运算中只能被抛弃
print(1, 2, 3,4)
</script>

实际需求中我们应该能准确的使用函数,使得形参和实参一一对应

但有时候,又有一些场景,我们想在被调用的函数中能够获取到所有传入的实际参数。比如:求传入的所有实参的和。

这种场景,需要 arguments, arguments 能够像数组那样遍历,获得所有实参

<script>
    function plus() {
        var resultPlus = 0;
        for(var i = 0 ; i < arguments.length ; i++) {
            resultPlus += arguments[i];
        }
        return resultPlus;
    }

    var result = plus(1,2,3,4,5)
    console.log(result);

</script>

输出

从函数定义的例子当中,我们并没有看到输出,即函数并没有返回任何结果

这是因为在一个函数中,可以没有输入、也可以没有输出、甚至也可以把函数计算也拿掉(空函数, 当然这种函数没有任何现实意义)

如果我们函数运算完成后需要返回值怎么办?

好办,用 return 关键字, 举个栗子,我们想计算 两个数的和,并返回计算结果, 代码如下

<script>
        function plus(a, b){
            return a + b;
        }
</script>

如果代码能执行到return语句就意味着函数运行结束了, 它会把代码的执行权先归还给调用者

匿名函数

以上的例子中,函数都有名字;我们改造下, 就会得到匿名函数,匿名函数就是没有名字的函数

function(a,b) {
	// 函数主体内容
}

如果我们把上面的函数运行在浏览器,肯定会报错, 因为任何函数定义出来都是要调用执行的,上面定义的函数报错就是因为浏览器不知道如何运行引起的

所以这么写是不完整的, 根据需要,我们可以用以下的思路定义匿名函数

将匿名函数赋值给变量

var fun = function(a, b) {
	// 
}

这样,我们的函数居然又拥有了一个“名字”

当然函数的调用的写法不变

fun(a,b);

用小括号包裹

<script>
        (function (a,b ){
            console.log('hello', a,b)
        })
</script>

这种方式只是定义,我们无法在其他地方调用它,同样也无法执行, 这貌似打破了我们上面说的:一个函数定义出来就是要调用执行的说法

所以为了把这句话圆回去,我们必须加点东西,我们再加一个小括号,把它变成立即执行函数;也就是说我们在函数定义的地方调用它,当浏览器解析到此代码的时候立即执行。

<script>
      (function (a,b ){
          console.log('hello', a,b)
      })();
</script>

立即执行函数,既保证了在定义的地方可以调用,也保证的 任何函数都需要调用执行的说法

回调函数

函数还可以作为一个参数值传给其它函数, 其它参数执行到具体代码会自动调用。

我们上一篇

数组

紫薯自书,公众号:优雅编程JS基础-复杂数据类型之数组

提到的排序的例子,就是把一个函数当作形参传入到了另外函数中

var sortArray = array.sort(function(a, b){
      return b-a;
});

把函数当成一个返回值

函数还可以当成返回值返回给调用方

<script>
      function plus(a, b){

					
          return function() {
              return a + b;
          } 
      }

      var plusResult = plus(1,2);

      var plusResultFunResult = plusResult();
      console.log(plusResult);
      console.log(plusResultFunResult);
</script>

上面这个例子, plus 函数返回了一个函数给调用方

plusResult 指向的是一个函数

plusResultFunResult 指向的才是最终的运算结果

如果我们只想得到结果,省略啰嗦的函数赋值给引用变量的过程,我们也可以像下面一样这么做

<script>
        function plus(a, b){
            return function() {
                return a + b;
            } 
        }
        var plusResultFunResult = plus(1,2)();
        console.log(plusResultFunResult);
    </script>

函数的执行顺序

一个函数执行的顺序,是从调用开始, 逐行开始执行,直到遇见return或者函数最后一行结束。最终函数执行结束后会把调用权交还给函数。

Untitled.png文章来源地址https://www.toymoban.com/news/detail-707979.html

到了这里,关于Js基础-函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月04日
    浏览(55)
  • js 实现导入导出功能(FileSave.js)

     点击导出按钮弹出文件框导出文件,点击导入选择文件获取文件数据,以下我保存的是json。 html:  js:   FileSaver.js 框架代码:

    2024年02月16日
    浏览(34)
  • js实现点击音频实现播放功能

    html: css: js:

    2024年02月02日
    浏览(37)
  • 〖大前端 - 基础入门三大核心之JS篇(53)〗- 构造函数与类

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月02日
    浏览(61)
  • JS功能实现

    轮播图 移动端轮播图 按下回车发表评论 tab栏切换 全选按钮

    2024年02月06日
    浏览(28)
  • js实现登录注册功能

    话不多说,上代码。 登录功能 注册功能

    2024年02月11日
    浏览(39)
  • JS复制粘贴功能实现

    本章记录如何通过js代码实现复制内容到剪切板,之后可以粘贴到需要的地方的功能。 分为两个部分内容: 前两个部分使用execCommand方法,该方法现在被弃用(ps:虽然也还可以用就行了), 且对于单行内容的复制需要结合input标签实现,多行内容的复制需要结合textarea标签实现。

    2024年02月12日
    浏览(44)
  • 原生JS实现图片裁剪功能

    功能介绍:图片通过原生input上传,使用canvas进行图片裁剪。 裁剪框限制不允许超出图片范围,图片限制了最大宽高(自行修改要的尺寸),点击确认获取新的base64图片数据 注:fixed布局不适用该方案,若是fixed布局请查看另一篇文章 效果图: 上代码

    2024年02月11日
    浏览(50)
  • 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 addEventListener()方法,用于向指定元素添加事件句柄,它可以更简单的控制事件。语 法为: 第一个参数是 事件的类型 (如 “click”

    2024年01月19日
    浏览(45)
  • node.js(express.js)+mysql实现注册功能

    /utils/db.js文件的代码如下: 项目安装指定版本bcryptjs库 再插入新用户时输入中文username mysql会 出现字符集不匹配的情况 报错情况如下: ER_CANT_AGGREGATE_2COLLATIONS: Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation ‘=’ 原因: mysql数据库建表的时候采

    2024年01月18日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包