Question

尝试以不可变的方式将数组推入现有数组但不知何故我的代码无效。

function insertItem(array, action) {
  return [
    ...array.slice(0, action.index),
    action.item,
    ...array.slice(action.index)
  ]
}

const ori_arr = [{
  id: 1,
  name: 'james',
  age: 10
}, {
  id: 2,
  name: 'terrance',
  age: 20
}]

console.log(insertItem(ori_arr, {
  action: {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
  }
}))

在索引部分可能是错误的。

Answer 1

由于您要添加的对象具有嵌套属性action，因此您可能希望使用destructuring仅将action键作为inserItem函数的参数。

const insertItem = (array, { action }) => [
   ...array.slice(0, action.index),
   action.item,
   ...array.slice(action.index),
];

const ori_arr = [{
  id: 1,
  name: 'james',
  age: 10
}, {
  id: 2,
  name: 'terrance',
  age: 20
}]

console.log(insertItem(ori_arr, {
  action: {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
  }
}))

Hovever ，如果您希望避免使用destructuring，只需更改insertItem功能中第二个参数的名称即可。 obj，然后在功能中的每个obj之前添加action.index：

const insertItem = (array, obj) => [
   ...array.slice(0, obj.action.index),
   obj.action.item,
   ...array.slice(obj.action.index),
];

Answer 2

您传递的参数不正确：

console.log(insertItem(ori_arr, {
  action: {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
  }
}))

而是在没有action对象的情况下传递它：

console.log(insertItem(ori_arr, {
    index: 1,
    item: {
       id: 3,
       name: 'she',
       age: 44
    }
}))

如果你尝试记录它，你会发现你的函数insertItem里面有一个名为action的参数，它的值（当你调用它时）是

action = { action: { index: 1, item: { id: 3, name: 'she', age: 44 }}}

因此当您尝试访问action.item时，它不存在。

另一种解决方案是将您的功能更改为

function insertItem(array, action) {
  return [
    ...array.slice(0, action.action.index),
    action.action.item,
    ...array.slice(action.action.index)
  ]
}

无需推送就将项添加到数组中

2 个答案: