js创建动态key的对象ES6和ES5的方法

2023-09-13 09:38:41

前提:

有个场景,循环数组,根据每一项的值,往一个数组中push一个新对象,对象的key不同要从数组中获取

 

情况解析:push没有什么问题,问题就是创建一个动态key的对象。下面就说一下如何以参数为key的条件下创建对象

错误写法:

var key = 'name';
var obj = { key: '张三'}

这样并不能得到想要的结果,创建对象时会以为 key 本身就是你的 键值 给你看一下结果:

当然你用 obj = { "key": "张三"}也是不对的 得到的结果一下 不卖关子了 直接上结果

ES6写法:
var key = 'age'
var obj = { 
    [key] : '18岁'
}
console.log(obj) // { age: '18岁'}

原理的es6解构赋值

ES5写法:

为什么要写es5写法呢 es6其实我常写已经习惯了 但是有个项目不支持es6 写es6代码没法提交会直接报错,我只能用es5的方法写一下了

这要用到es5中的一个对象方法:Object.defineProperty()定义新属性或修改原有的属性

Object.defineProperty(obj,prop,descriptor)

obj:必需。目标对象(在上个)

prop:必需。需定义或修改属性的名字

descriptor:必需。目标属性所拥有的特性

  • value:设置属性的值,默认为underfined
  • writable:值是否可以重写。true/false 默认为false
  • enumerable:目标属性是否可以被枚举。true/false 默认为false
  • configurable:目标属性是否可以被删除或是否可以再次修改特性 。true/false 默认为false

写一个最简单的应用:

var obj = {}
Object.defineProperty(obj, 'name', { value: '张三'} )
console.log(obj) //{name:'张三'}

如果要创建一个动态key的对象 就要先定义一个key:

var key = 'age'
var obj = {} 
Object.defineProperty(obj, key, {value: '18岁'})
console.log(obj) // { age: '18岁'} 

 只要prop传入一个变量,就实现了,但是现在还有一个问题 上面的属性默认是false,这会使你创建的对象只可读,无法枚举会使你无法用循环或者Object.keys()方法
所以建议将上面的几个属性的特性一起设置

最终版:

var key = 'age'
var obj = {} 
Object.defineProperty(obj, key, 
{value: '18岁',,enumerable: true,writable:true,configurable: true}
)

更多推荐

K8S的CKA考试环境和题目

CKA考试这几年来虽然版本在升级,但题目一直没有大的变化,通过K8S考试的方法就是在模拟环境上反复练习,通过练习熟悉考试环境和考试过程中可能遇到的坑。这里姚远老师详细向大家介绍一下考试的环境和题目,需要详细资料的同学请在文章后面留言。祝大家考试成功。K8S的考试环境CKA考试环境由三台虚拟机组成,这三台虚拟机姚远老师已

3.k8s dashboard设置域名登录案例(ingress版本为1.3.1)

文章目录前言一、安装ingress1.1下载ingress部署文件1.2查看是否安装成功二、配置dashboard域名映射2.1.在windows和linux添加上域名映射2.2生成tls证书2.3新增ingress配置2.3验证总结前言前面搭建了集群,配置了账号密码登录,现在配置k8sdashboard的域名登录,这

Augmented Large Language Models with Parametric Knowledge Guiding

本文是LLM系列文章,针对《AugmentedLargeLanguageModelswithParametricKnowledgeGuiding》的翻译。参数知识引导下的增强大型语言模型摘要1引言2相关工作3LLM的参数化知识引导4实验5结论摘要大型语言模型(LLM)凭借其令人印象深刻的语言理解和生成能力,显著提高了自

GPT4RoI: Instruction Tuning Large Language Model on Region-of-Interest

在图像-文本对上调整大语言模型(LLM)的指令已经实现了前所未有的视觉-语言多模态能力。然而,他们的视觉语言对齐仅建立在图像级别上,缺乏区域级别对齐限制了他​​们在细粒度多模态理解方面的进步。在本文中,我们提出对感兴趣区域进行指令调整。关键设计是将边界框重新表述为空间指令的格式。将空间指令和语言嵌入提取的视觉特征的交错

计算机网络基础知识(非常详细)

1.网络模型1.1OSI七层参考模型七层模型,亦称OSI(OpenSystemInterconnection)参考模型,即开放式系统互联,是网络通信的标准模型。一般称为OSI参考模型或七层模型。它是一个七层的、抽象的模型体,不仅包括一系列抽象的术语或概念,也包括具体的协议。物理层:负责传输原始的比特流,数模转换、模数转

Postman应用——Collection、Folder和Request

文章目录Collection新建CollectionCollection重命名保存Request到Collection在Collection下创建Request删除CollectionFolder新建FolderFolder重命名保存Request到Folder在Folder下创建Request在Folder下创建Fo

MySQL数据库详解 一:安装MySQL数据库及基本管理

文章目录1.数据库的基本概念1.1数据库的组成1.1.1数据1.1.2表1.1.3数据库1.2当前主流数据库及其特点1.3数据库类型1.3.1关系数据库1.3.1.1关系数据库的组成1.3.1.2非关系数据库2.安装MySQL2.1yum安装2.2编译安装MySQL2.2.1前置准备2.2.2编译安装2.2.3修改my

成集云 | 用友U8集成聚水潭ERP(用友U8主管供应链)| 解决方案

源系统成集云目标系统方案介绍用友U8是一套企业级的解决方案,可满足不同的制造、商务模式下,不同运营模式下的企业经营管理。它全面集成了财务、生产制造及供应链的成熟应用,并延伸客户管理至客户关系管理(CRM),以及零售、分销领域实现了全面整合。聚水潭是一款以SaaSERP为核心,集多种商家服务为一体的SaaS协同平台,为全

Flink-CDC 抽取SQLServer问题总结

Flink-CDC抽取SQLServer问题总结背景flink-cdc抽取数据到kafka中,使用flink-sql进行开发,相关问题总结flink-cdc配置SQLServercdc参数1.创建CDC使用的角色,并授权给其查询待采集数据数据库--a.创建角色createroleflink_role;--b.授权给角色

保证接口幂等性

什么是幂等性幂等性是系统服务对外一种承诺,承诺只要调用接口成功,外部多次调用对系统的影响是一致的。声明为幂等的服务会认为外部调用失败是常态,并且失败之后必然会有重试。什么情况下需要幂等以SQL为例:SELECTcol1FROMtab1WHERcol2=2,无论执行多少次都不会改变状态,是天然的幂等。UPDATEtab1

什么是 BSD 协议?

BSD开源协议是一个给于使用者很大自由的协议。可以自由的使用,修改源代码,也可以将修改后的代码作为开源或者专有软件再发布。当你发布使用了BSD协议的代码,或者以BSD协议代码为基础做二次开发自己的产品时,需要满足三个条件:如果再发布的产品中包含源代码,则在源代码中必须带有原来代码中的BSD协议。如果再发布的只是二进制类

热文推荐