当前位置: 首页 > news >正文

Javascript 函数介绍

Javascript 函数介绍

 

很多教程书一上来就讲解一堆语法,例如函数定义、函数调用什么。等读者看完了函数这一章都没搞懂什么是函数。

在讲解什么叫函数之前,我们先看下面一段代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">var sum=0;for(var i=1;i<50;i+=2){sum+=i;}document.write("50以内所有奇数和为:"+sum);</script>
</head>
<body>
</body>
</html>

大家一看就知道了,上面代码实现的是50以内所有奇数的和。如果要分别计算50以内所有奇数和以及100以内所有奇数和,那读者该怎么实现。很多人很快就写了以下代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">var sum1=0;for(var i=1;i<50;i+=2){sum1+=i;}document.write("50以内所有奇数和为:"+sum1);document.write("<br/>");var sum2=0;for(var j=1;j<100;j+=2){sum2+=j;}document.write("100以内所有奇数和为:"+sum2);</script>
</head>
<body>
</body>
</html>

那我现在问一个问题,如果我要你实现50以内所有奇数和、100以内所有奇数和、150以内奇数和、200以内所有奇数和、250以内所有奇数和。那你岂不是要每次都重复编写次类似的代码?要是没有一种简单的实现方法,俺们这些程序猿还用活的?

为了解决减轻这种重复编码的负担,函数这种东西就应运而生。例如实现上面5个范围以内的实现方式如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">//定义函数function sum(n){var m=0;for(var i=1;i<n;i+=2){m+=i;}document.write(n+"以内所有奇数和为:"+m+"<br/>");}//调用函数,计算50以内所有奇数的和sum(50);//调用函数,计算100以内所有奇数的和sum(100);//调用函数,计算150以内所有奇数的和sum(150);//调用函数,计算200以内所有奇数的和sum(200);//调用函数,计算250以内所有奇数的和sum(250);</script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下:

 

387fd21b8575f5c92125bef196eee004.png

大家可以看到使用函数可以减少大量重复工作,而函数只需要采用简单2步就可以实现了:

  • (1)定义函数;
  • (2)调用函数;

现在大家都知道函数是怎么一回事了,我们来总结一下:函数,就是一个一系列JavaScript语句的集合,这是为了完成某一个会重复使用的特定功能。在需要该功能的时候,直接调用函数即可,而不必每次都编写一大堆重复的代码。并且在需要修改该功能的时候,也只要修改和维护这一个函数即可。

总之,将语句集合成函数,好处就是方便代码重用。并且,一个好的函数名,可以让人一眼就知道这个函数实现的是什么功能,方便维护。

在接下来的课程中,我们来给大家详细讲解编程的一大利器——函数。

 

http://www.lryc.cn/news/255233.html

相关文章:

  • php 粉丝关注功能实现
  • 深入浅出理解kafka ---- 万字总结
  • 一对一聊天
  • IDEA版SSM入门到实战(Maven+MyBatis+Spring+SpringMVC) -Mybatis查询中返回值四种情况
  • 华为云安全组规则
  • MySQL之binlog文件过多处理方法
  • 力扣面试150题 | 88.合并两个有序数组
  • Spring Cache快速入门教程及案例
  • pycharm中debug,py文件
  • 虚拟化之指令的Trap和仿真
  • Python函数默认参数设置
  • js moment计算当前时间到24:00:00的剩余时间
  • 【UE5】瞬移+马赛克过渡效果
  • 【Skynet 入门实战练习】分布式 ID | 雪花算法 | 缓存设计 | LRU算法 | 数据库
  • ArcGIS Pro中怎么设置标注换行
  • MAX26——快速人物毛发插片工具 Hair cards tool
  • 一天一个设计模式---原型模式
  • <习题集><LeetCode><链表><2/19/21/23/24>
  • C++实现DFS、BFS、Kruskal算法和Prim算法、拓扑排序、Dijkstra算法
  • Spring 依赖注入的三种方式优缺点
  • 代理模式介绍(静态代理、jdk动态代理、cglib代理)
  • 设计模式基础——工厂模式剖析(2/2)
  • spark3.x 读取hudi报错
  • 微信小程序中block和View组件的使用区别
  • 代码混淆技术探究与工具选择
  • selenium 解决 id定位、class定位中,属性值带空格的解决办法
  • gma 空间绘图实战(1):绘制多个子图,连接并展示局部放大区域
  • Unity中C#使用协程控制Shader材质变化
  • WordPress禁止显示指定类别的文章
  • C#里面的泛型(T),泛型类,泛型方法,泛型接口等简单解释