JavaScript 函数是一等公民

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

将函数存储在变量中

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

以下定义了 add() 函数，并将函数名赋值给变量 sum

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

let sum = add;Code language: JavaScript (javascript)

在赋值语句中，我们没有在 add 标识符的末尾包含开括号和闭括号。我们也没有执行函数，而是引用了函数。

通过这样做，我们可以有两种方法来执行同一个函数。例如，我们可以像下面这样正常调用它

let result = add(10, 20);Code language: JavaScript (javascript)

或者，我们可以通过 sum 变量调用 add() 函数，如下所示

let result = sum(10,20);Code language: JavaScript (javascript)

将函数传递给另一个函数

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

以下声明了 average() 函数，该函数接受三个参数。第三个参数是一个函数

function average(a, b, fn) {
    return fn(a, b) / 2;
}Code language: JavaScript (javascript)

现在，您可以将 sum 函数传递给 average() 函数，如下所示

let result = average(10, 20, sum);Code language: JavaScript (javascript)

将所有内容整合在一起

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);Code language: JavaScript (javascript)

输出

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;
    }
  };
}Code language: JavaScript (javascript)

请注意，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}
];Code language: JavaScript (javascript)

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

例如，您可以通过传递从 compareBy() 函数返回的函数作为参数，按名称对产品对象进行排序，如下所示

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

console.table(products);Code language: JavaScript (javascript)

输出

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

类似地，您可以按价格对产品对象进行排序

// sort products by prices

console.log('Products sorted by price:');
products.sort(compareBy('price'));
console.table(products);Code language: JavaScript (javascript)

输出

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

将所有内容整合在一起。

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 },
];

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

console.table(products);

// sort products by price
console.log('Products sorted by price:');
products.sort(compareBy('price'));
console.table(products);
Code language: JavaScript (javascript)

更多 JavaScript 函数是一等公民的示例

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

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

function inToCm(length) {
    return length * 2.54;
}Code language: JavaScript (javascript)

以下 convert() 函数有两个参数。第一个参数是一个函数，第二个参数是将根据第一个参数进行转换的长度

function convert(fn, length) {
    return fn(length);
}Code language: JavaScript (javascript)

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

let inches = convert(cmToIn, 10);
console.log(inches);Code language: JavaScript (javascript)

输出

3.937007874015748Code language: CSS (css)

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

let cm = convert(inToCm, 10);
console.log(cm);Code language: JavaScript (javascript)

输出

25.4Code language: CSS (css)

将所有内容整合在一起。

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);Code language: JavaScript (javascript)

输出

3.937007874015748
25.4Code language: CSS (css)

总结

• 函数在 JavaScript 中是一等公民。
• 您可以将函数作为参数传递给其他函数，将它们作为值从其他函数中返回，并将它们存储在变量中。