一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以
特殊情况下我们需要使用中括号语法
-
对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法
-
如果涉及变量相关的时候, 也需要使用中括号
特殊情况1
var obj = {
100: '我的属性名是 纯数字 100',
'!': '我的属性名是 特殊符号 !',
'@': '我的属性名是 特殊符号 @'
}
此时不能使用点语法, 可以使用中括号语法
console.log(obj.100)
console.log(obj.!)
console.log(obj.@)
console.log(obj[100])
console.log(obj['100'])
console.log(obj[!]) // 有问题, 需要将 特殊符号用引号包裹
console.log(obj['!'])
console.log(obj['@'])
特殊情况2
var obj = {
a: 1,
b: 2,
name: 'QF001'
}
var myName = 'name'
console.log(obj.myName)
obj.myName 我们猜想他这个 myName 是一个变量, 所以实际的应该是 obj.'name', 所以应该打印 obj 的name属性 但实际的输出结果是 undefined
原因: 因为 对象的 点语法, 会将 点 后边的 字符 当成一个 字符串去使用, 而不会当成变量
拿 obj.myName 举例 他会将 myName 当成一个 字符串 去 对象中查找, 有没有一个叫做 myName 的属性名 找完之后 发现对象中没有这个属性名, 所以打印的值 为 undefined
console.log(obj[myName]) // 'QF001'
中括号语法, 内部书写的字符, 如果不加引号, 会把它当成变量去使用, 所以找到实际的值之后, myName 这个变量对应的值为 'name'
所以 obj[myName] 相当于 写了 obj['name']
所以会去 对象 obj 中 找一个 叫做 name 的属性名, 找到之后 打印在页面