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

更新时间：2019年11月08日 11:53:53 作者：lianzhang861

这篇文章主要介绍了js 对象使用的小技巧,结合实例形式分析了JavaScript对象的遍历、查找、事件监听等相关操作技巧,需要的朋友可以参考下

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div >
            <ul id="classmates">
            </ul>
            <div class="edit">
                <span>姓名：</span>
                <input type="text" value="" name="name"/>
                <br />
                <span>年龄：</span>
                <input type="text" value="" name="age"/>
            </div>
        </div>
        <script type="text/javascript">
            //保存选中的同学
            var classmate={
                name:"",
                age:""
            }
            //同学列表
            var arr=[
                {
                    name:"小明",
                    age:22
                },
                {
                    name:"小黑",
                    age:23
                },
                {
                    name:"小红",
                    age:24
                },
                {
                    name:"小白",
                    age:25
                }
            ];
            var nameNode=document.querySelector("input[name='name']");
            var ageNode=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(){
                    return classmate['name']
                },
                set:function(val){
                    classmate['name'] = val;
                }
            })
            Object.defineProperty(classmate,'age',{
                get:function(){
                    return classmate['age']
                },
                set:function(val){
                    classmate['age'] = val;
                }
            })
            //重绘ul列表
            function update(){
                document.querySelector("#classmates").innerHTML="";
                for(var i=0;i<arr.length;i++){
                    var classmate=arr[i];
                    var li="<li>姓名："+classmate.name + ";年龄："+classmate.age +"</li>";
                    var liNode=parseElement(li);
                    liNode.addEventListener("click",showClassmate(classmate))
                    document.querySelector("#classmates").appendChild(liNode)
                }
            }
            update()
            //点击同学
            function showClassmate(data){
                return function(){
                    classmate=data;
                    nameNode.value=classmate.name;
                    ageNode.value=classmate.age;
                }
            }
            //将字符串变成node对象
            function parseElement(htmlString){
                return new DOMParser().parseFromString(htmlString,'text/html').body.childNodes[0]
            }
        </script>
    </body>
</html>

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

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

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

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

您可能感兴趣的文章:

8种现代JavaScript响应式模式小结
响应式的本质是关于系统如何对数据变化做出反应,并且存在不同类型的响应式,本文就来介绍8种现代JavaScript响应式模式小结,具有一定的参考价值,感兴趣的可以了解一下
2024-02-02
手机软键盘弹出时影响布局的解决方法
这篇文章主要介绍了手机软键盘弹出时影响布局的解决方法的相关资料,大家开发移动端的软件时候，肯定会因为软键盘的弹窗影响布局，这里说下如何解决，需要的朋友可以参考下
2016-12-12
微信小程序搜索功能(附：小程序前端+PHP后端)
这篇文章主要介绍了微信小程序搜索功能(附：小程序前端+PHP后端)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
js中replace的用法总结
本篇文章主要是对js中replace的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式，那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了，那么怎么跳转呢，网上也有很多文章说明，以下实现思路经过小编测试过，需要的朋友可以参考下
2016-04-04
微信小程序如何使用canvas二维码保存至手机相册
这篇文章主要介绍了微信小程序如何使用canvas二维码保存至手机相册的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
理解JavaScript事件对象
这篇文章主要为大家介绍了JavaScript事件对象，了解JavaScript事件
2016-01-01
JavaScript浏览器选项卡效果
项目需要做了如下的东西，希望能给其他需要的同学们一点参考。
2010-08-08
JS 在指定数组中随机取出N个不重复的数据
这篇文章主要介绍了JS 在指定数组中随机取出N个不重复数据的方法,需要的朋友可以参考下
2014-06-06
详解Javascript中new()到底做了些什么？
javascript中，new操作符的工作原理是什么?它是怎样改变构造函数的返回值和this指向的？下面这篇文章就来给大家介绍了关于Javascript中new()到底做了些什么的相关资料，需要的朋友可以参考下。
2018-03-03