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>
相关推荐
未来之窗软件服务5 分钟前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥1 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
星眠1 小时前
学习低代码编辑器第四天
javascript·面试
Hilaku1 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing2 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源
AndyGoWei2 小时前
Web Worker 简单使用,看这篇文章就够了
javascript
OEC小胖胖3 小时前
组件化(一):重新思考“组件”:状态、视图和逻辑的“最佳”分离实践
前端·javascript·html5·web
拾光拾趣录3 小时前
用 Web Worker 计算大视频文件 Hash:从“页面卡死”到流畅上传
前端·javascript
索西引擎3 小时前
HTML5 新特性:MutationObserver 详解
javascript