如何根据一个字符串去查找同名的对象?

本文分享了一种在项目中利用ECharts动态加载不同图表的方法。通过将图表配置信息存储在按钮的自定义属性中,并结合JavaScript的属性访问表达式技巧,实现了根据不同按钮点击加载对应图表的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在做项目的时候,遇到一个情景:有多个按钮,点击不同的按钮实现添加不同的echars图表。然后在一开始的时候我采用的是给每个按钮设定不同的class。再根据选择器绑定事件,调用方法,实际上方法都一样,但是就有一个setOption ( option) 中的这个option不同就像下图那样


(至于为什么外面选择器用的jQuery 里面的却用原生的……咳咳,因为不知道为什么echart用jQuery选择器会报错,而且jQuery在添加事件,增删class方面实在是太方便了)


后来经过交流群里面的大神指点,把option的划分放在标签自定义属性中,然后根据属性值去调用不同的option。一时我感觉前方万丈光芒,豁然开朗,刷刷刷砍掉大部分代码,改成这样:


兴高采烈一运行,懵逼了,报错了! 然后本能的console 一下typeof  发现数据类型是string。第一反应是想着怎么去将字符串转为对象。想到了eval() ,想到了JSON.parse()

因为我记得有一句话叫eval() is evil 所以我就先试试JSON.parse() ,但是不行;又用了eval() 还是不行;但是数据类型明确是转换过来了,成为了 Object;

为什么呢?

因为他们虽然同名同姓,但不是同一个对象啊!


然后,回到起点了,怎么通过这个字符串去匹配同名的对象呢?

(重点来了)

突然想起来了一个知识点: 属性访问表达式!

访问一个属性,有两种格式:

1、也是最常用的一种   表达式.标识符

2、本文要介绍的用法  表达式[表达式]

用书上的话来说:

方括号内是另一个表达式(这种方法适用于对象和数组),指定要访问的属性的名称或者代表要访问数组元素的索引。这种语法看起来更像是数组,只是这个数组元素是通过字符串索引而不是数字索引。在这里,会计算方括号内的表达式的值并且转换成字符串。{ 所以这大概就是可以实现根据字符串去查找同名对象的原因了吧 }犀牛书第六版6.2中提到,方括号内的表达式必须返回字符串或者返回一个可以转换为字符串的值。
所以在这里使用字符串是合法的,因为本来就是要求可以被转换为字符串的值。
所以就能够实现通过字符串去查找同名的对象

ps: 博客生手,写的不好,请多多见谅,有写的错误的地方请一定指正,谢谢! 原创手打,转载注明

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值