js中对象的点语法与方括号语法的区别

379 阅读2分钟

javascript访问和设置对象属性有两种方法,第一种是点符号法,第二种是方括号表示法。

一、使用规范

1、点语法:点号要求后面的写法是合法的标识符,对于不合法的标识符不可以使用。

方括号语法:括号之间的值可以是任何表达式。

二、区别

以访问对象属性为例:

1、属性名是合法标识符时,使用点语法和方括号语法都是可以的,属性名不是合法标识符时,只能使用方括号语法。

 const obj = {

      "num"6,

      "0*":"juejin"

  }

  num是合法标识符,点语法和方括号语法都可以访问

  console.log(obj.num) // 6

  console.log(obj['num']) // 6

  0*不属于合法的标识符,使用点语法访问属性会报错

  console.log(obj.0*)  // 报错  为了方便看到其他结果,所以将这句代码注释了,可以自己打开注释测试下代码效果

  不符合语法标识符的属性,可以使用方括号语法访问

  console.log(obj['0*'])// juejin

这段代码中属性名num是合法标识符,点语法和方括号语法都可以访问,0*不属于合法的标识符,

使用点语法访问属性会报错,只能使用方括号语法。

1.png

2、使用变量或者常量保存属性名时,只能使用方括号语法,不能使用点语法。

const obj = {

      "num"6,

      "0*":"juejin"

  }

定义一个常量property,值为age

const property = "num"

当属性为变量或常量时,必须通过方括号语法,即:obj[property],使用property保存的值num,所以等价于obj.num这种写法

console.log(obj[property]) // 6

当属性为变量或常量时,如果通过点语法,会将property看做字符串,表示访问obj对象下的property属性,而不是访问obj下的num属性,

而obj对象中没有property属性,所以返回结果为undefined

console.log(obj.property) // undefined

上面这段代码中,由于属性名是一个常量,只能使用方括号语法访问该属性,即: obj[property],访问时会使用

property保存的值num,此时就等价于obj.num这种写法,所以返回结果为6。

直接使用点语法,会将property看做字符串,表示访问obj对象下的property属性,

而obi对象中没有property属性,所以返回结果为undefined.输出结果如下图所示:

2.png

设置对象属性时,点语法和方括号语法区别是一样的。

今日寄语:

最宝贝的收获,有时候就是你爱的人,脸上露出笑容。