在本教程中，您将了解 JavaScript 一等公民，也就是函数。这意味着您可以将函数存储在变量中，将它们作为参数传递给其他函数，并将它们作为值从其他函数返回。

在变量存储函数

函数是 JavaScript 的一等公民。换句话说，您可以像对待其他类型的值一样对待函数。

下面定义 add() 函数并将函数名称分配给变量 sum：

function add(a, b) {
    return a + b;
}

let sum = add;

在赋值语句中，我们不在函数名末尾包含左括号和右括号。因为我们不执行 add 函数，而是引用 add 函数。

通过这样做，我们可以有两种方法来执行相同的函数。比如我们可以正常调用 add 函数，如下：

let result = add(10, 20);

或者，我们也可以像这样通过 sum 变量调用 add() 函数： 

let result = sum(10,20);

将函数传递给另一个函数

因为函数是值，所以您可以将一个函数作为参数传递给另一个函数。

下面声明 average() 接受三个参数的函数。第三个参数是一个函数：

function average(a, b, fn) {
    return fn(a, b) / 2;
}

现在，您可以按如下方式将 sum 函数传递给 average() 函数：

let result = average(10, 20, sum);

把它们放在一起：

function add(a, b) {
    return a + b;
}

let sum = add;

function average(a, b, fn) {
    return fn(a, b) / 2;
}

let result = average(10, 20, sum);

console.log(result);

输出：

15

函数返回函数

由于函数是值，您可以从另一个函数返回一个函数。

以下 compareBy() 函数返回一个函数，返回的函数用于两个对象的属性比较：

function compareBy(propertyName) {
  return function (a, b) {
    let x = a[propertyName],
      y = b[propertyName];

    if (x > y) {
      return 1;
    } else if (x < y) {
      return -1;
    } else {
      return 0;
    }
  };
}

请注意，a[propertyName] 返回 a 对象 propertyName 的值。它等同于 a.propertyName。

但是，如果 propertyName 包含像 'Discount Price' 这样的空格，则需要使用方括号表示法来访问它。

假设您有一个产品对象数组，其中每个产品对象都有两个属性： name 和 price。

let products = [
    {name: 'iPhone', price: 900},
    {name: 'Samsung Galaxy', price: 850},
    {name: 'Sony Xperia', price: 700}
];

您可以通过调用 sort() 方法对数组进行排序 。 sort() 方法接受一个函数作为参数，用于比较数组的两个元素。

例如，你可以排序产品基于对象属性的名称 name，通过 compareBy() 传递 sort 函数，如下所示 。

console.log('Products sorted by name:');
products.sort(compareBy('name'));

console.table(products);

输出：

Products sorted by name:
┌─────────┬──────────────────┬───────┐
│ (index) │       name       │ price │
├─────────┼──────────────────┼───────┤
│    0    │ 'Samsung Galaxy' │  850  │
│    1    │  'Sony Xperia'   │  700  │
│    2    │     'iPhone'     │  900  │
└─────────┴──────────────────┴───────┘

同样，您可以按价格对产品对象进行排序：

// 通过产品价格排序产品

console.log('通过产品价格排序产品');
products.sort(compareBy('price'));
console.table(products);

输出：

通过产品价格排序产品:
┌─────────┬──────────────────┬───────┐
│ (index) │       name       │ price │
├─────────┼──────────────────┼───────┤
│    0    │  'Sony Xperia'   │  700  │
│    1    │ 'Samsung Galaxy' │  850  │
│    2    │     'iPhone'     │  900  │
└─────────┴──────────────────┴───────┘

把它们放在一起。

function compareBy(propertyName) {
  return function (a, b) {
    let x = a[propertyName],
      y = b[propertyName];

    if (x > y) {
      return 1;
    } else if (x < y) {
      return -1;
    } else {
      return 0;
    }
  };
}
let products = [
  { name: 'iPhone', price: 900 },
  { name: 'Samsung Galaxy', price: 850 },
  { name: 'Sony Xperia', price: 700 },
];

// 通过产品名称排序产品
console.log('Products sorted by name:');
products.sort(compareBy('name'));

console.table(products);

// 通过产品价格排序产品
console.log('Products sorted by price:');
products.sort(compareBy('price'));
console.table(products);

JavaScript 函数是一等公民示例

以下示例定义了两个函数，将以厘米为单位的长度转换为英寸，反之亦然：

function cmToIn(length) {
    return length / 2.54;
}

function inToCm(length) {
    return length * 2.54;
}

下面的 convert() 函数有两个参数。第一个参数是一个函数，第二个参数是长度。

function convert(fn, length) {
    return fn(length);
}

要将 cm 转换为 in，可以调用 convert() 函数并将 cmToIn 函数作为第一个参数传递给 convert() 函数：

let inches = convert(cmToIn, 10);
console.log(inches);

输出：

3.937007874015748

同样，要将长度从英寸转换为厘米，您可以将 inToCm 函数传递给 convert() 函数，如下所示：

let cm = convert(inToCm, 10);
console.log(cm);

输出：

25.4

把它们放在一起。

function cmToIn(length) {
  return length / 2.54;
}

function inToCm(length) {
  return length * 2.54;
}

function convert(fn, length) {
  return fn(length);
}

let inches = convert(cmToIn, 10);
console.log(inches);

let cm = convert(inToCm, 10);
console.log(cm);

输出：

3.937007874015748
25.4

结论

  • 函数是 JavaScript 的一等公民，你也可以称这种编程方式为高阶函数。
  • 您可以将函数作为参数传递给其他函数，将它们作为值从其他函数返回，并将函数存储在变量。