时间戳

首页 > 解决方案 > 数组拼接在这种方法中不起作用是怎么回事？

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

问题描述

我正在尝试在以下位置插入新项目。关键是 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 工作正常但不能切片或拼接？如果这些方法不起作用，我该如何以其他方式将该项目推到我想要的位置？

标签： javascriptarraysvue.jsecmascript-6javascript-objects

解决方案

假设我正确理解您要执行的操作，您有两种选择：

  1. 在里面getItems，新建一个数组，修改新数组插入值，返回新数组。
  2. 在里面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()一次做两件不同的事情：它修改一个数组以删除或插入项目，它返回一个新数组，其中只包含被删除的内容。

第二个例子与 using 解决问题非常相似concat()：它等价于return [].concat(resultArray.slice(0, 2), [item2], resultArray.slice(2)).

推荐阅读