如何从数组中的 object 中删除属性？

Question

我的 Vue 组件中有一个数组，我试图在一个方法中解析它，但我根本不想要其中的 ID。 我希望数组与当前相同，但只显示选项索引，而不是 id。

在该方法中，有没有一种方法可以将 ID 索引完全从数组中弹出？

 var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options; console.log(names); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>

Answer 1

您可以使用map方法：

 var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options.map(o => o.option); console.log(names); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>

Answer 2

您可以遍历数组并创建另一个数组

 var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options.map(option => { return { id: option.option } }); console.log(names); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>

Answer 3

这是一个纯粹的 JavaScript任务。 它可以独立于 VueJS 或任何其他框架来解决。

一般来说，您可以应用两种方法（保留需要的内容或删除过时的内容）：

1. map ：将每个源元素转换为新的目标格式； 返回一个新数组
2. forEach和delete ：从原始数组中删除不需要的属性

let options: [
  {id:100, option:"1 - John Doe"},
  {id:200, option:"2 - Jane Doe"}
];

// to get a new (simple) array of strings
let strings = options.map(o => o.option);
console.log(strings);

// to get the same array with nested objects where property was removed
options.forEach(o => delete o.id);
console.log(options);

另请参阅： 删除数组中所有对象的属性