Vue从数组中取出数据并以key-value结构存储

本文描述了如何在Vue.js应用中处理后端传来的响应式数据,通过Object.values和map方法从包含__ob__属性的对象中提取id和name属性,转化为key-value结构的新数组。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

__ob__ : Observer {value: Array(36), shallow: false, mock: false, dep: Dep, vmCount: 0}
# 我的从后端传给前端的data是这样的格式
const data = [
            {id:"001",name:"张三",age:18},
            {id:"002",name:"李四",age:20},
            {id:"003",name:"王五",age:22},
            __ob__: Observer {value: Array(36), shallow: false, mock: false, dep: Dep, vmCount: 0}
            ]

我想将其中的 id和name属性取出来,并以key-value结构放入集合中。

由于这种后端传过来的数据对象是Vue.js的响应式对象,并且包含一个名为__ob__的属性。这个属性是Vue.js内部使用的,用于实现数据的响应式追踪和观察。因此不能直接使用。

要提取schemes对象中每条数据的idname属性,并以key-value结构保存到一个新的数组中,需要先使用Object.values()方法来获取schemes对象中的所有值,并使用map()函数来遍历每个值,提取所需的属性。

const schemesArray = Object.values(schemes); 
const result = schemesArray.map(item => { 
            return { key: item.id, value: item.name }; 
});

### 提取数组内每个对象的 `id` 属性 在 Vue3 中,可以通过 **计算属性** 或者自定义方法来实现从数组中提取每个对象的 `id` 属性。以下是两种常见的解决方案: #### 方法一:使用计算属性 计算属性是一种基于其依赖自动更新的方式,在此场景下非常适合用于处理数据并返回新的结果。 假设有一个名为 `items` 的数组,其中每个对象都有一个 `id` 属性,则可以在计算属性中通过 JavaScript 的 `map()` 方法提取所有的 `id` 值[^2]。 ```javascript export default { data() { return { items: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' } ] }; }, computed: { itemIds() { return this.items.map(item => item.id); // 使用 map 提取 id 属性 } } }; ``` 在此示例中,`itemIds` 是一个计算属性,它会随着 `items` 数组的变化而自动更新[^3]。 --- #### 方法二:使用方法 如果只需要临时获取一次 `id` 列表而不希望创建持久化的计算属性,可以使用方法代替。 ```javascript export default { data() { return { items: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' } ] }; }, methods: { extractIds() { return this.items.map(item => item.id); // 动态提取 ids } } }; ``` 在这个例子中,当调用 `extractIds` 方法时,它将返回当前 `items` 数组中的所有 `id` 值。 --- #### 组合状态管理 (可选) 如果你正在使用 Vuex 或 Pinia 进行状态管理,也可以利用组合式 API 来实现类似的逻辑。例如,在 Pinia 中可以这样操作[^4]: ```javascript import { defineStore } from 'pinia'; import { ref, computed } from 'vue'; export const useItemsStore = defineStore('items', () => { const items = ref([ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' } ]); const itemIds = computed(() => items.value.map(item => item.id)); // 计算属性提取 ids return { items, itemIds }; // 导出 state 和 getter }); ``` 在这种情况下,`itemIds` 将作为 store 的 getters 自动维护最新的 `id` 列表。 --- ### 总结 无论是通过计算属性还是方法,都可以轻松地从数组中提取每个对象的 `id` 属性。推荐优先考虑计算属性,因为它能够缓存结果并在依赖项发生变化时高效地重新求值。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值