好资源导航 » 文章资讯 » js 对象使用的小技巧实例分析

js 对象使用的小技巧实例分析

2023-08-09 16:03:03 78

本文实例讲述了js对象使用的小技巧。分享给大家供大家参考，具体如下：

js中中，Object，Array,Function等都属于引用类型，他们的变量名都是指向对象的指针。

这样就有一个好处，当处理一个复杂json树的时候，想要单独改变其中某一个子对象属性时，不需要根据对象id遍历查找到这个对象了，而是可以直接通过事件方式将这个对象通过参数的方式赋值给一个专属变量，这个变量就指向这个对象，这样就可以随意改变对象属性了。改变这个变量对应的对象，整个json树中的这个对象也被相应的改变。

下面举个栗子，有点类似于双向绑定，点击哪个对象就可以单独修改这个对象，修改后会在json树中更新数据












姓名：



年龄：

//保存选中的同学 varclassmate={ name:"", age:"" } //同学列表 vararr=[ { name:"小明", age:22 }, { name:"小黑", age:23 }, { name:"小红", age:24 }, { name:"小白", age:25 } ]; varnameNode=document.querySelector("input[name='name']"); varageNode=document.querySelector("input[name='age']"); nameNode.addEventListener("keyup",function(){ classmate.name=nameNode.value; update() //console.log(classmate) }) ageNode.addEventListener("keyup",function(){ classmate.age=ageNode.value; update() }) //进行双向绑定 Object.defineProperty(classmate,'name',{ get:function(){ returnclassmate['name'] }, set:function(val){ classmate['name']=val; } }) Object.defineProperty(classmate,'age',{ get:function(){ returnclassmate['age'] }, set:function(val){ classmate['age']=val; } }) //重绘ul列表 functionupdate(){ document.querySelector("#classmates").innerHTML=""; for(vari=0;i"; varliNode=parseElement(li); liNode.addEventListener("click",showClassmate(classmate)) document.querySelector("#classmates").appendChild(liNode) } } update() //点击同学 functionshowClassmate(data){ returnfunction(){ classmate=data; nameNode.value=classmate.name; ageNode.value=classmate.age; } } //将字符串变成node对象 functionparseElement(htmlString){ returnnewDOMParser().parseFromString(htmlString,'text/html').body.childNodes[0] }

这里面的json数据较简单，如果面对复杂的多层关系树，通过这种方式修改数据会很方便

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js 对象使用的小技巧实例分析

热门推荐

随机推荐