JavaScript屬性操作
更新時間：2022年03月13日 10:22:49 作者：.NET開發(fā)菜鳥
這篇文章介紹了JavaScript屬性的操作，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、屬性的設置和獲取
1、屬性的設置和獲取主要有兩種方式：
<!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(){
// 屬性的設置或獲取
var obj={};
// 通過"."號的方式設置屬性
obj.name="tom";
// 通過"[]"的方式設置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
};
</script>
</head>
<body>
</body>
</html>運行結果：
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(){
// 屬性的設置或獲取
var obj={};
// 通過"."號的方式設置屬性
obj.name="tom";
// 通過"[]"的方式設置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯誤的寫法，.只能取自身的屬性
console.log(obj2.name);
};
</script>
</head>
<body>
</body>
</html>運行結果：
二、屬性的刪除
看下面的例子：
<!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(){
// 屬性的設置或獲取
/* var obj={};
// 通過"."號的方式設置屬性
obj.name="tom";
// 通過"[]"的方式設置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯誤的寫法，.只能取自身的屬性
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>運行結果：
三、判斷屬性是否存在
1、使用in運算符。如果屬性存在返回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(){
// 屬性的設置或獲取
/* var obj={};
// 通過"."號的方式設置屬性
obj.name="tom";
// 通過"[]"的方式設置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯誤的寫法，.只能取自身的屬性
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 運算符 判斷對象中的屬性是否存在
var obj3={
name:"jack",
age:18
};
console.log("name" in obj3);
console.log("sex" in obj3);
};
</script>
</head>
<body>
</body>
</html>運行結果：
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(){
// 屬性的設置或獲取
/* var obj={};
// 通過"."號的方式設置屬性
obj.name="tom";
// 通過"[]"的方式設置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯誤的寫法，.只能取自身的屬性
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 運算符 判斷對象中的屬性是否存在
/* 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>運行結果：
注意：這里也可以使用變量的方式進行判斷屬性是否存在，例如：
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(){
// 屬性的設置或獲取
/* var obj={};
// 通過"."號的方式設置屬性
obj.name="tom";
// 通過"[]"的方式設置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯誤的寫法，.只能取自身的屬性
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 運算符 判斷對象中的屬性是否存在
/* 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>運行結果：
注意：如果屬性的值正好是undefined，那么這時就不能用這種判斷了，看下面的例子：
四、屬性的遍歷
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(){
// 屬性的設置或獲取
/* var obj={};
// 通過"."號的方式設置屬性
obj.name="tom";
// 通過"[]"的方式設置屬性
obj["age"]=20;
// 通過"."號的方式獲取屬性
console.log("姓名:"+obj.name);
// 通過"[]"的方式獲取屬性
console.log("年齡:"+obj["age"]);
// 區(qū)別
// "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
var obj1={
name:"jack",
age:18
};
// 定義一個變量
var a="name";
console.log(obj2[a]);//等同于 console.log(obj2["name"]);
// console.log(obj2.a) 錯誤的寫法，.只能取自身的屬性
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 運算符 判斷對象中的屬性是否存在
/* 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);
// 輸出屬性對應的值
console.log(obj7[v]);
}
};
</script>
</head>
<body>
</body>
</html>運行結果：
for..in同樣也可以遍歷數(shù)組：
五、序列化
1、JSON.stringify()將對象序列化成JSON格式的字符串，前端傳遞數(shù)據(jù)給后臺的時候使用，例如：
2、JSON.parse()將JSON格式的字符串轉換成對象，后臺把數(shù)據(jù)傳遞到前端的時候使用，例如：
到此這篇關于JavaScript屬性操作的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了bootstrap fileinput 上傳插件基礎使用，重點是把界面做得更加友好，更好的增加用戶體驗。對bootstrap fileinput知識感興趣的朋友通過本文一起學習吧2017-02-02
寫這個是因為最近小程序的一個需求需要從小程序跳轉到客戶的官網(wǎng),或者其他外部報名鏈接,下面這篇文章主要給大家介紹了關于微信小程序跳轉外部鏈接的詳細實現(xiàn)方法,需要的朋友可以參考下2022-10-10
不錯的asp中顯示新聞的功能...2006-10-10
排序是我們在日常開發(fā)中經(jīng)常遇到的一個功能，下面這篇文章主要給大家介紹了利用JavaScript對中文（漢字）進行排序的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。2017-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)精確到秒的倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JavaScript構建自己的對象,結合實例形式分析了javascript自定義類的定義與對象的實例化相關操作技巧,需要的朋友可以參考下2016-11-11
下面小編就為大家?guī)硪黄钔ㄋ滓锥膉avascript變量提升詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
微信小程序 JS動態(tài)修改樣式的實現(xiàn)方法
這篇文章主要給大家介紹了關于微信小程序JS動態(tài)修改樣式的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要為大家詳細介紹了javascript設計模式之模塊模式學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的打印表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01