如何将新属性添加到数组的每个对象中

Question

如何在对象数组中添加新的 2 个属性？应该为数组内的每个对象添加这 2 个属性。这是函数：

selectTag(selectedProduct, selectedTag) {
      this.selectedProducts.filter(item => {
        item.id === selectedProduct.id
      })
      .map(item => {
        item.tagId=selectedTag.id, item.tagTitle = selectedTag.title
        })
    },

下拉列表

  <b-dropdown aria-role="list">
                <b-button
                  icon-right="caret-down"
                  class="ToolbarButton"
                  size="is-small"
                >
                  <span> {{ selectedProduct.tagTitle }} </span>
                </b-button>

                <b-dropdownitem
                  v-for="selectedTag in selectedProduct.tags"
                  :key="selectedTag.id"
                  aria-role="listitem"
                  @click="selectTag(selectedProduct, selectedTag)"
                >
                  {{ selectedTag.title }}
                </b-dropdownItem>

我试过上面的功能，但是没有用。地图方法应该是固定的。我正在尝试添加 tagId 和 tagTitle 属性，它们将从每个产品行的下拉选择中获取值...如何修复？

Answer 1

map函数确实是错误的，你什么都不return，应该是这样的：

.map(item => ({
     ...item,
     tagId: selectedTag.id,
     tagTitle: selectedTag.title
}))

或

.map(item => {
  return {
    ...item,
    tagId: selectedTag.id,
    tagTitle: selectedTag.title
  }
})

Answer 2

将 .map 与对象传播语法一起使用。

.map(item => ({
    ...item, 
    item.tagId: selectedTag.id, item.tagTitle: selectedTag.title
}))

Answer 3

试试这个

var arr =[
{id: 1, turnName: "10_00_am"},
{id: 2, turnName: "10_00_am"},
{id: 3, turnName: "11_00_am"}
];


const addProps = (x) => {
    x.prop1 = 'Alaska';
    x.prop2 = 'Canada';
    return x;
}

var newArr = arr.map(x => addProps(x));
console.log(newArr);

Answer 4

您可以使用 ES6 对象扩展语法 return 从 map 函数中更新一个新的项目。另外，对象属性可以在函数参数本身中进行解构，使其看起来简洁明了。

selectTag(({id}), ({id: tagId, title: tagTitle})) {
    this.selectedProducts.filter(item => item.id === id)
    .map(item => ({...item, tagId, tagTitle}))
}

Answer 5

根据您显示的函数，指出过滤器需要将其结果存储在某个变量中，因为过滤器不会改变执行它的数组。映射不起作用，因为您必须复制对象然后扩展新属性

如果我理解正确你的问题，请尝试下面的例子

const object = {
  selectTag(selectedProduct, selectedTag) {
    const data = this.selectedProducts.filter((item) => {
      item.id === selectedProduct.id;
    });

    return data.map((entry) => ({
      ...entry,
      tagId: selectedTag.id,
      tagTitle: selectedTag.title,
    }));
  },
};

Answer 6

您可以在对象上循环并添加您的属性：

for(let obj of array) {
    obj[key1] = value1;
    obj[key2] = value2;
}

Answer 7

如果它在 Vue.js 中，则您不能按常规向对象添加属性，因为它不会反应。您需要使用 Vue.set:

    selectTag: function(selectedProduct, selectedTag) {
      for (var i = 0; i < this.selectedProducts.length; i++) {
        if (this.selectedProducts[i].id === selectedProduct.id) {
          this.$set(this.selectedProducts[i], "tagId", selectedTag.id);
          this.$set(this.selectedProducts[i], "tagTitle", selectedTag.title);
        }
      }
    }

如何将新属性添加到数组的每个对象中

How to add new properties into every object of an array

javascript

javascript-objects

ecmascript-5

ecmascript-6

vuejs2