JavaScript如何将数组新增元素插入指定位置而非追加到末尾

你当前使用的push()方法会将新元素追加到数组末尾，因此CCC会出现在最后一位。要实现插入到BBB之后、DDD之前的效果，只需获取BBB元素在数组中的索引，调用splice()方法在指定位置插入新元素即可。

修改后代码 #

let row = warehouse_delivery_transaction.find(x => x.kerry_status_name === 'CCC')
if (!row) {
  // 获取BBB元素对应的数组索引
  let bbbIndex = warehouse_delivery_transaction.findIndex(x => x.kerry_status_name === 'BBB')
  if (bbbIndex !== -1) {
    const bbbItem = warehouse_delivery_transaction[bbbIndex]
    // 在BBB的下一个位置插入CCC元素
    warehouse_delivery_transaction.splice(bbbIndex + 1, 0, {
      code: bbbItem.code,
      kerry_status_name: 'CCC',
      location: '',
      status_date: bbbItem.status_date
    })
  }
}

方法说明 #

splice()是JavaScript数组的原生方法，会直接修改原数组，本次调用的三个参数含义如下：

• 第一个参数bbbIndex + 1：插入位置为BBB元素的下一位，刚好落在BBB和DDD之间
• 第二个参数0：插入操作不需要删除原数组的任何元素
• 第三个参数：要插入的CCC新元素

扩展方案（可选） #

如果你的业务中状态顺序是固定的，也可以通过维护状态优先级配置的方式统一排序，后续新增状态时不需要修改插入逻辑，灵活性更高：

// 按展示顺序维护状态优先级，数值越小越靠前
const statusPriority = {
  'AAA': 1,
  'BBB': 2,
  'CCC': 3,
  'DDD': 4
}

// 插入元素后统一按优先级排序
warehouse_delivery_transaction.sort((a, b) => {
  return statusPriority[a.kerry_status_name] - statusPriority[b.kerry_status_name]
})

内容的提问来源于stack exchange，提问作者Wongsatron Dongnin