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>
相关推荐
前端大白话2 分钟前
一文搞懂JavaScript中Object.getPrototypeOf()与Reflect.getPrototypeOf()的区别及使用场景
前端·javascript
前端大白话3 分钟前
前端秘籍:利用 HTML <video> 标签解锁视频画中画功能
前端·javascript
潜心专研的小张同学18 分钟前
Vue3中的slot插槽知识总结,看这一篇就够了!
前端·vue.js
Moment27 分钟前
TypeScript 是怎么工作的?一文带你深入编译器内部流程 ✨✨✨
前端·javascript·typescript
拖孩1 小时前
【Nova UI】十、打造组件库第一个组件-图标组件(下):从.svg 到 SVG Vue 组件的高效蜕变✨
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
一张图讲清楚:Manus的技术架构
前端·javascript·面试
独立开阀者_FwtCoder1 小时前
【CSS】2327- CSS view():JavaScript 滚动动画的终结
前端·javascript·github
盛夏绽放1 小时前
uni-app 状态管理深度解析:Vuex 与全局方案实战指南
前端·javascript·uni-app
小纯洁w2 小时前
Vue和React项目中,统一监听页面错误需要结合框架提供的错误处理机制与JavaScript原生方法
javascript·vue.js·react.js
Hopebearer_2 小时前
理解 React 的 useEffect
前端·javascript·react.js·前端框架