js对象属性通过“.”和“[ ]”访问的区别

读取和设置对象属性有两种写法：

(.) 方法： obj.attr 
([])方法： obj[attr]

1、(.) 点操作符: 静态的。右侧必须是一个以属性名称命名的简单标识符。属性名用一个标识符来表示。标识符必须直接出现再js程序中，它们不是数据类型，因此程序无法修改它们。

2、([]) 中括号操作符: 动态的。方括号里必须是一个计算结果为字符串的表达式，属性名通过字符串表示。字符串是js的数据类型，在程序运行时可以修改和创建它们。

主要有以下区别：

[] 可以用变量作为属性名或访问，而点方法不可以。
[]可以通过变量访问，也可以通过字符串访问，但是需要加双引号。

var obj = {};
obj.name = '张三';
var myName = 'name';
 
console.log(obj.myName);//undefined,访问不到对应的属性
console.log(obj[myName]);//张三
 
var person = {
    name:'gogo'
};
 
//  []可以也可以通过字符串访问，但是需要加双引号
console.log(person["name"]);//gogo
 
//  .直接访问字符串
console.log(person.name); //gogo

[]中括号法--可以用数字作为属性名,而点语法不可以;

var obj={};
 
obj[2]=2;   //给obj对象添加了2 这个属性 --> obj{2:2}
console.log(obj[2]);//2
 
console.log(obj.2)//Unexpected number
 
console.log(obj) //{2: 2}

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

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

如果属性名中包含会导致语法错误的字符，或者属性名是关键字或者保留字，也可以使用方括号表示法。
如：(属性名有空格，请使用方括号 [] ）

var person = {};
person['first name'] ='ling';  //first name包含一个空格
 
console.log(person['first name']);//ling
//console.log(person.first name)//书写都通不过
 
person['for'] ='ling_for'; 
person.if ='ling_if';  
 
console.log(person['for']);//ling_for
console.log(person.for);//ling_for
console.log(person['if']);//gogo_if
console.log(person.if);//ling_if