博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js用"."和"[]"获取属性的区别
阅读量:6868 次
发布时间:2019-06-26

本文共 1525 字,大约阅读时间需要 5 分钟。

在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。

对象的属性和方法统称为对象的成员。

访问对象的属性

在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性。

1. 使用“ . ”来访问对象属性

语法:

    objectName.propertyName

其中,objectName 为对象名称,propertyName为属性名称。

2. 使用“ [ ] ”来访问对象属性

语法:

    objectName[propertyName]

其中,objectName 为对象名称,propertyName为属性名称。

访问对象的方法

在JavaScript中,只能使用“ . ”来访问对象的方法。

语法:

    objectName.methodName()

其中,objectName 为对象名称,methodName() 为函数名称。

【例5-1】创建一个Person类:

1
2
3
4
5
6
7
8
9
10
11
12
13
function
Person() {
  
this
.name=
" 张三 "
;
// 定义一个属性 name
  
this
.sex=
" 男 "
;
// 定义一个属性 sex
  
this
.age=22;
// 定义一个属性 age
  
this
.say=
function
(){
// 定义一个方法 say()
    
return
"嗨!大家好,我的名字是 "
+
this
.name +
" ,性别是 "
+
this
.sex +
",今年 "
+
this
.age +
"岁!"
;
  
}
}
var
zhangsan=
new
Person();
alert(
"姓名:"
+zhangsan.name);
// 使用“.”来访问对象属性
alert(
"性别:"
+zhangsan.sex);
alert(
"年龄:"
+zhangsan[
"age"
]);
// 使用“[ ]”来访问对象属性
alert(zhangsan.say); 
// 使用“.”来访问对象方法

PS:浅析对象访问属性的"."和"[]"方法区别

在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?

例如,读取object中的property属性值:

    object.property

    object['property']

以上两种方式都可以实现属性的存取。

1.语法方面的区别

点表示法的对象的属性名是标识符,而后者的属性名则是一个字符串。

2.灵活性方面的区别

在JavaScript编写程序中,可以为对象创建任意数目的属性。但使用”.“运算符来存取一个对象的属性时,属性名是用标识符表示的。而在JavaScript程序中,标识符必须被逐字地输入,它们不是一种数据类型,因此程序不能对其操作。也就是说,标识符是静态的,在程序中必须对其进行硬编码。

而使用数组[]表示法来存取一个对象的属性时,属性名是用字符串表示的。字符串是JavaScript的一种数据类型,因此可以在程序运行中操作并创建它们

3.性能方面区别

数组[]表示法在存取属性值时会进行表达式运行。而点表示法是直接存取属性值,理论上执行效率会比数组表示法高。性能方面其实可以忽略。

某些场景必须用到数组表示法来动态存取属性值,这个是点表示法无法做到的。

总的来说,这两种方法区别上不大,都有对应的使用场景。点表示法一般作为静态对象使用时来存取属性。而数组表示法在动态存取属性时就非常有用。

转载地址:http://smkfl.baihongyu.com/

你可能感兴趣的文章
学习CAS实现SSO单点登录
查看>>
同步异步的知识补充
查看>>
[Leetcode]100. Same Tree -David_Lin
查看>>
阿里云推送服务
查看>>
工作中遇到的懒加载问题
查看>>
lbp纹理特征
查看>>
elastic的gc相关
查看>>
perl学习(3)正则表达式
查看>>
案例分析:免费的维护服务
查看>>
HDU_2152 Fruit(生成函数)
查看>>
css关于定位那些事情
查看>>
WCF IIS上部署服务
查看>>
微软职位内部推荐-Software Development Engineering II
查看>>
Senparc.Weixin.MP SDK 微信公众平台开发教程(五):使用Senparc.Weixin.MP SDK
查看>>
mariadb 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
查看>>
面向.Net程序员的后端性能优化实战
查看>>
基于CSS3 3D百叶窗图像过渡特效
查看>>
关于同步的一点思考-下
查看>>
ADB原理,Wi-Fi连接,常用命令及拓展
查看>>
Python学习之网络编程
查看>>