JavaScript屬性操作
更新時(shí)間：2022年03月13日 10:22:49 作者：.NET開(kāi)發(fā)菜鳥(niǎo)
這篇文章介紹了JavaScript屬性的操作，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(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={};
// 通過(guò)"."號(hào)的方式設(shè)置屬性
obj.name="tom";
// 通過(guò)"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過(guò)"."號(hào)的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過(guò)"[]"的方式獲取屬性
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={};
// 通過(guò)"."號(hào)的方式設(shè)置屬性
obj.name="tom";
// 通過(guò)"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過(guò)"."號(hào)的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過(guò)"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號(hào)只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫(xiě)法，.只能取自身的屬性
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={};
// 通過(guò)"."號(hào)的方式設(shè)置屬性
obj.name="tom";
// 通過(guò)"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過(guò)"."號(hào)的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過(guò)"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號(hào)只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫(xiě)法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過(guò).刪除age屬性
delete obj2.age
console.log(obj2);
// 通過(guò)[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過(guò)變量刪除
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={};
// 通過(guò)"."號(hào)的方式設(shè)置屬性
obj.name="tom";
// 通過(guò)"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過(guò)"."號(hào)的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過(guò)"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號(hào)只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫(xiě)法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過(guò).刪除age屬性
delete obj2.age
console.log(obj2);
// 通過(guò)[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過(guò)變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測(cè)
// in 運(yùn)算符 判斷對(duì)象中的屬性是否存在
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、使用對(duì)象的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={};
// 通過(guò)"."號(hào)的方式設(shè)置屬性
obj.name="tom";
// 通過(guò)"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過(guò)"."號(hào)的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過(guò)"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號(hào)只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫(xiě)法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過(guò).刪除age屬性
delete obj2.age
console.log(obj2);
// 通過(guò)[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過(guò)變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測(cè)
// in 運(yùn)算符 判斷對(duì)象中的屬性是否存在
/* var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3); */
// 使用對(duì)象的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。看下面的例子：
<!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={};
// 通過(guò)"."號(hào)的方式設(shè)置屬性
obj.name="tom";
// 通過(guò)"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過(guò)"."號(hào)的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過(guò)"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號(hào)只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫(xiě)法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過(guò).刪除age屬性
delete obj2.age
console.log(obj2);
// 通過(guò)[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過(guò)變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測(cè)
// in 運(yùn)算符 判斷對(duì)象中的屬性是否存在
/* var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3); */
// 使用對(duì)象的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={};
// 通過(guò)"."號(hào)的方式設(shè)置屬性
obj.name="tom";
// 通過(guò)"[]"的方式設(shè)置屬性
obj["age"]=20;
// 通過(guò)"."號(hào)的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過(guò)"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號(hào)只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個(gè)變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯(cuò)誤的寫(xiě)法，.只能取自身的屬性
console.log(obj2.name); */
// 屬性的刪除
/* var obj2={
name:"jack",
age:18,
sex:"男",
email:"747934521@qq.com"
};
// 通過(guò).刪除age屬性
delete obj2.age
console.log(obj2);
// 通過(guò)[]刪除sex屬性
delete obj2["sex"];
console.log(obj2);
// 同樣也可以通過(guò)變量刪除
var temp="email";
delete obj2[temp];
console.log(obj2); */
// 屬性的檢測(cè)
// in 運(yùn)算符 判斷對(duì)象中的屬性是否存在
/* var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3); */
// 使用對(duì)象的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 遍歷對(duì)象的屬性
var obj7={
a:"1",
b:"2",
c:"3"
};
for(var v in obj7){
// 輸出obj7的屬性
console.log(v);
// 輸出屬性對(duì)應(yīng)的值
console.log(obj7[v]);
}
};
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
for..in同樣也可以遍歷數(shù)組：
五、序列化
1、JSON.stringify()將對(duì)象序列化成JSON格式的字符串，前端傳遞數(shù)據(jù)給后臺(tái)的時(shí)候使用，例如：
2、JSON.parse()將JSON格式的字符串轉(zhuǎn)換成對(duì)象，后臺(tái)把數(shù)據(jù)傳遞到前端的時(shí)候使用，例如：
到此這篇關(guān)于JavaScript屬性操作的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript對(duì)象屬性操作實(shí)例解析
- 基于js對(duì)象,操作屬性、方法詳解
- JS Attribute屬性操作詳解
- JavaScript對(duì)象屬性檢查、增加、刪除、訪(fǎng)問(wèn)操作實(shí)例
- js操作css屬性實(shí)現(xiàn)div層展開(kāi)關(guān)閉效果的方法
- JavaScript創(chuàng)建一個(gè)object對(duì)象并操作對(duì)象屬性的用法
- JS操作HTML自定義屬性的方法
- javascript數(shù)組操作總結(jié)和屬性、方法介紹
- javascript對(duì)象的使用和屬性操作示例詳解
- JS批量操作CSS屬性詳細(xì)解析
- 如何通過(guò)javascript操作web控件的自定義屬性
相關(guān)文章
bootstrap fileinput 上傳插件的基礎(chǔ)使用
這篇文章主要介紹了bootstrap fileinput 上傳插件基礎(chǔ)使用，重點(diǎn)是把界面做得更加友好，更好的增加用戶(hù)體驗(yàn)。對(duì)bootstrap fileinput知識(shí)感興趣的朋友通過(guò)本文一起學(xué)習(xí)吧2017-02-02
微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法
寫(xiě)這個(gè)是因?yàn)樽罱〕绦虻囊粋€(gè)需求需要從小程序跳轉(zhuǎn)到客戶(hù)的官網(wǎng),或者其他外部報(bào)名鏈接,下面這篇文章主要給大家介紹了關(guān)于微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下2022-10-10
不錯(cuò)的asp中顯示新聞的功能...2006-10-10
js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05 
這篇文章主要介紹了JavaScript構(gòu)建自己的對(duì)象,結(jié)合實(shí)例形式分析了javascript自定義類(lèi)的定義與對(duì)象的實(shí)例化相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11 
下面小編就為大家?guī)?lái)一篇最通俗易懂的javascript變量提升詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08 
微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序JS動(dòng)態(tài)修改樣式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12 
javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02 
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的打印表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01