深度数组上的JavaScript深度传播运算符

Question

我有一个很深的数组，因此带有子数组的数组如下所示：

const deepArray = ['1',[['a'],['b']],[2],[[[['4',[3,'c']]]],[5]]];

我想将所有最终子级设置为一个平面数组，我使用ES6 spread operator ，但它散布得很浅，我不知道如何将它们设置为以下形式：

const shallowArray = ['1','a','b',2,'4',3,'c',5];

也许递归函数可以做到，但是怎么办呢？ 它应该非常优化，因为我想在react native项目中使用它。 我担心崩溃，因此我对优化非常谨慎。

Answer 1

使用Array.prototype.flat展平阵列，然后根据需要使用散布运算符。

如果您知道数组的深度或最大深度值，请使用以下代码：

const flatArray = deepArray.flat(7); // assume you know depth size is 7

如果您不知道深度，则可以使用使用reduce函数的递归方法，请使用以下方法：

 const deepFlatten = arr =>
         arr.reduce(
           (acc, val) =>
             Array.isArray(val) 
               ? acc.concat(deepFlatten(val)) 
               : acc.concat(val),
             []
         );

使用以上功能可以平整不确定的深度：

const flatArray = deepFlatten(deepArray);

Answer 2

使用递归，它非常简单:)

 let deepArray = ['1',[['a'],['b']],[2],[[[['4',[3,'c']]]],[5]]]; let array = []; function f(d){ Array.isArray(d)? d.forEach(x=> f(x)) : array.push(d); } deepArray.forEach(x=>f(x)); console.log(array); 

Answer 3

我想要一个用于react-native合并样式的扁平函数。 因为有时在react-native您会有各种各样的样式，因此必须扁平化样式。

但是我发现react-native StyleSheet具有良好的优化flatten函数，可以处理此问题。

如果有人阅读了我的问题，并且需要处理深层样式，请使用以下代码：

const styleJoiner = (...arg) => StyleSheet.flatten(arg);