» JavaScript快速入门 » 1. 基础篇 » 1.7 函数

函数

广义上讲,函数是程序中供外部调用的“子程序”。与程序本身一样,函数主体也由语句序列组成。值可以作为参数传递给函数,函数将返回一个值。

在 JavaScript 中,Function 对象提供了函数相关的方法。实际上,每个函数都是一个 Function 对象。

// 普通函数声明
function addNumbers(a, b) {
  return a + b;
}

// 普通函数表达式
const multiplyNumbers = function(a, b) {
  return a * b;
};

// 使用普通函数
console.log(addNumbers(5, 3));        // 输出:8
console.log(multiplyNumbers(2, 4));   // 输出:8

ES6 开始,你还可以使用箭头函数。

// 具有显式返回的箭头函数表达式
const divideNumbers = (a, b) => {
  if (b !== 0) {
    return a / b;
  } else {
    return 'Cannot divide by zero';
  }
};

// 箭头函数表达式
const subtractNumbers = (a, b) => a - b;

// 使用箭头函数
console.log(subtractNumbers(8, 3));   // 输出:5
console.log(divideNumbers(10, 2));    // 输出:5
console.log(divideNumbers(7, 0));     // 输出:'Cannot divide by zero'

函数参数

参数是传递给函数的命名变量。

JavaScript 函数不在乎你传递了多少个参数。多余的参数将被忽略,缺失的参数将被自动分配为 undefined

function f(a, b) {
    console.log(a, b);
}

f("hello", 123, "there");
// hello 123

f("hello");
// hello undefined

还可以使用默认参数。

function f(a, b = "world") {
    console.log(a, b);
}

f("hello");
// hello world

IIFE

IIFE(立即调用的函数表达式)是在定义时立即运行的 JavaScript 函数。 IIFE 的名称来自 Ben Alman 个人博客文章。

(function() {
    var x = 10;
    console.log(x); // 输出:10
})();

该函数在括号内定义,并在末尾使用 () 立即调用。函数内声明的变量作用域仅在其函数体,不会干扰外部的变量。

闭包

闭包是一个函数和其周围状态的组合。换句话说,闭包可以让内部函数访问外部函数的作用域。

function makeFunc() {
  const name = "literank";
  // 此函数可以访问 `name`,因为它`闭包`了外部变量
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc(); // literank

高阶函数

在 JavaScript 中,高阶函数是可以将其他函数作为参数接受或将函数作为结果返回的函数。这个概念是函数式编程的核心。

函数作为参数

// 接受函数作为参数的高阶函数
function doOperation(operation, a, b) {
    return operation(a, b);
}

// 作为参数传递的函数
function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

// 使用高阶函数
console.log(doOperation(add, 5, 3));      // 输出:8
console.log(doOperation(subtract, 5, 3)); // 输出:2

函数作为返回值

// 返回函数的高阶函数
function multiplier(factor) {
    return function (number) {
        return number * factor;
    };
}

// 创建特定的 multiplier 函数
var double = multiplier(2);
var triple = multiplier(3);

// 使用返回的函数
console.log(double(4)); // 输出:8
console.log(triple(5)); // 输出:15

数组的高阶函数

// 高阶函数 - Array.map()
var numbers = [1, 2, 3, 4, 5];
var squaredNumbers = numbers.map(function (num) {
    return num * num;
});
console.log(squaredNumbers); // 输出:[1, 4, 9, 16, 25]

// 高阶函数 - Array.filter()
var evenNumbers = numbers.filter(function (num) {
    return num % 2 === 0;
});
console.log(evenNumbers); // 输出:[2, 4]

代码挑战

编写一个名为 filterArray 的函数,该函数以数值数组为输入,并返回一个只包含偶数的新数组。使用 filter 等高阶函数来实现。

Loading...
> 此处输出代码运行结果
上页
下页