liang14658fox

Appearance

访问对象属性的两种方式 ​

  1. 点运算符.表示法，一般作为静态对象使用时来存取属性。
  2. []运算符表示法，在动态存取属性时就非常有用。

访问对象两种方式的区别 ​

  1. []运算符可以使用字符串变量的内容作为属性名，点运算符.不能

例1

js
var data = {   
    water:'可乐',
    2:'雪碧',
    3:'崂山可乐',
}
var ss = 'water'
console.log(data[ss]) // 可乐
console.log(data.ss) // undefined
var data = {   
    water:'可乐',
    2:'雪碧',
    3:'崂山可乐',
}
var ss = 'water'
console.log(data[ss]) // 可乐
console.log(data.ss) // undefined

例2

js
var data = {
    water1:'可乐',
    water2:'雪碧',
    water3:'美年达',
}

for (let i = 0;i < 3;i++) {
    var water = 'water' +(i+1)
    console.log(data['water'+(i+1)])
    console.log(data.water)
}
var data = {
    water1:'可乐',
    water2:'雪碧',
    water3:'美年达',
}

for (let i = 0;i < 3;i++) {
    var water = 'water' +(i+1)
    console.log(data['water'+(i+1)])
    console.log(data.water)
}

这里data.water输出undefined,是因为object使用（.）获取属性值时，这里的water不是使用的变量water,而是直接去data对象中寻找名为water的key,没有找到，所以报undefined。

  1. []运算符可以用纯数字作为属性名，点运算符.不能
js
var data = {
    water:'可乐',
    2:'雪碧',
    3:'崂山可乐',
}
console.log(data[3]) // 可乐
console.log(data.3) // 报错
var data = {
    water:'可乐',
    2:'雪碧',
    3:'崂山可乐',
}
console.log(data[3]) // 可乐
console.log(data.3) // 报错
  1. []运算符可以用js关键字和保留字作为属性名，点运算符.不能