中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript屬性操作的示例分析

發布時間：2022-03-14 09:09:43 來源：億速云 閱讀：127 作者：小新 欄目：開發技術

這篇文章將為大家詳細講解有關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>

運行結果：

JavaScript屬性操作的示例分析

2、兩種方式的區別

<!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"]);

           // 區別
           // "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
           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>

運行結果：

JavaScript屬性操作的示例分析

二、屬性的刪除

看下面的例子：

<!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"]);

           // 區別
           // "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
           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>

運行結果：

JavaScript屬性操作的示例分析

三、判斷屬性是否存在

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"]);

           // 區別
           // "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
           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>

運行結果：

JavaScript屬性操作的示例分析

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"]);

           // 區別
           // "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
           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>

運行結果：

JavaScript屬性操作的示例分析

注意：這里也可以使用變量的方式進行判斷屬性是否存在，例如：

JavaScript屬性操作的示例分析

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(){
           // 屬性的設置或獲取
           /* var obj={};
           // 通過"."號的方式設置屬性
           obj.name="tom";
           //  通過"[]"的方式設置屬性
           obj["age"]=20;
           // 通過"."號的方式獲取屬性
           console.log("姓名:"+obj.name);
           // 通過"[]"的方式獲取屬性
           console.log("年齡:"+obj["age"]);

           // 區別
           // "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
           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>

運行結果：

JavaScript屬性操作的示例分析

注意：如果屬性的值正好是undefined，那么這時就不能用這種判斷了，看下面的例子：

JavaScript屬性操作的示例分析

四、屬性的遍歷

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"]);

           // 區別
           // "."號只能取本身的屬性，"[]"里面可以是變量，也可以是自身的屬性
           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>

運行結果：

JavaScript屬性操作的示例分析

for..in同樣也可以遍歷數組：

JavaScript屬性操作的示例分析

五、序列化

1、JSON.stringify()將對象序列化成JSON格式的字符串，前端傳遞數據給后臺的時候使用，例如：

JavaScript屬性操作的示例分析

2、JSON.parse()將JSON格式的字符串轉換成對象，后臺把數據傳遞到前端的時候使用，例如：

JavaScript屬性操作的示例分析

關于“JavaScript屬性操作的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
昌平区| 沧州市| 建宁县| 阿图什市| 南木林县| 封开县| 会泽县| 贺州市| 陵川县| 合川市| 微博| 长沙县| 江达县| 肇州县| 永昌县| 岫岩| 柏乡县| 抚顺县| 浦江县| 永顺县| 竹山县| 阳信县| 友谊县| 灌南县| 磐安县| 漠河县| 新和县| 米易县| 珠海市| 万安县| 江源县| 共和县| 奉节县| 赤峰市| 庄浪县| 乐陵市| 芦溪县| 正宁县| 扎赉特旗| 武清区| 浑源县|