在正在循环的数组内的特定索引中插入项目

Question

当循环时满足特定条件时，通过在特定索引中插入新元素来更新数组的最佳方法是什么。

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 6, count: 9}
  {item: 4, count: 5}]

我想在跟踪计数的同时循环 exampleArray，并在计数大于或等于 10 时立即插入新元素，然后将计数重置为 0 以进行下一个循环

所以我想要的结果是

const resultArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 'new item 1 as count is over 10', count: 0},
  {item: 3, count: 10},
  {item: 'new item 2 as count is equal to 10', count: 0}, 
  {item: 6, count: 9},
  {item: 4, count: 5}, 
  {item: 'new item 3 as count is > 10, previous two counts (9 + 5 )', count: 0 }]

我试过了

let count = 0
exampleArray.forEach((item, index) => {
 count += item.count

 if(count >= 10) {
  exampleArray.splice(index + 1, 0, {item: 'item to be added', count: 0}
  count = 0
 }
})

Answer 1

这两个都创建了一个新数组 - 如果您想覆盖，请使用 let 并将其分配回原始数组

TJ 建议的地图和平面 - 即平面地图

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 4, count: 5}];
  
let count = 0;  
const resultArray = exampleArray.flatMap(item => {
  count += item.count; 
  if (count >= 10) {
    count = 0
    return [item, {item:"new", count:0}]
  }  
  return item;
});

console.log(resultArray);

减少

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 4, count: 5}];
  
let count = 0;
const resultArray = exampleArray.reduce((acc,cur) => {
  count += cur.count; 
  acc.push(cur);
  if (count >= 10) {
    count = 0
    acc.push({item:"new", count:0})
  }  
  return acc;
},[]);

console.log(resultArray);

Answer 2

我会选择一个简单的 for 或 for...of 循环。如果您乐于创建一个新数组（如果不是——我看你不在你的问题中——见下文）：

const result = [];
for (const item of exampleArray) {
    count += item.count;
    result.push(item);
    if (count >= 10) {
        result.push({item: 'item to be added', count: 0});
    }
}

或（最初我使用map...flat()，因为我再次忘记了flatMap；mplungjan reminded me）：

let count = 0;
const result = exampleArray.flatMap(item => {
    count += item.count;
    if (count >= 10) {
        return [item, {item: 'item to be added', count: 0}];
    }
    return item;
});

现场示例：

const exampleArray = [
    {item: 1, count: 5},
    {item: 2, count: 20},
    {item: 3, count: 10},
    {item: 4, count: 5}
];
let count = 0;
const result = [];
for (const item of exampleArray) {
    count += item.count;
    result.push(item);
    if (count >= 10) {
        result.push({item: 'item to be added', count: 0});
    }
}
console.log(result);
count = 0;
const result2 = exampleArray.map(item => {
    count += item.count;
    if (count >= 10) {
        return [item, {item: 'item to be added', count: 0}];
    }
    return item;
}).flat();
console.log(result2);

如果您真的想修改现有数组，for 循环可以让您控制索引变量：

for (let index = 0; index < exampleArray.length; ++index) {
    const item = exampleArray[index];
    count += item.count;
    if (count >= 10) {
        exampleArray.splice(index + 1, 0, {item: 'item to be added', count: 0});
        count = 0;
        ++index; // Skip the item we just added
    }
}

现场示例：

const exampleArray = [
    {item: 1, count: 5},
    {item: 2, count: 20},
    {item: 3, count: 10},
    {item: 4, count: 5}
];
let count = 0;
for (let index = 0; index < exampleArray.length; ++index) {
    const item = exampleArray[index];
    count += item.count;
    if (count >= 10) {
        exampleArray.splice(index + 1, 0, {item: 'item to be added', count: 0});
        count = 0;
        ++index; // Skip the item we just added
    }
}
console.log(exampleArray);