在 const a = b => b([ { var: "foo" }, { var: "baz" } ]); b 是函数、数组还是变量？

Question

我正在阅读 React 教程中的以下代码。

const a = b =>
  b([
    { var: "foo" },
    { var: "baz" }
  ]);

我知道里面有一个包含对象列表的数组，但是这里的 () 括号是什么意思？

Answer 1

上面的代码显示了一个将另一个函数作为参数的函数。箭头函数让它有点混乱。 () 正在调用函数 b

没有箭头功能它看起来像

function a(b){
   return b([
    { var: "foo" },
    { var: "baz" }
  ])
}

下面的代码片段显示了一个演示。

const a = b =>
  b([
    { var: "foo" },
    { var: "baz" }
  ]);


const addProp = (array) => array.map(x => ({...x, newProp: "New Value"}));

console.log(a(addProp))

Answer 2

JavaScript 中的函数是 first-class citizens。这意味着您可以像对待任何其他变量一样对待函数。这允许你做一些事情，比如将它们分配给其他变量等......:[=26=]

const foo = arg => arg;
const also_foo = foo;

console.log(also_foo("hello"));

考虑到这一点，您也可以将它们传递给函数，就像您可以使用常规变量一样。例如：

const foo = arg => arg; // foo simply just returns the argument it is given
const bar = foo_function => foo_function('bar'); // use `foo` in `bar` function

console.log(bar(foo)); // pass reference of `foo` to `bar`.

在这里，我们将 foo 函数的引用传递给 bar 函数。这允许函数 bar() 通过调用 foo_function('bar').

来使用 foo 函数

这种模式在 JS 中很常见，尤其是回调（这里是一个使用 setTimeout 的例子）：

const foo = () => console.log("a");
setTimeout(foo, 1000);

如果您可以想象自己实现 setTimeout，它会 松散地 看起来像这样：

const setTimeout = (func, time) => {
  // wait `time` miliseconds
  // execute func
  func();
}

许多其他函数使用回调，例如高阶数组函数。虽然您不需要自己实现这些逻辑，但您可以了解如何创建自己的函数来执行回调。

but what does the () parenthesis mean here

所以，回答你的问题。如果b是一个函数，那么()invoke/call就是函数b。对象列表是传递给函数 b 的内容。

在 const a = b => b([ { var: "foo" }, { var: "baz" } ]); b 是函数、数组还是变量？

In const a = b => b([ { var: "foo" }, { var: "baz" } ]); is b a function, array, or variable?

javascript

syntax

parentheses

reactjs