如何定义具有条件元素的数组?

我如何定义条件数组元素? 我想这样做:

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

这正如预期的那样工作，并导致["foo", "bar"]，但如果我将cond设置为false，则会得到以下结果:["foo", false]

如何定义具有条件元素的数组?

113891 次浏览
小开

你可以试试简单的if:

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

除了使用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);
小开

如果你真的想将它保留为一行，你可以使用:

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

有几种不同的方法，但这种方法并不适用于Javascript。

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

if (myCond) arr.push(element);

还有filter，但我不认为这是你在这里想要的，因为你似乎是要“添加这一件事，如果这一个条件是真的”，而不是根据某些条件检查一切。虽然，如果你想变得非常怪异，你可以这样做(不建议，但你可以这样做很酷)。

var arr = ["a", cond && "bar"];
arr.filter( e => e)

基本上它会过滤掉所有非真值。

小开

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

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


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

返回

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

我知道这不能解决速记符号(因为无论你怎么尝试，它都不会起作用)，但它接近于那个。

小开
最佳答案

当条件为false时，可以将数组展开到数组内部，以保持项数组干净。

以下是你可以做到的方法:

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


console.log(items)

解释:

如你所见，三元运算符总是返回一个数组。

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

之后，我们展开...结果数组(从三元操作)，数组的项被推入到父数组。

如果没有任何数组项(当三元检查为false时)，则不会推送任何东西，这是我们的目标。

在另一个回答中，我解释了同样的想法，只是针对对象。你也可以检查它在这里。

小开

我会这样做

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

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

小开

如果你正在使用es6，我会建议

let array = [ “自行车”, “汽车”, Name === "van" ?"van": null， “公共汽车”, “卡车”, ] .filter(布尔);< /代码> < / p >

如果name = "van"，该数组将只包含值"van"，否则将被丢弃。

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


console.log(myArr)

将导致["foo"]

小开

有条件地添加元素

/**
* 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;
}, [])
);
小开

这是Jordan Enev的答案的替代方案，如果你不太关心性能，感觉你想学习更多关于Javascript的知识:)

所以，如果你想这样做，但没有false/undefined/null元素

['foo', true && 'bar', null && 'baz']; // ['foo', 'bar', null]

你可以这样做:

['foo', true && 'bar', ...Object.values({ ...(null && ['baz']) })]; // ['foo', 'bar']

最后，正条件将如预期的那样工作:

['foo', true && 'bar', ...Object.values({ ...(true && ['baz']) })]; // ['foo', 'bar', 'baz']

好处:如果你想向数组中添加一个东西，但这个东西可以是falsy，然后你不希望它在那里，不做第二次操作，这里有一种方法:

const foo = 1; // 1
const bar = (() => 'expensive result that turns out falsy for bar' && false)(); // false
const baz = (() => 'expensive result for baz')(); // 'expensive result'
const conditionalArrayWrapperFor = i => i ? [i] : [];
// tip: you can always inline conditionalWrapper if you only execute it once
// for instance, if you're using this inside a reduce call
[foo, ...conditionalArrayWrapperFor(bar), ...conditionalArrayWrapperFor(baz)] // [1, 'expensive result for baz']

提交答案