javascript - Javascript，在地图期间动态创建一个空对象副本

Question

我正在努力寻找一个好的解决方案来处理我的对象数组。

我有两个数组：

let structure = ["horizontal","vertical","small","small","small"]

let items = [{"id":1,"title":"xxxxx","format":"horizontal","position":0}, 
            {"id":3,"title":"xxxxx","format":"vertical","position":1}, 
            {"id":6,"title":"xxxxx","format":"small","position":2}, 
            {"id":9,"title":"xxxxx","format":"small","position":3}, 
            {"id":11,"title":"xxxxx","format":"small","position":4}]

编辑：项目比这更复杂：它有大约 15 个属性......

structure具有动态长度，是我的参考数组。当我更改时，structure我必须重新映射 items 数组，根据structure. 所以如果我structure改为

let structure = ["horizontal","vertical","vertical","vertical","small"]

数组必须更改为

 let items = [{"id":1,"title":"xxxxx","format":"horizontal","position":0}, 
              {"id":3,"title":"xxxxx","format":"vertical","position":1}, 
              {"id":6,"title":"xxxxx","format":"vertical","position":2}, 
              {"id":9,"title":"xxxxx","format":"vertical","position":3}, 
              {"id":11,"title":"xxxxx","format":"small","position":4}]

这可以通过地图来完成。这是我的 Vue 方法，我映射结构并使用changeStructure我更改格式的函数。

methods: {
      changeStructure(object,structure) {
        object.format = structure
        return object
      },
      updateCoverElements() {
        let structure = this.coverTypes[this.currentCoverVersion]
        let elements = this.coverElements
        let changeStructure = this.changeStructure

        let revisedElement = structure.map(function(structure, index) {
          return changeStructure(elements[index],structure)
        });
        console.log(revisedElement);
      }
    },

但问题是，正如我之前所说，结构具有动态长度。

所以当我改为

let structure = ["horizontal","vertical","vertical"]

项目结果必须是

let items = [{"id":1,"title":"xxxxx","format":"horizontal","position":0}, 
            {"id":3,"title":"xxxxx","format":"vertical","position":1}, 
            {"id":6,"title":"xxxxx","format":"vertical","position":2}]

structure如果新长度的元素较少，这不是问题。

但是当我改为

let structure = ["horizontal","vertical","vertical","vertical","vertical","vertical","vertical"]

项目结果必须是

let items = [{"id":1,"title":"xxxxx","format":"horizontal","position":0}, 
             {"id":3,"title":"xxxxx","format":"vertical","position":1}, 
             {"id":6,"title":"xxxxx","format":"vertical","position":2},
             {"id":"","title":"","format":"vertical","position":3}, 
             {"id":"","title":"","format":"vertical","position":4},
             {"id":"","title":"","format":"vertical","position":5}, 
             {"id":"","title":"","format":"vertical","position":6}]

这就是问题所在：我找不到动态创建与其他项目对象（副本）具有相同结构的对象的好方法，除了位置、数组索引和格式之外，每个字段都是空的。

标签： javascriptarrays

Answer 1

您可以像这样使用传播语法。如果items在 有一个值index，它将覆盖默认值id和title值。

let structure = ["horizontal","vertical","vertical","vertical","vertical","vertical","vertical"]

let items = [{"id":1,"title":"xxxxx","format":"horizontal","position":0}, 
            {"id":3,"title":"xxxxx","format":"vertical","position":1}, 
            {"id":6,"title":"xxxxx","format":"vertical","position":2}]

const defaultObj = { id: '', title: '' }

const newItems = structure.map((format, position) => {
  return { ...defaultObj, ...items[position], format, position }
})

console.log(newItems)