在 JavaScript 中有条件地在 Array 中添加元素

Question

When I try to merge two objects using the spread operator conditionally, it works when the condition is true or false :

let condition = false;
let obj1 = { key1: 'value1'}
let obj2 = {
  key2: 'value2',
  ...(condition && obj1),
};

// obj2 = {key2: 'value2'};

When I try to use the same logic with Arrays, it only works when the condition is true :

let condition = true;
let arr1 = ['value1'];
let arr2 = ['value2', ...(condition && arr1)];

// arr2 = ['value2', 'value1']

If the condition is false an error is thrown:

 let condition = false; let arr1 = ['value1']; let arr2 = ['value2', ...(condition && arr1)]; // Error

Why is the behaviour different between Array and Object ?

Answer 1

When you spread into an array , you call the Symbol.iterator method on the object. && evaluates to the first falsey value (or the last truthy value, if all are truthy), so

let arr2 = ['value2', ...(condition && arr)];

results in

let arr2 = ['value2', ...(false)];

But false does not have a Symbol.iterator method.

You could use the conditional operator instead, and spread an empty array if the condition is false:

 let condition = false; let arr1 = ['value1']; let arr2 = ['value2', ...(condition ? arr1 : [])]; console.log(arr2);

(This works because the empty array does have the Symbol.iterator method)

Object spread is completely different: it copies own enumerable properties from a provided object onto a new object. false does not have any own enumerable properties, so nothing gets copied.

Answer 2

false is not spreadable.

You need a spreadable object (the one where Symbol.iterator is implemented) which returns nothing, if spreaded.

You could use an empty array as default value. This works even if arr is falsy .

 let condition = false; let arr1 = ['value1']; let arr2 = ['value2', ...(condition && arr || [])]; console.log(arr2);

Answer 3

This is a specification difference between the spread syntax for object literals and for array literals.

MDN briefly mentions it here -- I highlight:

Spread syntax ( other than in the case of spread properties ) can be applied only to iterable objects

The difference comes from the EcmaScript 2018 specification:

• Concerning object spread syntax, see 12.2.6.8 Runtime Semantics: PropertyDefinitionEvaluation :

  • It calls CopyDataProperties(object, fromValue, excludedNames) where the fromValue is wrapped to an object with ToObject , and therefore becomes iterable, even if fromValue is a primitive value like false . Therefore {...false} is valid EcmaScript.

• Concerning array spread syntax, see 12.2.5.2 Runtime Semantics: ArrayAccumulation :

  • It merely calls GetValue(spreadRef) which does not do the above mentioned wrapping. And so the subsequent call to GetIterator will trigger an error on a primitive value, as it is not iterable. Therefore [...false] is invalid EcmaScript.

Answer 4

Example with objects:

 const lessonMenuItems = [
  ...(true
    ? [
        {
          value: 'post',
        },
      ]
    : []),
  {
    value: 'assign',
  },
]

Result:

lessonMenuItems = [
  {
    value: 'post',
  },
  {
    value: 'assign',
  },
]

Answer 5

You can use a ternary operator (? :) and put an empty array as the false

 let condition = false; let arr1 = ['value1']; let arr2 = ['value2', ...(condition ? arr1 : [])]; console.log(arr2);