JavaScript屬性操作
更新時(shí)間：2022年03月13日 10:22:49 作者：.NET開發(fā)菜鳥
這篇文章介紹了JavaScript屬性的操作，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、屬性的設(shè)置和獲取
1、屬性的設(shè)置和獲取主要有兩種方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript中屬性的基本操作</title>
<script>
window.onload=function(){
// 屬性的設(shè)置或獲取
var obj={};
// 通過"."號的方式設(shè)置屬性
obj.name="tom";
// 通過"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
2、兩種方式的區(qū)別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript中屬性的基本操作</title>
<script>
window.onload=function(){
// 屬性的設(shè)置或獲取
var obj={};
// 通過"."號的方式設(shè)置屬性
obj.name="tom";
// 通過"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫法，.只能取自身的屬性
console.log(obj2.name);
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
二、屬性的刪除
看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript中屬性的基本操作</title>
<script>
window.onload=function(){
// 屬性的設(shè)置或獲取
/* var obj={};
// 通過"."號的方式設(shè)置屬性
obj.name="tom";
// 通過"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過.刪除age屬性
delete obj2.age
console.log(obj2);
// 通過[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2);
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
三、判斷屬性是否存在
1、使用in運(yùn)算符。如果屬性存在返回true，屬性不存在返回false，看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript中屬性的基本操作</title>
<script>
window.onload=function(){
// 屬性的設(shè)置或獲取
/* var obj={};
// 通過"."號的方式設(shè)置屬性
obj.name="tom";
// 通過"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過.刪除age屬性
delete obj2.age
console.log(obj2);
// 通過[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測
// in 運(yùn)算符 判斷對象中的屬性是否存在
var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3);
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
2、使用對象的hasOwnProperty()方法
同樣，如果屬性存在返回true，屬性不存在返回false，看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript中屬性的基本操作</title>
<script>
window.onload=function(){
// 屬性的設(shè)置或獲取
/* var obj={};
// 通過"."號的方式設(shè)置屬性
obj.name="tom";
// 通過"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過.刪除age屬性
delete obj2.age
console.log(obj2);
// 通過[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測
// in 運(yùn)算符 判斷對象中的屬性是否存在
/* var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3); */
// 使用對象的hasOwnProperty()方法
var obj4={
name:"jack",
age:18
};
console.log(obj4.hasOwnProperty("name"));
console.log(obj4.hasOwnProperty("sex"));
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
注意：這里也可以使用變量的方式進(jìn)行判斷屬性是否存在，例如：
3、使用undefined判斷
如果屬性的值不等于undefined，則表示屬性存在，返回true。如果屬性的值等于undefined，則表示屬性不存在，返回false?？聪旅娴睦樱?/p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript中屬性的基本操作</title>
<script>
window.onload=function(){
// 屬性的設(shè)置或獲取
/* var obj={};
// 通過"."號的方式設(shè)置屬性
obj.name="tom";
// 通過"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過.刪除age屬性
delete obj2.age
console.log(obj2);
// 通過[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測
// in 運(yùn)算符 判斷對象中的屬性是否存在
/* var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3); */
// 使用對象的hasOwnProperty()方法
/* var obj4={
name:"jack",
age:18
};
console.log(obj4.hasOwnProperty("name"));
console.log(obj4.hasOwnProperty("sex"));
// 使用變量的方式判斷
var temp="name";
console.log(obj4.hasOwnProperty(temp));
var temp1="email";
console.log(obj4.hasOwnProperty(temp1)); */
// 判斷屬性的值是否不等于undefined
var obj5={
name:"jack",
age:18
};
console.log(obj5.name!=undefined);
console.log(obj5.sex!=undefined);
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
注意：如果屬性的值正好是undefined，那么這時(shí)就不能用這種判斷了，看下面的例子：
四、屬性的遍歷
1、使用for...in遍歷屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript中屬性的基本操作</title>
<script>
window.onload=function(){
// 屬性的設(shè)置或獲取
/* var obj={};
// 通過"."號的方式設(shè)置屬性
obj.name="tom";
// 通過"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過.刪除age屬性
delete obj2.age
console.log(obj2);
// 通過[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測
// in 運(yùn)算符 判斷對象中的屬性是否存在
/* var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3); */
// 使用對象的hasOwnProperty()方法
/* var obj4={
name:"jack",
age:18
};
console.log(obj4.hasOwnProperty("name"));
console.log(obj4.hasOwnProperty("sex"));
// 使用變量的方式判斷
var temp="name";
console.log(obj4.hasOwnProperty(temp));
var temp1="email";
console.log(obj4.hasOwnProperty(temp1)); */
// 判斷屬性的值是否不等于undefined
/* var obj5={
name:"jack",
age:18
};
console.log(obj5.name!=undefined);
console.log(obj5.sex!=undefined);
//
var obj6={
name:undefined,
age:18
};
console.log(obj6.name!=undefined); */
// 屬性的遍歷
// for...in 遍歷對象的屬性
var obj7={
a:"1",
b:"2",
c:"3"
};
for(var v in obj7){
// 輸出obj7的屬性
console.log(v);
// 輸出屬性對應(yīng)的值
console.log(obj7[v]);
}
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
for..in同樣也可以遍歷數(shù)組：
五、序列化
1、JSON.stringify()將對象序列化成JSON格式的字符串，前端傳遞數(shù)據(jù)給后臺(tái)的時(shí)候使用，例如：
2、JSON.parse()將JSON格式的字符串轉(zhuǎn)換成對象，后臺(tái)把數(shù)據(jù)傳遞到前端的時(shí)候使用，例如：
到此這篇關(guān)于JavaScript屬性操作的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JSON.parse處理非標(biāo)準(zhǔn)Json數(shù)據(jù)出錯(cuò)的解決
這篇文章主要介紹了JSON.parse處理非標(biāo)準(zhǔn)Json數(shù)據(jù)出錯(cuò)的解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
解析從小程序開發(fā)者工具源碼看原理實(shí)現(xiàn)
小程序的架構(gòu)設(shè)計(jì)與web技術(shù)還是有一定的差別，其吸取了web技術(shù)的一些優(yōu)勢，同時(shí)也摒棄web技術(shù)中體驗(yàn)等不好的地方。下面通過問題的形式來說說小程序架構(gòu)中的一些設(shè)計(jì)點(diǎn)2021-06-06
js實(shí)現(xiàn)雙向鏈表互聯(lián)網(wǎng)機(jī)頂盒實(shí)戰(zhàn)應(yīng)用實(shí)現(xiàn)
js實(shí)現(xiàn)雙向鏈表互聯(lián)網(wǎng)機(jī)頂盒實(shí)戰(zhàn)應(yīng)用實(shí)現(xiàn)，需要的朋友可以參考下。2011-10-10
如何解決前端筆記本屏幕顯示縮放比例125%,150%對頁面布局的影響
如果要完整解決該縮放和布局問題,仍需適配,下面這篇文章主要給大家介紹了關(guān)于如何解決前端筆記本屏幕顯示縮放比例125%,150%對頁面布局的影響,需要的朋友可以參考下2022-11-11
淺談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書寫
下面小編就為大家?guī)硪黄獪\談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書寫。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
本文給大家介紹了JavaScript中的類型檢查的一些知識點(diǎn),整理的非常詳細(xì),推薦給大家,希望對大家學(xué)習(xí)JavaScript能夠所幫助2020-02-02
avaScript URL() 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL 對象,表示由一組參數(shù)定義的 URL,利用該構(gòu)造函數(shù)可以獲取 RL的查詢、參數(shù)等,下面這篇文章主要給大家介紹了關(guān)于JavaScript URL對象的一些妙用,需要的朋友可以參考下2021-10-10
關(guān)于onchange事件在IE和FF下的表現(xiàn)及解決方法
本篇文章主要是對關(guān)于onchange事件在IE和FF下的表現(xiàn)及解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)手寫 forEach算法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)手寫 forEach算法實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
在一個(gè)頁面中，每一個(gè)外部JavaScript 及CSS文件都會(huì)導(dǎo)致一個(gè)額外的HTTP請求。所以，如何合理的合并JavaScript 文件及CSS文件也是前端工程師應(yīng)該考慮的。2009-10-10