【前端】前端数据转化为后端数据

news2024/11/27 18:39:17

【前端】前端数据转化为后端数据

  • 写在最前面
    • 格式化数组
      • 代码解释
      • hasOwnProperty是什么?


请添加图片描述

🌈你好呀!我是 是Yu欸
🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~
🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长!

写在最前面

如题,我希望【前端】前端数据转化为后端数据。

格式化数组

  // 初始化 dataList 数组
  let dataList = [];
  // 遍历 processedData 对象的每个属性
  for (let key in processedData) {
    if (processedData.hasOwnProperty(key) && fieldToDataType[key]) {
      // 根据映射表获取 dataType
      let dataType = fieldToDataType[key];
      // 将转换后的数据添加到 dataList
      dataList.push({
        dataType: dataType,
        value: processedData[key],
      });
    }
  }

代码解释

这段代码,其主要功能是将一个名为 processedData 的对象中的数据转换为一个新的数组 dataList。转换的依据是一个映射表 [fieldToDataType],该映射表定义了 processedData 对象的属性名(key)与一个称为 dataType 的数字之间的对应关系。下面是这段代码的逐步解释:

  1. 使用 for...in 循环遍历 processedData 对象中的每个属性(key)。

  2. 对于每个属性,首先使用 hasOwnProperty 方法检查 processedData 是否自身拥有该属性,而不是从其原型链上继承的。这是为了确保只处理对象自身的属性。

  3. 接着,检查映射表 [fieldToDataType]中是否存在当前属性名(key)的映射。这一步确保只处理那些在映射表中定义了对应关系的属性。

  4. 如果上述两个条件都满足,那么从映射表 [fieldToDataType]中获取当前属性名对应的 dataType 值。

  5. 创建一个新的对象,包含两个属性:dataType 和 [value]是 processedData 对象中当前属性的值。

  6. 将这个新创建的对象添加到 dataList 数组中。

通过这个过程,原始的 processedData 对象被转换成了一个新的数组 dataList,其中每个元素都是一个包含 dataType 和 [value]的对象。这种转换使得数据更加结构化,便于后续处理或展示。

hasOwnProperty是什么?

hasOwnProperty 是 JavaScript 中的一个方法,用于检查对象自身(而非其原型链上)是否具有指定的属性。它是 Object.prototype 的一个方法,可以被所有的对象继承使用。这个方法接受一个字符串参数,即要检查的属性名,返回一个布尔值,表示对象是否具有该属性。

在使用 for...in 循环遍历对象的属性时,这个方法通常被用来确保属性是该对象自身的属性,而不是从原型链上继承下来的。这是因为 for...in 循环会遍历对象自身的所有可枚举属性以及它原型链上的可枚举属性。

示例代码:

const obj = {
  ownProperty: 'value'
};

console.log(obj.hasOwnProperty('ownProperty')); // 输出:true
console.log(obj.hasOwnProperty('toString')); // 输出:false,因为toString是从原型链上继承的

在这个例子中,obj 对象有一个自身的属性 ownProperty,所以 obj.hasOwnProperty('ownProperty') 返回 true。而 toString 方法是所有对象从 Object.prototype 继承的,所以 obj.hasOwnProperty('toString') 返回 false


hello,我是 是Yu欸 。如果你喜欢我的文章,欢迎三连给我鼓励和支持:👍点赞 📁 关注 💬评论,我会给大家带来更多有用有趣的文章。
原文链接 👉 ,⚡️更新更及时。

欢迎大家添加好友交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2192624.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

k8s实战-3

k8s实战-3 一、Ingress1.安装2.测试 二、存储抽象1.环境准备2.PV和PVC3.ConfigMap4.Secret 总结 一、Ingress Ingress 类似于一个“网关”,它负责将外部 HTTP 请求路由到集群内的服务。你可以把它想象成一个“交通警察”,根据请求的 URL 和路径&#xf…

无锡自闭症康复寄宿学校:每天的康复方式揭秘

无锡自闭症康复寄宿学校的启示:揭秘广州星贝育园的日常康复方式 在自闭症儿童的教育与康复领域,每一所学校都在用自己的方式探索着前行的道路。无锡的自闭症康复寄宿学校以其独特的康复方式和显著的效果,为众多家庭带来了希望。而在广州&…

jvisualvm学习

系列文章目录 JavaSE基础知识、数据类型学习万年历项目代码逻辑训练习题代码逻辑训练习题方法、数组学习图书管理系统项目面向对象编程:封装、继承、多态学习封装继承多态习题常用类、包装类、异常处理机制学习集合学习IO流、多线程学习仓库管理系统JavaSE项目员工…

前端工程化 - Vue

环境准备 Vue-cli是Vue官方提供的一个脚手架,用户快速生成一个Vue的项目模板。 Vue-cli提供了如下功能: 统一的目录结构本地调试热部署单元测试集成打包上线 需要安装Node.js 安装Vue-cli npm install -g vue/cli通过vue --version指令查看是否安装成…

蓝桥杯省赛真题打卡day4

[蓝桥杯 2013 省 A] 大臣的旅费 题目描述 很久以前,T 王国空前繁荣。为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市。 为节省经费,T 国的大臣们经过思考,制定了一套优秀的修建方案&am…

