在const a = b => b([{var:“ foo”},{var:“ baz”}]);中; b是函数,数组还是变量?

时间:2019-12-22 06:17:40

标签: javascript reactjs syntax parentheses

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

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

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

2 个答案:

答案 0 :(得分:3)

以上代码显示了一个将另一个函数作为参数的函数。箭头功能使其几乎没有混淆。 ()正在调用函数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))

答案 1 :(得分:2)

JavaScript中的函数为first-class citizens。这意味着您可以像对待任何其他变量一样对待函数。这使您可以执行诸如将它们分配给其他变量等操作……

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来使用foo_function('bar')函数。

这种模式在JS中非常常见,尤其是在回调中(这是使用setTimeout的示例):

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

如果您可以自己实现setTimeout的图像,它会松散看起来像这样:

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

许多其他函数使用回调,例如高阶数组函数。虽然您不需要自己实现这些逻辑,但是您可以看到如何制作自己的函数来执行回调。

  

但是()括号在这里是什么意思

因此,回答您的问题。如果b是一个函数,则()调用/调用函数b。对象列表就是传递给函数b的对象。