快捷導(dǎo)航

js 對(duì)象使用的小技巧實(shí)例分析

更新時(shí)間：2019年11月08日 11:53:53 作者：lianzhang861

這篇文章主要介紹了js 對(duì)象使用的小技巧,結(jié)合實(shí)例形式分析了JavaScript對(duì)象的遍歷、查找、事件監(jiān)聽(tīng)等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了js 對(duì)象使用的小技巧。分享給大家供大家參考，具體如下：

js中中，Object，Array ,Function 等都屬于引用類型，他們的變量名都是指向?qū)ο蟮闹羔槨?/p>

這樣就有一個(gè)好處，當(dāng)處理一個(gè)復(fù)雜json樹(shù)的時(shí)候，想要單獨(dú)改變其中某一個(gè)子對(duì)象屬性時(shí)，不需要根據(jù)對(duì)象id遍歷查找到這個(gè)對(duì)象了，而是可以直接通過(guò)事件方式將這個(gè)對(duì)象通過(guò)參數(shù)的方式賦值給一個(gè)專屬變量，這個(gè)變量就指向這個(gè)對(duì)象，這樣就可以隨意改變對(duì)象屬性了。改變這個(gè)變量對(duì)應(yīng)的對(duì)象，整個(gè)json樹(shù)中的這個(gè)對(duì)象也被相應(yīng)的改變。

下面舉個(gè)栗子，有點(diǎn)類似于雙向綁定，點(diǎn)擊哪個(gè)對(duì)象就可以單獨(dú)修改這個(gè)對(duì)象，修改后會(huì)在json樹(shù)中更新數(shù)據(jù)

<!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">
            //保存選中的同學(xué)
            var classmate={
                name:"",
                age:""
            }
            //同學(xué)列表
            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()
            })
            //進(jìn)行雙向綁定
            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()
            //點(diǎn)擊同學(xué)
            function showClassmate(data){
                return function(){
                    classmate=data;
                    nameNode.value=classmate.name;
                    ageNode.value=classmate.age;
                }
            }
            //將字符串變成node對(duì)象
            function parseElement(htmlString){
                return new DOMParser().parseFromString(htmlString,'text/html').body.childNodes[0]
            }
        </script>
    </body>
</html>

這里面的json數(shù)據(jù)較簡(jiǎn)單，如果面對(duì)復(fù)雜的多層關(guān)系樹(shù)，通過(guò)這種方式修改數(shù)據(jù)會(huì)很方便

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: