快捷導(dǎo)航

js 對象使用的小技巧實例分析

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

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

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

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

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

下面舉個栗子，有點(diǎn)類似于雙向綁定，點(diǎn)擊哪個對象就可以單獨(dú)修改這個對象，修改后會在json樹中更新數(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對象
            function parseElement(htmlString){
                return new DOMParser().parseFromString(htmlString,'text/html').body.childNodes[0]
            }
        </script>
    </body>
</html>

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

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

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

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

您可能感興趣的文章: