使用扩展运算符有条件地推送到数组答案

【问题标题】：Conditionally pushing to an array with spread operator使用扩展运算符有条件地推送到数组
【发布时间】：2018-07-24 18:58:43
【问题描述】：

我正在根据http://2ality.com/2017/04/conditional-literal-entries.html http://2ality.com/2017/04/conditional-literal-entries.html 中所述的条件将元素推送到数组中

const arr = [
  ...(cond ? ['a'] : []),
  'b',
];

现在，这很好，但是当我尝试时

const arr = [
  ...(cond && ['a']),
  'b',
];

相反，它停止工作。

我想知道为什么它不再工作了，以及是否有办法使用扩展运算符和 && 而不是？。

谢谢

【问题讨论】：

请加上cond的值。
在第二个示例中，如果 cond 的计算结果为 false，则表达式的计算结果为 false，您最终会得到 ...false 而不是 ...[]，因此会引发错误。
@NinaScholz cond 是一个条件，因此可能为真或假
@Miguel 在我用来测试特别是它的情况下它评估为真，并且它不会将“a”添加到数组中。不管怎样，你知道要解决这个问题吗？
@user3808307 你可以在控制台中尝试：[...(true && ['a'])] 给出['a'] 但[...(false && ['a'])] 产生TypeError。

标签： javascript arrays spread-syntax

【解决方案1】：

不，这是不可能的，因为所有可迭代对象都是真实的。

如果cond 是假的，则您的值不能被Symbol.iterator 传播

带有@@iterator 方法的内置类型有：

Array.prototype[@@iterator]()

TypedArray.prototype[@@iterator]()

String.prototype[@@iterator]()

Map.prototype[@@iterator]()

Set.prototype[@@iterator]()

var cond = false;

const arr = [
  ...(cond && ['a']),  // throws error, function expected
  'b',
];

console.log(arr);

【讨论】：

使用条件运算符?:，您提供了一个可扩展/可迭代的（空）数组。它在这里就像一个中性元素。

【解决方案2】：

是的，这是可能的。 _{但也许这是一个矫枉过正的_{性能更差并降低可读性。}}

const arr = [];
arr.push(...[false && 'nope'].filter(v => v));
arr.push(...[true && 'yep'].filter(v => v));
arr.push(...[false && 'no', true && 'yes'].filter(v => v));
    
console.info(arr);

作为@Nina Scholz indicated，传播运算符需要一个可迭代对象才能工作。通过使用第二个数组（可能为空），我们最终可以达到以下状态 (arr.push())。

【讨论】：