JavaScript属性操作
更新时间：2022年03月13日 10:22:49 作者：.NET开发菜鸟
这篇文章介绍了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属性操作的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了bootstrap fileinput 上传插件基础使用，重点是把界面做得更加友好，更好的增加用户体验。对bootstrap fileinput知识感兴趣的朋友通过本文一起学习吧2017-02-02
写这个是因为最近小程序的一个需求需要从小程序跳转到客户的官网,或者其他外部报名链接,下面这篇文章主要给大家介绍了关于微信小程序跳转外部链接的详细实现方法,需要的朋友可以参考下2022-10-10
不错的asp中显示新闻的功能...2006-10-10
排序是我们在日常开发中经常遇到的一个功能，下面这篇文章主要给大家介绍了利用JavaScript对中文（汉字）进行排序的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。2017-06-06
这篇文章主要为大家详细介绍了js实现精确到秒的倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了JavaScript构建自己的对象,结合实例形式分析了javascript自定义类的定义与对象的实例化相关操作技巧,需要的朋友可以参考下2016-11-11
下面小编就为大家带来一篇最通俗易懂的javascript变量提升详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要给大家介绍了关于微信小程序JS动态修改样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要为大家详细介绍了javascript设计模式之模块模式学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了js实现简单的打印表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论