数组拼接在这种方法中不起作用是怎么回事？

Posted 2023-02-22

【中文标题】数组拼接在这种方法中不起作用是怎么回事？

【英文标题】：Array splice is not working in this method what's wrong?

【发布时间】：2021-01-01 13:24:58

【问题描述】：

我正在尝试在以下位置插入新项目。关键是 concat() 可以正常工作，但是当我使用 slice 或 splice 时却不行。甚至不显示任何错误只是显示空白屏幕。

 getItems() 
      const item2 = 
        name: '...',
        description: '...',
        id: '...',
      
      let items =  ...this.items 
      
        return Object.keys(items)
          .map(id => (
            ...items[id],
            id,
          ))
          .splice(2, 0, item2)
      ...

这是它的样子。为什么 concat 工作正常但不能切片或拼接？如果这些方法不起作用，我该如何以其他方式将该项目推到我想要的位置？

【问题讨论】：

splice 返回已删除项目的数组，否则会在原地改变数组。

是的，我知道，我需要返回修改后的数组。切片也不起作用。只有 concat 有效

那么不要像现在这样返回splice的结果——而是分配给一个变量，拼接，然后返回它。

无论如何都行不通

只有concat有效，很有趣，

【参考方案1】：

假设我正确理解您要做什么，您有两个选择：

在getItems内部，新建一个数组，修改新数组插入值，返回新数组。 在getItems 中，在一行中声明一个新数组并将其返回。

选项 1 的示例：

getItems() 
  const item2 = 
    name: '...',
    description: '...',
    id: '...',
  

  let items =  ...this.items 
      
  const resultArray = Object.keys(items)
    .map(id => (
      ...items[id],
      id,
    ))

  resultArray.splice(2, 0, item2) // This does **not** return the right value, it only modifies resultArray to become the value you want.
  return resultArray // Instead we return resultArray on a new line.

对于选项 2：

getItems() 
  const item2 = 
    name: '...',
    description: '...',
    id: '...',
  

  let items =  ...this.items 
      
  const resultArray = Object.keys(items)
    .map(id => (
      ...items[id],
      id,
    ))

  return [ ...resultArray.slice(0, 2), item2, ...resultArray.slice(2) ]

要回答您关于为什么 concat() 有效但 slice() 或 splice() 无效的问题：concat() 返回一个添加了元素的新数组。 slice() 不能用于创建添加了项目的数组。 splice() 同时做两件不同的事情：它修改一个数组以删除或插入项目，并且它返回一个仅包含已删除内容的新数组。

第二个例子与使用concat()解决问题非常相似：相当于return [].concat(resultArray.slice(0, 2), [item2], resultArray.slice(2))。