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

news/2024/7/11 1:18:21 标签: es6, 前端, ecmascript

前提:

有个场景,循环数组,根据每一项的值,往一个数组中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其实我常写已经习惯了 但是有个项目不支持es6es6代码没法提交会直接报错,我只能用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.niftyadmin.cn/n/5028750.html

相关文章

做期权卖方有资金限制吗?

做期权卖方一般是有经济实力的自然人或机构做的,而且必须开立保证金账户,万一买方要行权就会有较高的风险,当然,做期权卖方在交易方面对经验和行情的预判是有一定要求的,下文介绍做期权卖方有资金限制吗? 一…

《研发效能(DevOps)工程师(中级)认证》证书查询方式和路径丨IDCF

由国家工业和信息化部教育与考试中心颁发的职业技术证书,也是国内首个《研发效能(DevOps)工程师国家职业技术认证》,IDCF社区作为官方指定培训中心,邀请了多位业界知名专家讲师(部分专家讲师名单:王立杰、杜伟忠、陈老…

[DB]数据库--lowdb

[DB]数据库--lowdb lowdb基本应用获取数据数据变更写入文件 lodash的使用获取数据lodash方法使用数据变更写入文件 lowdb lowdb ,是一个基于文件存储的非关系型数据库 基于loadsh的轻量级数据库 可用于在json中存储数据,大小一般为0~200M的json文件 方便简单的数…

论如何在Android中还原设计稿中的阴影

每当设计稿上注明需要添加阴影时,Android上总是显得比较棘手,因为Android的阴影实现方式与Web和iOS有所区别。 一般来说阴影通常格式是有: X: 在X轴的偏移度 Y: 在Y轴偏移度 Blur: 阴影的模糊半径 Color: 阴影的颜色 何为阴影 但是在A…

【Unity】ShaderGraph应用(浮动气泡)

【Unity】ShaderGraph应用(浮动气泡) 实现效果 一、实现的方法 1.使用节点介绍 Position:获取模型的顶点坐标 Simple Noise:简单的噪声,用于计算顶点抖动 Fresnel Effect:菲涅耳效应,用于实现气泡效果 计算用节点 Add&…

VMware虚拟化基础操作实战(基于ESXi6.7 操作系统安装CentOS7.5)

任务要求 环境要求 1、PC终端一台(CPU 大于 8 核,内存大于8GB,Windows10 操作系统) 2、VM虚拟机(VMware workstation14 起) 3、安装在虚拟机上的操作系统(ESXi6.7 操作系统) 4、在…

【DRAM存储器四】DRAM存储器的架构演进-part1

👉个人主页:highman110 👉作者简介:一名硬件工程师,持续学习,不断记录,保持思考,输出干货内容 参考书籍:《Memory Systems - Cache, DRAM, Disk》 上篇文章我们分析了DRAM存储器的基本原理和现代DDR4的内部结构,我们知道现代DDR SDRAM有着越来越高的…

vue+element-ui 项目实战示例详解【目录】

vue 和 element是两个流行的前端即时,通常用于管理后台,PC等页面 能够快速构建美观的界面 1. vue2 介绍 Vue.js是一个流行的JavaScript框架,用于构建用户界面。它的版本分为Vue 2和Vue 3,而Element是一个基于Vue.js 2的UI组件库。…