Javascript 基于属性对数组进行功能排序，并将数组的位分组在一起

我有这个阵列：

const nums = [
 {name: 'a', option: false},
 {name: 'b', option: false},
 {name: 'c', option: false},
 {name: 'd', option: false},
 {name: 'e', option: false},
 {name: 'f', option: true},
 {name: 'g', option: true},
 {name: 'h', option: false},
 {name: 'i', option: true},
 {name: 'j', option: false},
 {name: 'k', option: false},
];

我想重新组织这个数组，使元素在数组中移动时，具有“false”选项的元素按4个元素的组分组在一起，但如果有一个元素具有“true”选项，它将优先并放在4个元素的组之前，除非前面一组4个元素是完整的（即长度等于4）

结果将是

const nums = [
 {name: 'a', option: false},
 {name: 'b', option: false},
 {name: 'c', option: false},
 {name: 'd', option: false},
 {name: 'f', option: true},
 {name: 'g', option: true},
 {name: 'i', option: true},
 {name: 'e', option: false},
 {name: 'h', option: false},
 {name: 'j', option: false},
 {name: 'k', option: false},
];

我以命令式的方式取得了成功

let stock = [];
let array2 = [];
for (let i = 0; i < nums.length; i ++){
  if (nums[i].option){
    array2.push(nums[i]);
  }
  else {
    stock.push(nums[i]);
    if(stock.length == 4) {
      array2 = array2.concat(stock);
      stock = [];
    }
  }
}

console.log('array2 is', array2);

虽然它有效，但我认为函数式编程风格可以改进。 你能帮我改进代码吗

注: 有些人发现这个问题有点不寻常（事实确实如此）。因此，我将提供更多的上下文：

潜在的问题是一个UI风格的问题，传统风格的类无法解决这个问题：我有一个网格容器，其中包含四行网格元素（当它们没有“打开”时）

当它被打开时，卡将占用所有线路，并将下列元素推回。问题是它并不漂亮，因为我有一些行可能只包含一个或两个未打开的元素，在下一行之前没有任何内容，打开的卡占用了下一行的所有空间

---

因此，我们的想法是将四个未打开的元素分组，储存它们，直到我有一组四个元素，然后将它们放在一行上。如果我遇到一张打开的卡，我会先显示这张卡，然后刷新未打开的元素

可以使用递归

const bubble=（xxs，acc=[]）=>{
如果（xxs.length==0）返回acc；
如果（acc.length==4）返回[…acc，…气泡（xxs）]；
常数[x，…xs]=xxs；
如果（x.option）返回[x，…气泡（xs，acc）]；
返回气泡（xs，[…acc，x]）；
};
常数nums=[
{name:'a'，option:false}，
{name:'b'，option:false}，
{name:'c'，option:false}，
{name:'d'，option:false}，
{name:'e'，option:false}，
{name:'f'，option:true}，
{name:'g'，option:true}，
{name:'h'，option:false}，
{name:'i'，option:true}，
{name:'j'，option:false}，
{name:'k'，option:false}，
];
常数结果=气泡（nums）；
控制台日志（结果）实际上我会选择一种与你类似的方法，
使用
块
作为临时值来存储不完整的组


const group=（数据=[]，块=[]，资源=[]）=>{
如果（！data.length）{
//输入为空，
//清除任何可能的不完整块
//并返回结果
返回[…res，…chunk]；
}
常数[头，…尾]=数据；
const next=（…xs）=>组（tail，…xs）；
如果（标题选项）{
//head.option为true，因此您可以
//安全地把它放在尾部位置
返回next（chunk，[…res，head]）；
}
if（chunk.length<4）{
//区块不完整，请继续累积
返回next（[…块，头]，res）；
}
//块已完成，请将其附加到其余部分
//并使用当前值创建一个新的
返回下一个（[head]、[res]、[chunk]）；
};
常数数据=[
{name:'a'，option:false}，
{name:'b'，option:false}，
{name:'c'，option:false}，
{name:'d'，option:false}，
{name:'e'，option:false}，
{name:'f'，option:true}，
{name:'g'，option:true}，
{name:'h'，option:false}，
{name:'i'，option:true}，
{name:'j'，option:false}，
{name:'k'，option:false}，
];
日志（'结果为'，组（数据））是“真”元素也要分组，还是“假”4组中存在的所有“真”元素都要冒泡到下一组“假”之前？（顺便说一句，这是一个非常奇怪的问题……就需求而言，这是非常不寻常的！）“真实”元素并不意味着要组合在一起，所以这是一个有效的案例吗
FFTFTFTFTFTT
=>
TFFFFTTTTTFF
是的，确切地说，这是一个有效的案例
let stock = [];
const actual = nums.map(
 (acc => val => {
   if (val.option){
     acc.push(val);
   }
   else {
     stock.push(val);
     if (stock.length === 4) {
       acc = acc.concat(stock);
       stock = [];
     }
   }
   return acc;
 })([]))

console.log('actual is, ', actual[actual.length-1]);