JavaScript学习笔记:对象属性的查询和设置

发布于 大漠

前几天了解和学习了JavaScript中对象的创建,仅了解这一点皮毛是远远不够的。为了能对对象更了解,这几天一直在看对象的属性相关的知识。对象的属性也有增、删、改、查等,也有自己的相关特性。这篇文章主要了解对象属性的查询和设置。

属性的查询

对象属性的查询可以通过点(.)或中括号([])运算符来查询。对于点(.)来说,右侧必须是一个以属性名命名的标识符(注意:JavaScript语言的标识符有自己的合法规则,并不同于带引号的字符串);对于方括号([])来说,方括号内必须是一个字符串表达式(字符串变量当然也可以喽,其他可以转换成字符串的值比如数字什么的也是都可以滴),这个字符串就是属性的名字。

来看一个简单的例子:

var objPerson = {
    'name': '大漠',
    'age': 35,
    'blog': 'w3cplus'
}
var name = objPerson.name,
    age = objPerson.age,
    blog = objPerson.blog;
 
console.log(name + '已经' + age + '岁了,他的Blog是:' + blog);// 大漠已经35岁了,他的Blog是:w3cplus

上面也说过了,除了使用.运算符可以查出对象的属性值,还可以使用[]运算符来对对象属性的查询:

var objPerson = {
    'name': '大漠',
    'age': 35,
    'blog': 'w3cplus'
}
var name = objPerson['name'],
    age = objPerson['age'],
    blog = objPerson['blog'];
 
console.log(name + '已经' + age + '岁了,他的Blog是:' + blog);// 大漠已经35岁了,他的Blog是:w3cplus

查询对象属性时,如果属性名字里有空格、连接字符、JavaScript中的保留字时,需要使用[]运算符来查询。如

var book ={
    "main title":"javascript",  //属性名字里有空格,必须用字符串表示
    'sub-title':"the defintive guide",  //属性里有连接字符,因此需要使用双引号
    "for":"all adiences",  //"for是保留字,因此需要双引号。
    author:{ //这个属性的值是一个对象
        firstName:"dabid",  //这里属性的值也是一个对象
        surname:"flangan"  //这里的属性名都没有引号
    }
};
var oName = oAuthor.surname //得到author的“surname”的属性
var oTitle =book["main title"] //得到book的main title属性

属性的设置

属性的设置和前面所说的属性查询类似,可以通过.[]运算符来设置对象的属性。如:

var obj = {}; //创建一个空的对象
obj.name = '大漠';
obj['age'] = 35;
console.log(obj); // {name: "大漠", age: 35}

这个时候obj就变成:

obj = {
    name: "大漠", 
    age: 35
}

上面是一个创建的是一个空对象,如果你想修改一个已有对象的某个属性值时,也可以使用同样的方法:

var objPerson = {
    'name': '大漠',
    'age': 53,
    'blog': 'w3cpus'
}
 
objPerson.age = 35;
objPerson['blog'] = 'w3cplus';
 

这个时候对象变成:

objPerson = {
    'name': '大漠',
    'age': 35,
    'blog': 'w3cplus'
}

总结

简单总结了JavaScript中对象属性的查询和设置。在查询和设置中都可以使用.[]运算符轻松实现。

初学者学习笔记,如有不对,还希望高手指点。如有造成误解,还希望多多谅解。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.fedev.cn/javascript/object-attribute-query-and-settings.htmlNike HyperRev 2017