在 javascript 中更改数组对象属性的一部分答案

【问题标题】：Changing part of an array object's property in javascript在 javascript 中更改数组对象属性的一部分
【发布时间】：2019-03-15 01:43:05
【问题描述】：

我有一个对象数组，类似于：

[
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "e",
  },
  {
    number: 3,
    name: "EE",
  }
]

我需要能够将一个对象插入到数组中的特定位置，但是我必须移动对象其余部分的所有数字，因此这些数字是按顺序排列的。同样，我需要能够移除一个对象，但能够将所有数字移回。

即如果我在位置 1 插入名称：“F”，则数组变为：

[
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "F"
  },
  {
    number: 3,
    name: "e",
  },
  {
    number: 4,
    name: "EE",
  }
]

我知道一些可以做到这一点的方法，但没有一个看起来很漂亮。在这里发表一些我的想法：

插入我做了this.arr.splice(1, 0, newObj)，然后尝试循环遍历this.arr，对于任何大于2的索引，我做了++number，这可行，但丑陋。
要插入我做了this.arr.splice(1, 0, newObj)，然后用let newArr = this.arr.split(2) 拆分this.arr，然后用newArr.map(a => {...})，使用splice 将部分原始arr 替换为newArr。

新编辑：在这里分享我的一些代码，这是可行的，但如果可能的话，我想简化它或让它更漂亮。请分享想法。

const newObj = {
  number: obj.number + 1,
  name: 'S',
}
this.arr.splice(obj.number, 0, newObj)
if (this.arr.length > obj.number) {
  const remaining = this.arr.slice(obj.number + 1).map( (t) => ({...t, ...{number: t.number + 1}}))
  this.arr.splice(newObj.number, remaining.length, ...remaining)
}

【问题讨论】：

您采取了哪些步骤来实现您正在寻找的不同变化？什么有效，什么无效？您在此处发帖之前是否尝试过搜索“将对象插入到特定位置的数组中”？
数字是否等于元素索引，或者它们是通过某种算法计算出来的？
@CharlieSchliesser 我编辑了原始帖子，在没有完成编辑的情况下意外发布了它。所以答案是，我不只是试图插入到特定位置，我希望能够增加其余对象的数量。我能够做到，但我的代码看起来很难看。想看看有没有更好的解决办法
@Cerberus 我更新了原帖。
我从事审计工作，所以我完全理解。

标签： javascript arrays typescript

【解决方案1】：

为了达到预期的效果，使用 splice(index, deleteCount, item) 并在 map 中使用 index 分配给每个对象的编号，以便在您删除后按顺序获取编号

let arr = [
  {
    number: 1,
    name: "A"
  },
  {
    number: 2,
    name: "e",
  },
  {
    number: 3,
    name: "EE",
  }
]

let newObj = {
name: "F",
  }
arr.splice(1,0, newObj)//To add
  //  console.log(arr)

//arr.splice(2,1) //To delete
//console.log(arr);

console.log(arr.map((v,i) => {
  v.number = i;
  return v
}));

Array.splice 的参考链接 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

【讨论】：

嘿，对不起，我的原始帖子在完成编辑之前不小心提交了。但我不只是试图删除或插入到特定位置。请看帖子，我已经更新了。
@user1491987，您要按名称排序吗？
根本不尝试排序。我尝试在某个位置插入，然后确保数字是按顺序排列的
@user1491987，更新了我的答案，使用地图索引并分配给数字，所以它会自动按顺序分配
愚蠢的我！谢谢，这行得通。不知怎的，我忘记了 map 也可以使用索引。

【解决方案2】：

你可以使用...展开语法和切片。

operation 用于决定是删除还是添加该值。
如果operation 是del，那么我们将第一个从0 分割到索引，然后从index+1 分割到数组末尾。
否则我们切片 from 0 upto index 并添加所需的值，然后将剩余的部分添加回来 (from index to end)
最后映射值以相应地调整 number 属性

let arr = [{ number: 1,name: "A"},{number: 2,name: "e",  }, {number: 3,name: "EE",}]

let handleArray = (array,operation,index,value) => {
  if(operation === 'del') {
    return [...array.slice(0, index), ...array.slice(index+1,)].map((value,index)=> (value.number = index+1, value))
  } else {
    return [...array.slice(0,index),value,...array.slice(index,)].map((value,index)=> (value.number = index+1,value))
  }
}

console.log(handleArray(arr,'add',0,{a:1}))
console.log(handleArray(arr,'del',0))

【讨论】：