获取对象属性的点方法和中括号法的区别

今天写题的时候遇到用点取不到对象这个问题，
题目大致是这个样子

    console.log($element);//{BranchId: "0003", CHName: "哈哈哈", ShortName: "嘻嘻嘻"}
    console.log(CacheData.columns[0])//BranchId;
    console.log(CacheData.columns[1])//CHName;
    console.log($element.BranchId)//0003
    console.log($element.CHName)//哈哈哈
    console.log($element.CacheData.columns[0])//语法错误
    var firstTd = $element[CacheData.columns[0]];//正确
    var secondTd = $element[CacheData.columns[1]];//正确

BranchId 这个对象是不确定的，通过这个CacheData.columns[0]可以获取对应的BranchId ，类似于CacheData.columns[0] == BranchId；这两个是一样的，但是在用点语法取值的时候是错误的，后来听大神指导明白了原来对象是变量的时候不能用点语法来取值；

var obj = {'name':'张三','age':'18'};
var getName = obj.name;//点方法
var getAge = obj['age'];//中括号法
console.log(getName);//打印结果:张三
console.log(getAge);//打印结果:18

var obj = {'34':{
        '可能错误原因':'无',
        '错误代码':'D000',
        '错误位置':'接收方成员行(MEMBER)',
        '错误描述':'无',
    }};

应该有同学注意到了吧,有个属性名是数字,这个时候用点语法就会报错,用中括号就可以:

console.log(obj.34);//语法报错
console.log(obj['34']);//正常获取到;

所以说,点语法和中括号法还是有区别的,根据查资料,结论如下:

1、中括号法可以用变量作为属性名,而点方法不可以;

var obj = {};
obj.name = '张三';
var myName = 'name';
console.log(obj.myName);//undefined,访问不到对应的属性
console.log(obj[myName]);//张三

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

3、中括号法可以使用js的关键字和保留字作为属性名,而点语法不可以(尽量避免在变量或者属性中使用关键字或保留字);

转自：https://www.cnblogs.com/hjvsdr/p/6638826.html