JavaScript对象属性操作指南:检查、增删与访问
在JavaScript开发中,灵活管理对象属性是基础且核心的技能。本文将通过具体代码示例,清晰展示如何检查属性存在性、添加新属性、删除旧属性以及如何高效访问属性值,并附带对象创建的两种常用写法。
检查对象属性是否存在
要确定一个对象是否拥有某个自身属性(而非继承自原型链的属性),可以使用 hasOwnProperty 方法。该方法返回布尔值。
var mouse = {
"name": "betta",
"age": 3,
"varieties": "milaoshu"
}
// 检查"name"属性存在于mouse自身
mouse.hasOwnProperty("name"); // true
// 检查"sex"属性不存在于mouse自身
mouse.hasOwnProperty("sex"); // false
增加对象属性
给现有对象添加新属性非常简单,直接赋值即可。需要注意的是,如果直接修改 Object.prototype 来添加全局共享属性,会导致遍历所有对象时都可能看到该属性,这通常不是推荐做法,此处仅作原理演示。
var dog = {
name: "芒果",
type: "会之王",
eat: function(){
alert("吃");
}
}
// 谨慎示范:向原型添加属性(不推荐日常使用)
Object.prototype.color = "白色";
var nameKey;
for(nameKey in dog){
document.write(nameKey + " : " + dog[nameKey] + "
")
}
上述遍历输出将包含所有可枚举属性:
- name: 芒果
- type: 会之王
- eat: function (){ alert("吃"); }
- color: 白色(继承自原型)
删除对象属性
从对象中彻底移除属性应使用 delete 运算符。若仅希望重置属性值而保留属性名,则可赋值为 undefined、null 或空字符串,但此时 hasOwnProperty 仍会返回 true。
var cat = {
"name": "tom",
"sex": "man",
"color": "yellow"
}
// 1. 彻底删除name属性
delete cat.name;
// 2. 将sex设为undefined(属性仍存在)
cat.sex = undefined;
// 3. 将color设为null(属性仍存在)
cat.color = null;
// 验证结果
alert("name属性是否存在:" + cat.hasOwnProperty("name")); // false,已被删除
alert("sex属性是否存在:" + cat.hasOwnProperty("sex")); // true,仅值被重置
alert("color属性是否存在:" + cat.hasOwnProperty("color")); // true,仅值被重置
访问对象属性
访问属性主要有两种方式:点运算符(Dot Notation)和方括号运算符(Bracket Notation)。两者通常等效,但方括号更灵活,适用于属性名包含特殊字符或通过变量动态获取的情况。
var cat = {
"name": "tom",
"sex": "man",
"color": "yellow"
}
// 方式一:点操作符(推荐用于固定已知属性名)
var name1 = cat.name;
// 方式二:中括号操作符(推荐用于动态键名或非标准标识符)
var name2 = cat["name"];
创建对象的两种方式
在使用属性之前,首先需要有对象。JavaScript中创建基本对象主要有两种直观方式:
// 方式一:使用构造函数 Object()
var obj = new Object();
obj.name = "MangGuo";
obj.age = 25;
// 方式二:使用字面量表示法(最常用、简洁)
var obj = {
name : "MangGuo", // name是属性名,"MangGuo"是值
age : 25
}
以上就是JavaScript对象属性检查、增加、删除及访问的详细内容,更多关于JavaScript对象操作的资料请关注本站其它相关文章!
免责声明:本文内容仅供参考,不代表本站观点。转载或引用请注明出处。









