深度阵列上的JavaScript深度扩展算子

Question

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

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

我想在一个平面数组中设置所有的结束子程序，我使用spread operator of ES6，但是它传播得很浅，我不知道如何将它们设置到下面：

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

也许递归函数可以做到这一点，但是如何做到呢？它应该是非常优化的，因为我想在react native项目中使用它。我担心崩溃，所以我对优化非常谨慎。

Answer 1

使用Array.prototype.flat将数组扁平化，然后根据需要使用spread操作符。

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

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);