溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何在JavaScript中使用對象，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
js中，Object，Array ,Function 等都屬于引用類型，他們的變量名都是指向對象的指針。
這樣就有一個好處，當處理一個復雜json樹的時候，想要單獨改變其中某一個子對象屬性時，不需要根據對象id遍歷查找到這個對象了，而是可以直接通過事件方式將這個對象通過參數的方式賦值給一個專屬變量，這個變量就指向這個對象，這樣就可以隨意改變對象屬性了。改變這個變量對應的對象，整個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>上述內容就是如何在JavaScript中使用對象，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
