Question

这种方法中数组拼接不起作用，是什么问题？

2020-09-14

360

javascript arrays vue.js ecmascript-6 javascript-objects

我试图在以下位置插入新项目。问题是 concat() 工作正常，但当我使用切片或拼接时却不行。甚至没有显示任何错误，只是显示空白屏幕。

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

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

Answer 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)) 。