Question

我如何定义条件数组元素？我想做这样的事情：

const cond = true;
const myArr = ["foo", cond && "bar"];

这可以按预期工作：["foo", "bar"]

但如果我将cond设置为false，我会得到以下结果：["foo", false]

如何使用条件元素定义数组？

Answer 1

当条件为false时，您可以在数组内部扩展数组，以保持项数组清洁。

以下是如何做到的：

＆＃13;

// Will result in ['foo', 'bar']
const items = [
  'foo',
  ... true ? ['bar'] : [],
  ... false ? ['falsy'] : [],
]

console.log(items)

＆＃13;

<强>说明：

正如您所见，三元运算符始终返回一个数组。

如果条件为true，则返回['bar']，否则返回空数组[]。

之后我们展开...结果数组（来自三元运算），数组的项目被推送到父数组。

如果没有任何数组项（当三元检查为false时），则不会推送任何内容，这是我们的目标。

在其他答案中，我解释了相同的想法，但对于对象。您也可以查看here。

Answer 2

我会这样做

[
  true && 'one',
  false && 'two',
  1 === 1 && 'three',
  1 + 1 === 9 && 'four'
].filter(Boolean) // ['one', 'three']

请注意，这也会删除falsy值，例如空字符串。

Answer 3

您可以尝试使用简单的if：

if(cond) {
    myArr.push("bar");
}

Answer 4

如果确实希望将其保留为一个班轮，您可以使用：

const cond = true;
const myArr = ["foo"].concat(cond ? ["bar"] : []);

Answer 5

除了使用push之外，您没有太多选择：

const cond = true;
const myArr = ["foo"];

if (cond) myArr.push("bar");

另一个想法是可能添加null并将其过滤掉：

const cond = true;
const myArr = ["foo", cond ? "bar" : null];

myArr = myArr.filter((item) => item !== null);

Answer 6

const cond = false;
const myArr = ["foo", cond ? "bar" : null].filter(Boolean);

console.log(myArr)

将产生[“ foo”]

Answer 7

有几种不同的方式，但你这样做的方式对Javascript不起作用。

最简单的解决方案是只使用if语句。

export class CheckboxField extends React.PureComponent {

  handleCheck = (event, isInputChecked) => {
    this.props.onChange(event, isInputChecked, this.props.category);
  };

  render() {
    return (
          <Checkbox
            label={this.props.category}
            iconStyle={{fill: '#000'}}
            value={this.props.category}
            onCheck={this.handleCheck}
          />
    )}
}

还有if (myCond) arr.push(element);，但我认为这根本不是你想要的，因为你似乎要“添加这一件事，如果这一条件是真的”，而不是检查一切一些条件。虽然，如果你想变得非常怪异，你可以这样做（不推荐，但你很酷）。

filter

基本上它只会滤除所有非真值。

Answer 8

使用ES6的单线；

arr = [
  "Hello",
  "World",
  ...(true && ["conditional element"])
]

Answer 9

替代方法：预过滤器填充而不是后过滤：

const populate = function(...values) {
    return values.filter(function(el) {
        return el !== false
    });
};

console.log(populate("foo", true && "bar", false && "baz"))

返回

(2) ["foo", "bar"]

我知道这并不能解决速记符号（因为无论你尝试什么都行不通），但它接近于此。

Answer 10

如果您使用Array.push

您可以关注

var a = ["1"]
a.push(... !true ? ["2"] : [])

结果为["1"]

或

var a = ["1"]
a.push(... true ? ["2"] : [])

结果是 ["1","2"]

Answer 11

如果您使用的是es6，我建议

let array = [ "bike", "car", name === "van" ? "van" : null, "bus", "truck", ].filter(Boolean);

如果名称等于“ van”，则此数组将仅包含值“ van”，否则将被丢弃。

Answer 12

有条件地添加元素

/**
 * Add item to array conditionally.
 * @param {boolean} condition
 * @param {*} value new item or array of new items
 * @param {boolean} multiple use value as array of new items (for future)
 * @returns {array} array to spread
 * @example [ ...arrayAddConditionally(true, 'foo'), ...arrayAddConditionally(false, 'bar'), ...arrayAddConditionally(true, [1, 2, 3]), ...arrayAddConditionally(true, [4, 5, 6], true) ] // ['foo', [1, 2, 3], 4, 5, 6]
 */
export const arrayAddConditionally = (condition, value, multiple) => (
    condition
        ? multiple ? value : [value]
        : []
);

使用条件元素创建数组


/**
 * Create array with conditional elements
 * @typedef {[condition: boolean, value: any, multiple: boolean]} ConditionalElement
 * @param {(ConditionalElement|*)[]} map non-array element will be added as it is, array element must allways be conditional
 * @returns {array} new array
 * @example createArrayConditionally([[true, 'foo'], [false, 'baz'], [true, [1, 2, 3]], [true, [4, 5, 6], true], {}]) // ['foo', [1,2,3], 4, 5, 6, {}]
 */
export const createArrayConditionally = (map) => (
    map.reduce((newArray, item) => {
        // add non-conditional as it is
        if (!Array.isArray(item)) {
            newArray.push(item);
        } else {
            const [condition, value, multiple] = item;
            // if multiple use value as array of new items
            if (condition) newArray.push[multiple ? 'apply' : 'call'](newArray, value);
        }
        return newArray;
    }, [])
);

如何用条件元素定义数组？

12 个答案:

有条件地添加元素

使用条件元素创建数组