JavaScript再学习之对象属性调用

对于一个JavaScript对象：

var obj = {
    name: "Jack",
    age: 12,
    sayHello: function(){
        console.log("Hello!")
    }
}

调用其属性有两种方法

. 调用

.属性名的方式编码简单直观，易于使用

console.log(obj.name)
console.log(obj.age)
console.log(obj.sayHello)   //注意这里我没有加()，因此不算调用方法，只是输出函数

在这里插入图片描述

[]调用

. 能完成的调用，[] 同样能完成

console.log(obj['name'])
console.log(obj['age'])
obj['sayHello']()   //注意这里我加了()，因此这里是在调用方法

在这里插入图片描述

只能用 [] 而不能用 .

在JavaScript中，有些情况我们调用对象中属性只能用 [] 的方式：

属性名包含特殊字符（- 空格）

当我们的属性名中出现了特殊字符，比如我们想要调用当前对象里的一个Content-Type属性，这时我们用 . 调用就会出现语法报错。
换成 [] 方式就可以了。

属性名是变量的形式

假如我们的属性名现在是以一个变量的形式存在的，那么我们使用两种方式分别设置一下属性，最后输出看看有何不同。

var obj = {}

var propName = "name"
obj.propName = "小李"
obj[propName] = "小张"

console.log(obj)

在这里插入图片描述

大家可以看到出现了两个属性，name和propName。如图 . 方式却把 propName 当做了一个属性名进行了处理，这显然不是我们想要的，我们想要的是第一个name属性。
因此如果我们想要以参数的形式访问属性，那就只能使用 [] 方式。

总结

如果 . 方式不影响功能，使用 . 方式当然是我们想看到的，只不过除了两个情况之外：

1. 属性名中有特殊字符
2. 属性名是变量的形式