很多教程都喜欢搞这一套,一上来就介绍说“函数定义、函数参数、函数调用……”,然后就滔滔不绝地开始说函数的语法。小伙伴们几乎把函数这一章看完了,都不知道函数究竟是怎样一个东西!

为了再次避免这种悲剧的发生,在讲解函数语法之前,我们先给大家介绍一下函数是怎样的一个东西。先来看一段代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var sum = 0; for (var i = 1; i <= 50; i ++) { sum += i; } document.write("50以内所有整数之和为:" + sum); </script> </head> <body> </body> </html>

大家一看就知道上面这段代码实现的功能是:计算50以内所有整数之和。如果要分别计算“50以内所有整数之和”以及“100以内所有整数之和”,那应该怎么实现呢?不少小伙伴很快就写下了以下代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var sum1 = 0; for (var i = 1; i <= 50; i++) { sum1 += i; } document.write("50以内所有整数之和为:" + sum1); document.write("<br/>"); var sum2 = 0; for (var i = 1; i <= 100; i++) { sum2 += i; } document.write("100以内所有整数之和为:" + sum2); </script> </head> <body> </body> </html>

那我现在提一个问题:如果要你分别实现“50以内、100以内、150以内、200以内、250以内”所有整数之和。那岂不是要重复写5次相同的代码?

为了减轻这种重复编码的负担,JavaScript引入了函数的概念。如果我们想要实现上面5个范围内所有整数之和,用函数可以这样实现:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //定义函数 function sum(n) { var m = 0; for (var i = 1; i <= n; i++) { 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>

浏览器预览效果如图所示。

分析:

对于这段代码,大家暂时看不懂没关系,学完这一章就明白了。从上面我们也可以看出,使用函数可以大量减少重复工作,这简直是编程的一大神器呐!

函数一般是用来实现某一种重复使用的功能,在需要该功能的时候,直接调用函数就可以了,而不需要重复地编写一大堆重复的代码。并且在需要修改该函数功能的时候,也只需要修改和维护这一个函数就行,而不会影响其他代码。

函数一般是在两种种情况下使用:一种是“重复使用的功能”,另外一种是“特定的功能”。

在JavaScript中,如果我们想要使用函数,一般只需要简单的2步。

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