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

前提:

有个场景,循环数组,根据每一项的值,往一个数组中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.hqwc.cn/news/112339.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IP风险查询:抵御DDoS攻击和CC攻击的关键一步

随着互联网的普及,网络攻击变得越来越普遍和复杂,对企业和个人的网络安全构成了重大威胁。其中,DDoS(分布式拒绝服务)攻击和CC(网络连接)攻击是两种常见且具有破坏性的攻击类型,它们…

【软考复习系列】计算机网络易错知识点记录

参考文章:图解路由器:这玩意儿能连接全世界的网络? - 知乎 (zhihu.com) 宏内核和微内核 宏内核应该叫单内核或者单核。在这种单核的设计中,内核是一个大的整体,所有内核服务都运行在一个地址空间中,函数之…

WPF中DataGrid控件绑定数据源

步骤 创建数据源:首先,我们需要创建一个数据源,可以是一个集合(如List、ObservableCollection等),也可以是一个DataTable对象。数据源中的每个元素代表一行数据。 设置DataGrid的ItemsSource属性&#xff…

【ELFK】之消息队列kafka

一、kafka的定义 Kafka 是一个分布式的基于发布/订阅模式的消息队列(MQ,Message Queue),主要应用于大数据实时处理领域。Kafka 是最初由 Linkedin 公司开发,是一个分布式、支持分区的(partition&#xff0…

华为云云耀云服务器L实例评测|Git 私服搭建指南

前言 本文为华为云云耀云服务器L实例测评文章,测评内容是 云耀云服务器L实例 Git 私有服务器搭建指南 系统配置:2核2G 3M Ubuntu 20.04 我们平时在使用代码托管服务的时候,可能某些代码托管平台对成员有限制,或是由于内容原因会对…

无涯教程-JavaScript - PI函数

描述 PI函数返回数字3.14159265358979,数学常数pi,精确到15位数字。 语法 PI ()争论 PI函数语法没有参数。 适用性 Excel 2007,Excel 2010,Excel 2013,Excel 2016 Example JavaScript 中的 PI函数 - 无涯教程网无涯教程网提供描述PI函数返回数字3.14159265358979,数学常…

python爬虫爬取电影数据并做可视化

思路: 1、发送请求,解析html里面的数据 2、保存到csv文件 3、数据处理 4、数据可视化 需要用到的库: import requests,csv #请求库和保存库 import pandas as pd #读取csv文件以及操作数据 from lxml import etree #解析html库 from …

万字长文总结检索增强 LLM

连接:https://zhuanlan.zhihu.com/p/655272123 ChatGPT 的出现,让我们看到了大语言模型 ( Large Language Model, LLM ) 在语言和代码理解、人类指令遵循、基本推理等多方面的能力,但幻觉问题 Hallucinations[1] 仍然是当前大语言模型面临的一…

【陕西理工大学-数学软件实训】数学实验报告(8)(数值微积分与方程数值求解)

目录 一、实验目的 二、实验要求 三、实验内容与结果 四、实验心得 一、实验目的 1. 掌握求数值导数和数值积分的方法。 2. 掌握代数方程数值求解的方法。 3. 掌握常微分方程数值求解的方法。 二、实验要求 1. 根据实验内容,编写相应的MATLAB程序&#xff0c…

时序预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元时间序列预测

时序预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元时间序列预测 目录 时序预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元时间序列预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元时间序列预测。…

图论第一天|深度优先搜索理论基础、广度优先搜索理论基础、797.所有可能的路径

深度优先搜索理论基础 文档讲解 : 代码随想录 - 深度优先搜索理论基础Hello 算法 9.3 图的遍历 状态:开始学习。 dfs(深度优先搜索)与bfs(广度优先搜索)区别 dfs是可一个方向去搜,不到黄河不回…

解决Java应用程序中的SQLSyntaxErrorException:Unknown database错误

目录 问题背景 解决方案 问题背景 今天遇见一个这个问题,解决后发出来分享一下 MySQL数据库连接错误:Unknown database bookmanagement的修复方法;MySQL错误消息分析:Unknown database异常的解决 java.sql.SQLSyntaxErrorExce…