时间戳

首页 > 解决方案 > 使用箭头运算符的数组并尝试按插入顺序推送项目？

reactjs - 使用箭头运算符的数组并尝试按插入顺序推送项目？

问题描述

basic = [['Answer', 'Votes']];
  (() => props.poll.answers.map(ans => basic.push([ans.answer, ans.votes])))();

我在我的反应文件之一中有一个如上所述的句子。有人可以让我知道插入基本数组的值是什么，以什么顺序插入到 map 函数中，() 的含义是什么，如最后在 map 函数中表示的那样。basic.push([ans.answer, ans.votes]) 这里的句子是这样的，进入大部分场景它想array.push({name:value},{name,value}) 但是这里进入方括号那是什么意思。

标签： reactjsecmascript-6

解决方案

好吧，让我们拆分这个问题 - 本质上是说“这段代码有什么作用？” - 部分并独立回答每个问题。

首先，关于语法。有问题的代码是所谓的立即调用函数表达式，即我们定义函数（在本例中为箭头函数），然后在同一行代码中调用它。也就是说，第二行可以简化为：

  props.poll.answers.map(ans => basic.push([ans.answer, ans.votes]));

即，我们删除最后一个括号（函数调用）和箭头之前的括号，以及箭头本身（这样就只剩下函数的主体）。

为了使原始代码更清晰一些，我们还可以将其重写如下：

const lambda = () => props.poll.answers.map(ans => basic.push([ans.answer, ans.votes]));
lambda();

在这里，我们将函数显式存储到变量中（这里的名称“lambda”是为了提醒我们这个函数实际上是lambda-expression），然后使用变量名称调用它。

现在，为你的问题。

“插入基本数组的值是什么？”

好吧，让我们看一下被调用的代码map：

ans => basic.push([ans.answer, ans.votes])

在这里，我们的变量ans来自我们要映射的数组。假设ans是一个对象，具有属性answer和votes。之后，这些属性被组合成一个二元素数组，或者，如果你使用 TypeScript，你可以称它为元组（向下滚动一点看），使用数组字面量语法。这个数组，作为整体，被推入basic。例如，如果我们有以下内容ans：

ans = {answer: "Answer text", votes: 5};

并basic在您的代码中创建，推送后我们有以下内容：

basic === [['Answer', 'Votes'], ['Answer text', 5]]

如您所见，将数组插入另一个数组中并没有什么害处，它们可以随意嵌套。

“……按什么顺序？”

当任何值被推入数组时，它们会完全按照它们被推入的顺序保留在这里。该map函数还遍历保留顺序的源数组。因此，basic数组中的元素将与answers. 考虑以下示例：

props = {
  poll: {
    answers: [
      {answer: 'Answer 1', votes: 1},
      {answer: 'Answer 2', votes: 20},
      {answer: 'Answer 1.5', votes: 2}
    ]
  }
};
basic = [['Answer', 'Votes']];
(() => props.poll.answers.map(ans => basic.push([ans.answer, ans.votes])))();
console.log(basic);

让我们一步一步地检查它：

  • map函数获取数组的第一个元素ans === {answer: 'Answer 1', votes: 1}.
  • 元组由 形成[ans.answer, ans.votes]，即['Answer 1', 1]。
  • 元组被插入到basic数组中basic === [['Answer', 'Votes'], ['Answer 1', 1]]。
  • 第二个和第三个元素的处理方式相同。

您可以通过运行代码片段来检查结果 -console.log()正是为此而引入的。

“最后在map函数中表示的（）是什么意思？”

事实上，这个问题已经在这里得到了回答，但我想强调以下几点：这些括号与没有map任何关系。让我们格式化这个表达式：

(
  () => props.poll.answers.map(
    ans => basic.push([ans.answer, ans.votes])
  )
)();

您可以看到它map在第一个括号内，因为它是其中定义的函数表达式的一部分。最后的括号只是调用这个表达式。

“它想进入大多数场景array.push({name:value},{name,value})，但这里进入方括号 - 这是什么意思？”

好吧，我宁愿不谈论“大多数情况”。有很多地方数组比对象更方便（尽管在这里我可能会坚持使用对象，如果我正在设计这段代码）。关于您的问题-如前所述，这里的方括号表示数组文字，就像它们在basic定义中一样。

推荐阅读