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

news2024/12/25 9:41:55

前提:

有个场景,循环数组,根据每一项的值,往一个数组中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}
)

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

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

相关文章

【pwn入门】基础知识

声明 本文是B站你想有多PWN和星盟安全学习的笔记,包含一些视频外的扩展知识。 工具和命令 常见的工具 pwntools安装checksec安装pwndbg的安装和gdb使用ubuntu没有使用全部磁盘空间 sudo lvextend -l 100%FREE /dev/mapper/ubuntu--vg-ubuntu--lv sudo resize2f…

Vue中一键批量注册全局组件

文件目录如下 1. component文件夹中编写所有的公共组件 注意:之后一键注册的全局组件名就是每个公共组件(xxx.vue)文件的文件名 xxx 2. plugins/components.js中批量注册组件 import Vue from "vue"let requireFile require.con…

关于阿里云服务器Ubuntu编译jdk8中遇到的坑及解决方案

关于阿里云服务器Ubuntu系统安装jdk8中遇到的坑及解决方案 记录一下困扰了很多天、到处查资料最后终于成功安装的过程 关于阿里云服务器无法登录的问题 基本反馈是这样的: 如果你添加了ip之后仍然登不进去,有一种方法是直接从第三个选项进去登录之后修…

十天学完基础数据结构-第一天(绪论)

1. 数据结构的研究内容 数据结构的研究主要包括以下核心内容和目标: 存储和组织数据:数据结构研究如何高效地存储和组织数据,以便于访问和操作。这包括了在内存或磁盘上的数据存储方式,如何将数据元素组织成有序或无序的集合&…

浅谈C++|多态篇

1.多态的基本概念 多态是C面向对象三大特性之一多态分为两类 1. 静态多态:函数重载和运算符重载属于静态多态,复用函数名 2.动态多态:派生类和虚函数实现运行时多态 静态多态和动态多态区别: 静态多态的函数地址早绑定–编译阶段确定函数地址 动态多态的函数地址晚绑…

浅谈C++|类的继承篇

引子: 继承是面向对象三大特性之一、有些类与类之间存在特殊的关系,例如下图中: 我们发现,定义这些类时,下级别的成员除了拥有上一级的共性,还有自己的特性。 这个时候我们就可以考虑利用继承的技术,减少…

Learn Prompt-人工智能基础

什么是人工智能?很多人能举出很多例子说这就是人工智能,但是让我们给它定义一个概念大家又觉得很难描述的清楚。实际上,人工智能并不是计算机科学领域专属的概念,在其他学科包括神经科学、心理学、哲学等也有人工智能的概念以及相…

机器学习第六课--朴素贝叶斯

朴素贝叶斯广泛地应用在文本分类任务中,其中最为经典的场景为垃圾文本分类(如垃圾邮件分类:给定一个邮件,把它自动分类为垃圾或者正常邮件)。这个任务本身是属于文本分析任务,因为对应的数据均为文本类型,所以对于此类任务我们首先…

Jprofiler的使用查看oom

一、安装 idea安装插件 安装客户端 链接 IDEA配置Jprofiler执行文件 二、产生oom import java.util.ArrayList; import java.util.List;//测试代码 public class TestHeap {public static void main(String[] args) {int num 0;List<Heap> list new ArrayList&l…

【深度学习实验】线性模型(一):使用NumPy实现简单线性模型:搭建、构造损失函数、计算损失值

目录 一、实验介绍 二、实验环境 三、实验内容 0. 导入库 1. linear_model函数 2. loss_function函数 3. 定义数据 4. 调用函数 一、实验介绍 使用Numpy实现 线性模型搭建构造损失函数进行模型前向传播并计算损失值 二、实验环境 conda create -n DL python3.7 cond…

Learn Prompt-什么是ChatGPT?

ChatGPT&#xff08;生成式预训练变换器&#xff09;是由 OpenAI 在2022年11月推出的聊天机器人。它建立在 OpenAI 的 GPT-3.5 大型语言模型之上&#xff0c;并采用了监督学习和强化学习技术进行了微调。 ChatGPT 是一种聊天机器人&#xff0c;允许用户与基于计算机的代理进行对…

LVS+Haproxy

LVSHaproxy 一、Haproxy简介1.1、Haproxy应用分析1.2、Haproxy的特性1.3、常见负载均衡策略1.4、LVS、Haproxy、Nginx区别1.5、 Haproxy的优点1.6、常见的Web集群调度器 二、Haproxy部署实例四、日志定义优化 一、Haproxy简介 Haproxy 是一个使用C语言编写的自由及开放源代码软…

ES6中新增加的Proxy对象及其使用方式

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Proxy对象的基本概念Proxy对象的主要陷阱&#xff08;Traps&#xff09; ⭐ 使用Proxy对象⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来…

Hugging Face使用Stable diffusion Diffusers Transformers Accelerate Pipelines

Diffusers A library that offers an implementation of various diffusion models, including text-to-image models. 提供不同扩散模型的实现的库&#xff0c;代码上最简洁&#xff0c;国内的问题是 huggingface 需要翻墙。 Transformers A Hugging Face library that pr…

log4j2漏洞复现

log4j2漏洞复现 漏洞原理 log4j2框架下的lookup查询服务提供了{}字段解析功能&#xff0c;传进去的值会被直接解析。例如${sys:java.version}会被替换为对应的java版本。这样如果不对lookup的出栈进行限制&#xff0c;就有可能让查询指向任何服务&#xff08;可能是攻击者部署…

JavaScript-箭头函数

es6的箭头函数具体使用 es6之后提出了箭头函数 更加简洁方便 注意 &#xff1a; 特点:只有一个形参可以省略括号 大括号是否可以省略&#xff1f; 是 只有一句代码的时候可以省略 具体看代码演示&#xff1a; 代码 <!DOCTYPE html> <html lang"en"&…

Python 图形化界面基础篇:处理鼠标事件

Python 图形化界面基础篇&#xff1a;处理鼠标事件 引言 Tkinter 库简介步骤1&#xff1a;导入 Tkinter 模块步骤2&#xff1a;创建 Tkinter 窗口步骤3&#xff1a;创建一个 Canvas 画布步骤4&#xff1a;处理鼠标事件步骤5&#xff1a;启动 Tkinter 主事件循环 完整示例代码代…

解决中国科大 USTC 邮箱系统的超大附件上传的邮箱控件安装问题

USTC邮箱系统上传超过 48M 的附件的步骤&#xff1a; 从文件中转站上传文件&#xff0c;会提示下载邮箱控件 cmplugin_setup.exe &#xff0c;默认安装C盘即可 2. 安装好之后依然无法上传超大文件&#xff0c;因为只有 IE 浏览器支持该功能&#xff0c;所以可以使用 Edge 浏览…

timer trigger function

创建&#xff08;使用vscode&#xff09; 选择Timer trigger 命名 设置多久触发一次&#xff08;该语句是5分钟一次&#xff09; 创建完成 在下面直接编辑想要运行的代码。

【计算机网络】75 张图详解:网络设备、网络地址规划、静态路由(万字长文)

75 张图详解&#xff1a;网络设备、网络地址规划、静态路由 1.网络设备1.1 交换机1.2 路由器 2.网络地址规划2.1 IP 地址2.2 分类地址2.3 子网掩码2.4 无类地址2.5 子网划分2.5.1 示例一2.5.2 示例二 2.6 超网合并 3.静态路由3.1 路由表3.2 直连路由3.3 静态路由3.4 默认路由3.…