条件展开元素答案

【问题标题】：Conditional spread element条件展开元素
【发布时间】：2018-06-01 15:23:26
【问题描述】：

const cond = false

const extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
]

const userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond && extraInfo)
]

当cond 为真时，我需要额外信息和用户信息。

cond 为 false 时，只需要 userInfo。

问题是当cond 为假时，我明白了

TypeError: (intermediate value)(intermediate value)(intermediate value)[Symbol.iterator] 不是函数

我的理解是不允许使用布尔值作为展开元素，在本例中为 ...false。

但是...( cond ? extraInfo : {} ) 似乎也不起作用。

发生了什么事？

【问题讨论】：

标签： javascript ecmascript-6 ternary-operator

【解决方案1】：

做吧

...(cond ? extraInfo : [])

真实演示

var cond = true;

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];

var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond ? extraInfo : [])
];

console.log( userInfo );

虚假演示

var cond = false;

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];

var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond ? extraInfo : [])
];

console.log( userInfo );

【讨论】：

可以将条件运算符改为...(cond && extraInfo || [])
很好，但为什么呢！？如果它接受填充的对象，为什么不清空呢？
现在说得通了！因此，如果没有 [Symbol.iterator] 协议，对象是不可迭代的，这就是为什么 ...{} 不起作用？
@AswinRamesh 这也有效，谢谢，我也会添加。
@AswinRamesh 不，不要那样做。它更长，更令人困惑，并且仅在 extraInfo 为真时才有效。

【解决方案2】：

有条件地将实体传播到对象

console.log(
  { 
    name: 'Alex',
    age: 19,
    ...(true && { city: 'Kyiv' }),
    ...(false && { country: 'Ukraine' })
  }
) 

// { name: 'Alex', age: 19, city: 'Kyiv' }

有条件地将实体传播到数组


console.log(
  [
    'Dan',
    'Alex',
    ...(true ? ['Robin'] : [])
  ]
)

// [ 'Dan', 'Alex', 'Robin' ]

【讨论】：

那么，传播到对象与数组之间的实际区别是什么？尝试传播到数组时，得到Uncaught TypeError: boolean false is not iterable (cannot read property Symbol(Symbol.iterator))。
我不知道这可以做到。在某些用例中非常简洁。不错！

【解决方案3】：

另一种方式：

条件为真：

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
]

var cond = true;
var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond && extraInfo || [])
]
console.log(userInfo);

条件为假：

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
]

var cond = false;
var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond && extraInfo || [])
]
console.log(userInfo);

【讨论】：

为什么不使用合适的三元运算符？
品味问题。
正确性、简单性和性能问题。当然你可以对它们有一种可怕的味道:-)
您确定三元运算符的性能更高吗？如果你看不懂，那不代表它很糟糕
是的，因为它不必评估cond && extraInfo 表达式返回的值的真实性。这是一次手术，不是两次。（另外：写下你的意思）

【解决方案4】：

const extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];
const userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
];

const cond = true;
let getMyValue = cond ? [].concat(extraInfo, userInfo) : userInfo;

console.log(getMyValue)

【讨论】：

【解决方案5】：

let getMyValue = cond ? [].concat(extraInfo, userInfo) : userInfo;

让我们检查一下

const extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];
const userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
];

const cond = false;
let getMyValue = cond ? [].concat(extraInfo, userInfo) : userInfo;

console.log(getMyValue)

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。
嗨，我把我的ans放在本节的底部，没问题让我们检查一下