12.27---04两种操作语法差别

84 阅读1分钟

一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以

特殊情况下我们需要使用中括号语法

  1. 对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法

  2. 如果涉及变量相关的时候, 也需要使用中括号

特殊情况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 的属性名, 找到之后 打印在页面