JavaScript全栈Pre-Course
  • Introduction
  • 课程介绍
  • Start
    • 教学方法
    • 软件和工具
  • 基本技能
    • 如何提问
    • Markdown 使用
    • 如何写 blog
    • Git 的简单应用
    • GitHub Pages
    • 在Chrome DevTools中进行调试
  • JavaScript基础
    • 如何引用JavaScript
    • 变量
    • 数据类型
    • 数学运算符
    • 逻辑运算符
    • 条件分支结构
    • 循环结构
    • 字符串
    • 对象
    • 数组
    • 函数
    • DOM 介绍
  • 整洁代码
  • 初识Linux
Powered by GitBook
On this page
  • 本节学习目标
  • 本节内容
  • 其他资料推荐
  • 本节练习
  1. JavaScript基础

函数

Previous数组NextDOM 介绍

Last updated 6 years ago

本节学习目标

  • 理解函数的概念和作用

  • 理解在函数中参数的作用

  • 掌握在JavaScript中定义和调用函数的方法

本节内容

函数对任何语言来说都算是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。那么到底什么是函数呢?

一段计算机程序代码,函数的出现主要是解决了程序代码共享问题,最初的计算机程序是顺序执行的,但是如果在多个程序中需要实现同一种计算,这时实现同样计算的代码就会出现多次,造成重复,而使用函数则不同,若把该计算规则封装在函数中,那么只需要在使用的地方调用该函数即可。就像下面中的例子那样:

在上图中,有一面漂亮的墙壁,当我们将这面墙壁的漂亮外衣拿掉,会发现在墙壁里面是由若干个砖头砌成的。若把一面修砌好的墙壁比作程序,那么这一个个的砖头就可以理解为函数。函数是一个执行特定功能的可重用的代码块。我们要想在程序中执行它,只需要给它传递参数并调用它,那么该函数就会返回给我们它的执行结果。

在JavaScript中,我们使用function关键字来定义函数,后面跟一组参数以及函数体。函数的基本语法如下:

function functionName(arg0, arg1, arg2 ... argn){
    statements;
}

下面是一个简单的函数示例:

function sayHi(name, message){
    alert('Hello ' + name + ', ' + message) + '!';
}

这个函数可以通过其函数名来调用,后面还有加上一对圆括号和参数(圆括号中的参数如果有多个,可以用逗号隔开)。调用sayHi()函数的代码如下所示:

sayHi('Mike', 'good morning'); // 'Hello Mike, good morning!'

这样函数的输出结果就是'Hello Mike, good morning!'。函数中定义的命名参数name和message被用作了字符串拼接的两个操作数,最终的结果通过警告框显示了出来。

以上例子是一个没有指定返回值的例子。在JavaScript中定义函数的时候,不必指定是否有返回值,但实际上,任何函数在任何时候都可以通过return语句否跟要返回的值来实现返回值。具有返回值的示例如下:

function add(num1, num2){
    return num1 + num2;
}

这个add函数的作用是把两个参数求和并将该值返回。除了return语句外,没有任何声明表示该函数会返回一个值。这个函数的调用示例如下:

var result = add(3, 5);
alert(result); // 8

最终的结果将会弹出8。这里可以注意到,我们需要用一个变量(result)来接收add(3,5)返回的值,这是因为我们在add()函数内部将结果返回(return)了出来,如果不用变量接收,将无法对该结果进行操作。

其他资料推荐

本节练习

  • 阅读上面推荐的资料,复习回顾关于JavaScript中函数的知识

  • 编写一个函数,实现以下功能:将一个字符串逆序输出。

    function reverseString(message){
      // wirte your code here
    }
    reverse('hello'); // should return 'olleh'
  • 编写一个函数,实现以下功能:判断一个字符串是否是回文串。(回文,一个字符串从前面读和从后面读都一样,例如:abcba就是回文串。)

    function palindrome(message){
      // wirte your code here
    }
    palindrome('hello'); // should return false
    palindrome('abcba'); // should return true
  • 编写一个函数,实现以下功能:按字母表顺序输出传入的参数字符串。

    function alphabetSort(message){
      // wirte your code here
    }
    alphabetSort('hello'); // should return 'ehllo'
  • 编写一个函数,实现以下功能:计算出一个字符串共有多少个单词组成。

    function countWords(message){
      // wirte your code here
    }
    countWords('Good morning, I love JavaScript.'); // should return 5

JavaScript函数 - MDN
JavaScript函数总结
js的函数总结