JavaScript中 对象取值 . 和 [ ] 的区别

1. 相同点

[ ] 运算符 和 点运算符 都可以获取到 obj 的属性值

2. 区别

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

var data = {
  name: 'haha',
  age: 18,
  3: '男'
}
var key = 'name'
console.log(data.key) // undefined
console.log(data[key]) // haha

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

var data = {
  name: 'haha',
  age: 18,
  3: '男'
}
console.log(data[3]) // 男
console.log(data.3) // Uncaught SyntaxError: missing ) after argument list

2.3 [ ] 可以动态访问的属性名，可以在程序运行时创建和修改属性，点操作符就不行！
（ 即 [ ] 可以动态设置和获取)

    var customer = {};
    var addr = ['武汉','上海','南京','深圳'];
    for(i = 0; i < 4; i++){
       customer["address" + i] = addr[i];
    }
    console.log(customer); // {address0: "武汉", address1: "上海", address2: "南京", address3: "深圳"}
    var str = "";
    for(i = 0; i < 4; i++){
        str += customer["address" + i] + "\t";
    }
    console.log(str); // 武汉 上海  南京  深圳

2.4 如果属性名中包含会导致语法错误的字符，或者属性名是关键字或者保留字，也可以使用 [ ] 表示法
(属性名是关键字或者保留字，都可以点语法不严密，不报错，写法提示有错);

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

3. 关于 JavaScript 对象拓展

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…

此外，JavaScript 允许自定义对象。

所有事物都是对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

• 布尔型可以是一个对象。
• 数字型可以是一个对象。
• 字符串也可以是一个对象。
• 日期是一个对象。
• 数学和正则表达式也是对象。
• 数组是一个对象。
• 甚至函数也可以是对象

对象属性

可以说 “JavaScript 对象是变量的容器”。但是，我们通常认为 “JavaScript 对象是键值对的容器”。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。