如何在jQuery中实现基于赋值运算符的赋值函数?优化现有赋值代码
实现jQuery环境下简洁的赋值语法
嘿,我来帮你搞定这个问题!你想要的那种简洁的、类似直接使用赋值运算符的写法完全可以实现,核心是让你的ObjDataSet实例能直接定位到目标行对象,然后直接给属性赋值就行。下面给你两种实用的方案:
方案1:用ES6 Proxy实现下标直接访问(推荐现代环境)
如果你的项目环境支持ES6(现在大部分浏览器和Node.js版本都支持),可以用Proxy来拦截实例的属性访问,让你直接通过dataSet[行号].属性名的形式赋值,完全符合你的预期:
function ObjDataSet () { this.header = ""; this.dataIdx = 0; this.DataRows = []; this.CountRow = 0; } // 封装一个创建实例的方法,用Proxy包装 ObjDataSet.create = function() { const instance = new ObjDataSet(); return new Proxy(instance, { get(target, prop) { // 判断访问的是否是数字行号(支持数字或数字字符串,比如1、"2") const rowNum = parseInt(prop); if (!isNaN(rowNum) && rowNum >= 1) { const arrIndex = rowNum - 1; // 如果目标行不存在,自动初始化一个空对象(可选,根据你的业务需求调整) if (!target.DataRows[arrIndex]) { target.DataRows[arrIndex] = {}; target.CountRow = target.DataRows.length; } // 返回目标行的对象引用,直接赋值会同步到DataRows数组中 return target.DataRows[arrIndex]; } // 非行号的属性,正常返回实例本身的属性 return target[prop]; } }); }; // 调用方式超级简洁! var dataSet = ObjDataSet.create(); dataSet[1].CUST_KIND = document.searchForm.CUST_KIND.value;
为什么这个可行?
数组里的对象是引用类型,你拿到DataRows里的对象引用后,直接修改它的属性,数组里的对象会自动同步更新——原代码里的this.DataRows[argIdx-1] = arrObj;其实是多余的,可以删掉。
方案2:用原型方法实现兼容式简洁赋值(兼容旧环境)
如果你的项目需要兼容不支持ES6的旧浏览器,可以给ObjDataSet原型添加一个row方法,通过方法调用定位行对象,语法同样简洁:
function ObjDataSet () { this.header = ""; this.dataIdx = 0; this.DataRows = []; this.CountRow = 0; } // 添加row方法,返回指定行的对象 ObjDataSet.prototype.row = function(rowNum) { const arrIndex = rowNum - 1; // 自动初始化不存在的行(可选) if (!this.DataRows[arrIndex]) { this.DataRows[arrIndex] = {}; this.CountRow = this.DataRows.length; } return this.DataRows[arrIndex]; }; // 调用方式 var dataSet = new ObjDataSet(); dataSet.row(1).CUST_KIND = document.searchForm.CUST_KIND.value;
这种写法兼容性拉满,所有支持ES5的环境都能正常运行,而且代码逻辑清晰,容易维护。
原代码的小优化
顺便提一句:你原来的NameString函数里,this.DataRows[argIdx-1] = arrObj;这一行是不必要的。因为arrObj是直接从this.DataRows里取出的对象引用,修改它的属性后,数组里的对象已经被更新了,不需要重新赋值回去。
内容的提问来源于stack exchange,提问作者April Lim
相关产品推荐
相关产品推荐

