Vue3:使用解构赋值来读取对象里的键-值对(值也是对象)

一、前言

在Vue3中,想要读取一个对象的"键---值"对(值也是一个对象),数据格式如下:

javascript 复制代码
{
 1:{courseName: '课程1', study: '951526', visit: '3785553'},
 2:{courseName: '课程2', study: '181630', visit: '380830'},
 3:{courseName: '课程3', study: '56097', visit: '37046'},
 4:{courseName: '课程4', study: '8639', visit: '6843'},
 5:{courseName: '课程5', study: '64882', visit: '60939'}
}

二、实现

要读取上述类型的数据,可以使用entries() 方法以及解构语法来遍历对象的"键---值"对。

1、entries(obj)方法
  • 参数obj是一个对象
javascript 复制代码
Object.entries(obj)
2、核心代码
javascript 复制代码
// 解构赋值:读取数据
for (const [key, courseData] of Object.entries(data.value)) {
  // console.log(`${courseData.courseName}`);
  study.push(courseData.study);
  course.push(`${courseData.courseName}`);
  visit.push(`${courseData.visit}`);
}
  • 代码解析:

使用entries() 方法,通过键去读取对象的每一个值;然后根据值里面的每个键再读取子对象里面对应的内容:

  • 把读取到的内容分别添加到数组中,结果如下:
3、完整代码
javascript 复制代码
<template>
  <div></div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const data = ref();
    data.value = {
      1: { courseName: "课程1", study: "951526", visit: "3785553" },
      2: { courseName: "课程2", study: "181630", visit: "380830" },
      3: { courseName: "课程3", study: "56097", visit: "37046" },
      4: { courseName: "课程4", study: "8639", visit: "6843" },
      5: { courseName: "课程5", study: "64882", visit: "60939" },
    };

    var course = [];
    var study = []; 
    var visit = []; 

    // 解构赋值:读取数据
    for (const [key, courseData] of Object.entries(data.value)) {
      // console.log(`${courseData.courseName}`);
      study.push(courseData.study);
      course.push(`${courseData.courseName}`);
      visit.push(`${courseData.visit}`);
    }
    console.log("course:", course);
    console.log("study:", study);
    console.log("visit:", visit);
  },
};
</script>
相关推荐
li357422 分钟前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
快乐是Happy26 分钟前
分享一个非常实用的防止重复提交操作
前端·javascript
可子是我的小猫28 分钟前
【JS】模块(二)
javascript
云枫晖28 分钟前
JS核心知识-执行上下文
前端·javascript
麦当_28 分钟前
TanStack Router File-Based Router Mask 完全指南
前端·javascript·设计模式
珍珠奶茶爱好者29 分钟前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy30 分钟前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js
烛阴1 小时前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
三脚猫的喵1 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
炒毛豆2 小时前
移动端响应式px转换插件PostCSS的使用~
前端·javascript·postcss