使用 ES6 语法在 .map() 中添加条件检查时出错答案

【问题标题】：Getting error while adding a conditional check in .map() using ES6 syntax使用 ES6 语法在 .map() 中添加条件检查时出错
【发布时间】：2016-06-06 13:19:26
【问题描述】：

我只需要将包含 iban 值的对象分配给以下代码中的列表。我无法解决此问题。请帮忙。

  this.ibanList = this.data.map(
        (value, index)=> (if(value && value.iban){'id': index, 'text': value.iban}));

数据中存在的值如下所示。

 "data": [
        {

            "id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"
        },
        {
            "iban": "DE45765459080",
            "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"
        },
        {

            "iban": "DE3700333333",
            "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"
        }
    ]

【问题讨论】：

这有点令人困惑，您是否要过滤任何没有iban 键的对象？
是的。我只需要使用 es6 语法在回调中验证它
你不能用map过滤，你必须返回一些东西？
我需要将所有包含 id 和 iban 的对象返回到 this.ibanList 中。
@user1645290: “我需要将所有包含 id 和 iban 的对象返回到 this.ibanList。” 这不是您的代码所做的。没有 id 且确实具有iban 的条目将包含在列表中，并且您将id 替换为索引。你真的是故意的吗？那些id 值看起来......很重要。

标签： javascript angularjs callback ecmascript-6

【解决方案1】：

两个问题：

箭头函数的简写形式在=> 的右侧只能有一个表达式。你有一个if 声明。（在括号中，这在任何地方都无效，即使在箭头函数之外。）
map 始终使用返回值。您没有为“else”情况提供任何返回值。

在这种特定情况下，您可以改用条件运算符；我将使用null 作为“else”案例的返回值：

this.ibanList = this.data.map(
    (value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null));

var data = [
  {"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE45765459080", "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE3700333333", "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}
];
var ibanList = data.map(
    (value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null));
console.log(ibanList);

但请注意，结果中将包含 nulls。如果您只想要value && value.iban 为真的那些，请在映射前使用filter：

this.ibanList = this.data
    .filter(value => value && value.iban)
    .map((value, index) => ({'id': index, 'text': value.iban}));

var data = [
  {"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE45765459080", "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE3700333333", "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}
];
var ibanList = data
    .filter(value => value && value.iban)
    .map((value, index) => ({'id': index, 'text': value.iban}));
console.log(ibanList);

在这种情况下，我使用了filter 之前映射，这意味着您用作id 的index 值很可能与原始值不同。如果您想要原始值，预过滤，您可以通过结合上述两种方法进行过滤：

this.ibanList = this.data
    .map((value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null))
    .filter(value => value); // Removes the nulls

var data = [
  {"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE45765459080", "id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},
  {"iban": "DE3700333333", "id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}
];
var ibanList = data
    .map((value, index)=> (value && value.iban ? {'id': index, 'text': value.iban} : null))
    .filter(value => value); // Removes the nulls
console.log(ibanList);

您真的是不是打算用索引替换 id 值（"2c4cc5e8-d24d-11e4-8833-150bbf360367" 等）？如果不是，请将上面的id: index 替换为id: value.id。

【讨论】：

【解决方案2】：

试试：

    
var data = [{id:1, text: "1", iban: 'foo'}, {id:2, text: "2", iban: 'bar'}, {id:10, text: 20}];
var ibanList = data.filter((value) => value && value.iban).map(
        (value, index) => ({'id': index, 'text': value.iban}));
console.log(ibanList);

【讨论】：

【解决方案3】：

对于map，您需要始终返回一个值，因此要获得所需的结果，您需要先filter 您的列表。

this.ibanList = this.data.filter(value => value && value.iban)
     .map((value, index) => ({id: index, text: value.iban}));

【讨论】：

我认为您需要将 {} 括在括号内，因为它将被解释为带有标签而不是对象的块。
你说得对，写这篇文章的时候我不知道我的头在哪里！谢谢
真的很容易混淆filter和reduce :-)

【解决方案4】：

不需要地图过滤器组合。这可以通过 O(n) 时间的单一减少来完成。

var data = [{"id": "2c4cc5e8-d24d-11e4-8833-150bbf360367"},{"iban": "DE45765459080","id": "2c4cc8ae-d24d-11e4-8833-150bbf360367"},{"iban": "DE3700333333","id": "8a23995d-10d7-11e5-b819-2c44fd83fb24"}],
ibanList = data.reduce((p,c,i) =>  (c.iban && p.push({"id": i, "text": c.iban}),p),[]);
console.log(ibanList)

【讨论】：

我只是对逗号操作符吐了几口，更不用说有副作用的&&了。 :-) 说真的，我们只是不需要那么容易误读/误解/难以调试的代码。不过，如果没有这些，使用 reduce 是一个合理的选择。
@T.J. Crowder 这是习惯这种风格的问题。嗯......对我来说，它非常好并且易于调试。我几乎从不使用if 和上帝禁止else...此外...这是整个答案中最有效的一段代码。那怎么样..？
不，这不是习惯的问题。我非常习惯逗号运算符和&& 的副作用。我只是不使用它们，因为看到它们导致的错误浪费了太多时间。如果您喜欢它，请使用它。是的，所有其他答案都通过了两次。 99.99999% 的情况下，它在现实世界中的差异完全是零。您必须处理数以百万计的条目才重要。当然，现在完全可以通过reduce 使用清晰的代码进行单次传递。（警告：使用主观术语。;-)）

【解决方案5】：

使用过滤器代替地图。

this.ibanList = this.data.filter((value, index) => {return value && value.iban});

【讨论】：