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>
相关推荐
Cacciatore->1 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim1 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua3 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8883 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui