两种取属性值的区别
在获取对象属性值的时候,通常有两种方法,一种为对象.属性 一种为对象[属性]。
其中对象.属性可以静态的获取对象中的属性值,获取格式直接通过对象.属性即可。大家都知道对象中的属性名为字符串类型,但是在静态获取时切忌不可写成对象.‘属性’,这种写法会报错 如下所示
对象[属性]相比于对象.属性可以静态获取对象属性值,同时也可以动态获取属性值。当需要静态获取属性值时,获取格式为对象[‘属性’],当需要动态获取属性值时,获取格式为对象[属性],需要注意的是,当动态获取属性值时,需要先提前定义动态属性。
可以看到,当使用对象[属性]的时候,此时属性是被看作一个变量,而不是一个静态的属性值,当给属性添加’'时,会使其变成一个静态属性。如果在动态获取对象属性时,没有提前定义好,那么就会报错,如下所示。
小示例
接下来做一个小题目如下所示
var a={}
var b={
key:'b'
}
var c={
key:'c'
}
a[b]='1'
a[c]='2'
console.log(a[b])
console.log(a[c])
console.log(a['b'])
console.log(a['c'])
console.log(a.b)
console.log(a.c)
a['b']='3'
a['c']='4'
console.log(a[b])
console.log(a[c])
console.log(a['b'])
console.log(a['c'])
console.log(a.b)
console.log(a.c)
这段代码的输出结果会是什么呢?
这段代码的输出结果如下所示
简单分析一下。由于对a[b]与a[c]赋值的时候,没有添加’'所以此时b与c代表的是一个已经定义好的变量,通过上述代码可以发现b与c均是一个对象。我们知道对象中的属性值是字符串,那么当对a[b]与a[c]赋值,就相当于对同一个字符串属性赋值。为了更好的说明问题请看下图
此时对象a中只有一个属性
因此当对a[b]与a[c]赋值的时候,后者会覆盖前者,因此2会覆盖1。在进行取值的时候,由于采用的时a[b]的方法,因此无论是a[b],a[c],a[d]那个取值,得到的结果都是一样的(前提是b,c,d都得提前定义为对象)
后面的就顺理成章了,a[‘b’]取得是a对象属性名为b的属性值,由于没有定义所以输出undefine,同理a[‘c’],a.b,a.c。
这就是对象.属性与对象[属性]在用法上的区别,总结来说对象[属性]的方法更为灵活,既可以动态也可以静态。