js对象中取属性值 (.) 和 [ ] 的区别

今天在写js的过程中遇到这么一个问题，取一个对象的属性值，通过 obj.keys 怎么都取不出来，但是用 obj[keys] 就可以。（这个是模拟的数据）

var data = {
  water1: '矿泉水',
  water2: '可乐',
  water3: '雪碧'
}

for(var i = 0; i < 3; i++){
  var water = 'water' + (i + 1)
  console.log(data['water' + (i + 1)) //'矿泉水','可乐','雪碧'
  console.log(data.water) //undefined 
}

后来通过查资料明白，这里的 data.water 输出 undefined，是因为 object 使用 (.) 获取属性值时，这里的 water 不是使用的变量 water，而是直接去 data 对象中寻找名为 water 的 key，没有找到，所以报 undefined。

相同点：都可以获取到 obj 的属性值

不同点：

• [ ] 运算符可以使用字符串变量的内容作为属性名，点运算符不能。
• [ ] 运算符可以用纯数字作为属性名，点运算符不能。
• [ ] 运算符可以用js关键字和保留字作为属性名，点运算符不能。

var data = {
  water: 'woo',
  2: 'ww',
  3: 'opp'
}

var ss = 'water'
console.log(data[ss]) //woo
console.log(data.ss) //undefined

这里由于变量的 var 声明的变量会导致变量的提升，所以会报 undefined

var data = {
  water: 'woo',
  2: 'ww',
  3: 'oop'
}

var ss = 'water'
console.log(data[3]) //oop
console.log(data.3)
//Uncaught SyntaxError: missing ) after argument list

总结：对于一般的常量就使用 (.) 运算符；对于其他的使用 [ ] 运算符。