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