注册有礼

JavaScript属性设置、获取、删除、判断等操作怎样实现

Admin 2022-11-15 群英技术资讯 827 次浏览

上一篇：JS的undefined表示什么，与not defined什么不同 下一篇：用HTML与JavaScript怎样写筋斗云导航，代码是什么
本篇内容介绍了“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、两种方式的区别

<!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>

运行结果：

二、属性的删除

看下面的例子：

<!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>

运行结果：

三、判断属性是否存在

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>

运行结果：

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>

运行结果：

注意：这里也可以使用变量的方式进行判断属性是否存在，例如：

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>

运行结果：

注意：如果属性的值正好是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"]);

           // 区别
           // "."号只能取本身的属性，"[]"里面可以是变量，也可以是自身的属性
           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同样也可以遍历数组：

五、序列化

1、JSON.stringify()将对象序列化成JSON格式的字符串，前端传递数据给后台的时候使用，例如：

2、JSON.parse()将JSON格式的字符串转换成对象，后台把数据传递到前端的时候使用，例如：



到此这篇关于“JavaScript属性设置、获取、删除、判断等操作怎样实现”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！
群英智防CDN，智能加速解决方案
标签： JavaScript属性操作

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：JS的undefined表示什么，与not defined什么不同 下一篇：用HTML与JavaScript怎样写筋斗云导航，代码是什么

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服