函数

收录于

一个小时学会JavaScript

2023-06-06 21:50 · 阅读时长4分钟

函数是一段包含特定功能的代码，将代码封装成函数有利于重用和简化代码，在 JavaScript 中使用 function 来定义一个函数。

function 函数名([参数1[=默认值],参数2, ...]) {
    代码...
    [return 返回值]
}

函数可以有参数和返回值，也可以没有参数和返回值，下面我们分别看看不同类型的函数的用法。

无参数无返回值

function sayHello() {
    console.log("Hello JavaScript")
}
sayHello()

有参数无返回值

如果不传入参数，则参数的值为undefined。

function sayHello(name) {
    console.log(`Hello ${name}`)
}
sayHello("zhixingxiaoke")
sayHello()

我们也可以给参数一个默认值，这样在调用时可以传参数也可以不传参数，如果传入参数，则使用传入的参数，如果不传参数，则使用默认的参数。

function sayHello(name = "JavaScript") {
    console.log(`Hello ${name}`)
}
sayHello()
sayHello("zhixingxiaoke")

有参数有返回值

function sum(num1, num2) {
    return num1 + num2
}
let result = sum(1, 2)
console.log(result)

函数表达式

除了使用函数申明这种方式，我们还可以使用函数表达式的方式来定义一个函数，它的基本格式如下

let func = function ([参数1[=默认值],参数2, ...]) {
    代码...
    [return 返回值]
}

这种方式是把函数赋值给一个变量，这样我们就可以通过这个变量来调用函数。

let sum = function (num1, num2) {
    return num1 + num2
}
let result = sum(1, 2)
console.log(result)

使用正常的函数声明和函数表达式大部分情况下都是可以互换的，但是它们之间还是存在一些差异，其中最主要的差异在于函数的创建时机。

函数声明在被定义之前就可以被调用。
函数表达式只有定义代码执行之后才能被调用，在此之前调用会报错。

下面用一个示例来演示这点区别

1let result1 = sum1(1, 2)
2console.log(`result1 = ${result1}`)
3function sum1(num1, num2) {
4    return num1 + num2
5}
6
7let result2 = sum2(1, 2)
8console.log(`result2 = ${result2}`)
9let sum2 = function (num1, num2) {
10    return num1 + num2
11}

箭头函数表达式

除了以上两种方式以外，还有一种更简洁的方式可以创建函数，因为使用箭头来表示，所以称为箭头函数表达式。

let func = ([参数1[=默认值],参数2, ...]) => {
    代码...
    [return 返回值]
}

当函数体代码只有一行时还可以省略花括号，下面看看它的基本用法。

let sum = (num1, num2) => num1 + num2 
let result = sum(1, 2)
console.log(result)

可以看出来比之前两种方式都简洁多了，当函数体代码超过一行时，就需要使用花括号包裹起来。

let sayHello = () => {
    console.log("Hello")
    console.log("JavaScript")
}
sayHello()

JavaScript函数function

函数