js对象中取属性值（.）和[ ]的区别

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

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

区别：

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

不同点：

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

     2 [ ]运算符可以用纯数字作为属性名，点运算符不能

    3 [ ]运算符可以用js关键字和保留字作为属性名，点运算符不能

eg:

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

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

2   [ ]运算符可以用纯数字作为属性名，点运算符不能

总结：对于一般的常量就使用（.）运算符，对于其他的使用[ ]运算符。