模电中二极管,三极管和电容的应用

🏆本文收录于《全栈Bug调优(实战版)》专栏,主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&am…

使用 Python 遍历文件夹

要解决这个问题,使用 Python 的标准库可以很好地完成。我们要做的是遍历目录树,找到所有的 text 文件,读取内容,处理空行和空格,并将处理后的内容合并到一个新的文件中。 整体思路: 遍历子目录&#xff1…

三维模型点云化工具V1.0使用介绍:将三维模型进行点云化生成

三维软件绘制的三维模型导入之后,可以生成点云,用于替代实际的激光扫描过程,当然,主要是用于点云算法的测试和验证,没法真正模拟扫描的效果,因为太过于理想化了。 功能介绍 将三维软件绘制的三维模型变成…

一个月学会Java 第3天 对类的深刻认识

Day3 对类的深刻认识 第一章 方法 在Day2的时候已经浅浅的认识过类,但是还是不够深刻,我们现在来深刻的认识一下类是什么和他的结构,首先在认识类的结构之前我们需要再认识和了解这么一个东西,他就是——方法 方法(method)也叫函…

iMazing只能苹果电脑吗 Win和Mac上的iMazing功能有区别吗

在当今数字时代,管理和备份手机数据变得越来越重要。无论是转移照片、备份短信,还是管理应用程序,一个强大的工具可以大大简化这些操作。iMazing作为一款备受好评的iOS设备管理软件,已经成为许多用户的选择。但是,许多…

用manim实现Gram-Schmidt正交化过程

在线性代数中,正交基有许多美丽的性质。例如,由正交列向量组成的矩阵(又称正交矩阵)可以通过矩阵的转置很容易地进行反转。此外,例如:在由彼此正交的向量张成的子空间上投影向量也更容易。Gram-Schmidt过程是一个重要的算法&#…

GESP C++三级样题卷

(满分:100 分 考试时间:90 分钟) 一、单选题(每题 2 分,共 30 分) 1.下列关于负数的原码、反码、补码的描述中,正确的是( ) A 原码和反码互为按位取反(符号位除外&…

[ComfyUI]Flux:太强了!任意扩图神器,小红书极致逼真风格出游打卡写实风

随着人工智能技术的不断发展,图像生成与反推技术已经成为了AI领域的一大热点。今天,我们就来为大家详细介绍一款由ComfyUI团队开发的超强图像反推工具——Flux,以及如何使用它实现任意扩图和极致逼真风格出游打卡写实风。 一、Flux&#xff…

k8s-集群部署1

k8s-集群部署1 一、基础环境准备二、docker环境准备三、k8s集群部署1.kubeadm创建集群2.使用kubeadm引导集群 总结 一、基础环境准备 首先,需要准备三个服务器实例,这里我使用了阿里云创建了三个实例,如果不想花钱,也可以在VM上创…

第十一章 缓存之更新/穿透/雪崩/击穿

目录 一、什么是缓存 二、缓存更新策略 2.1. 缓存主动更新策略 2.1.1. Cache Aside模式(主流)‌ 2.1.2. Read/Write Through模式‌ 2.1‌.3. Write Behind模式‌ 2.1.4. 总结 三、缓存穿透 四、缓存雪崩 五、缓存击穿 5.1. 互斥锁实现 5.1.1…

好用且不伤眼镜的超声波清洗机排名!谁才是清洁小能手?

对于经常佩戴眼镜的人来说,眼镜的日常清洁保养极为关键。传统清洁方式可能导致镜片刮花和残留污渍,鉴于此,眼镜专用的超声波清洗机应运而生,利用超声振动技术深入微细缝隙,彻底扫除污垢与油脂,保护镜片免受…

计算机编程入门先学什么最好?零基础入门到精通,收藏这篇就够了

看完其他知友的回答,我认为他们的观点过于局限,并没有真正切中问题的要害。 我们不妨换个角度,站在更高一层来看这个问题「计算机编程入门先学什么最好?」 计算机入门最应该学的是 Linux,而非任何的编程语言。 这篇文…

A_H_README_TO_RECOVER勒索恢复---惜分飞

有客户mysql数据库被黑(业务数据库被删除),创建了一个A_H_README_TO_RECOVER库 [rootwww.xifenfei.com ~]# mysql -uroot -pxxxxx Warning: Using a password on the command line interface can be insecure. Welcome to the MySQL monitor. Commands end with ; …

站岗放哨树形dp

前言&#xff1a;好久没有写树上dp了&#xff0c;这儿题目还是挺有意思的 题目地址 #include<bits/stdc.h> #include<iostream> using namespace std;//#define int long long int n; const int N (int)1e510; int e[N],ne[N],h[N],idx 0; int dp[2][N];void add…

【笔记】神领物流Day1.1.20权限管家

传智权限管家是一个通用的权限管理中台服务&#xff0c;在神领物流项目中&#xff0c;我们使用权限系统管理企业内部员工&#xff0c;比如&#xff1a;快递员、司机、管理员等。 在权限管家中可以管理用户&#xff0c;管理后台系统的菜单&#xff0c;以及角色的管理。 权限管家…