以下内容均为个人整理的观点，一个个字码出来的，不喜勿喷
讲了一天的课，我又来了
初学者很多人看到这段代码的时候，可能会有些许的疑惑，咦？哪个是正确的？都有什么区别？
var exItem1 = obj.style.width;
var exItem2 = obj.style['width'];
var exItem2 = obj.style[width];
也就是访问对象的属性时“ . ”和“ [ ] ”的区别
那首先问一下，在 JS 中有几种方法能获取对象的属性？
答案是:获取对象的属性两种方法，点操作符或者中括号操作符 （也可以称作成员访问）
请看以下案例：
<div id='content' style="width:100px;"></div>
<script>
var content = document.getElementById('content');
console.log(content.style.width);//'100px'
console.log(content.style['width']);//'100px'
</script>
在案例中，我们看到，两种方法都能获取style对象上的width属性。
这两种语法，在目前的书写情况下是等效的。
那那那。。。你说半天就这个？别着急！！！
说的是个啥？？？
-
中括号运算符可以用字符串变量的内容作为属性名,点运算符不能。
<div id='content' style="width:100px;"></div>
<script>
//首先定义一个变量保存一会要获取的属性名
var biu = "width";
//使用中括号运算符获取 变量a保存的属性名的值(注意变量不加引号)
console.log(content.style[biu]);//'100px'
//如果使用 点操作符 获取属性，那么获取失败
//因为你获取的是style对象里的a属性，把a当成属性名解析，而不是当成变量a解析
console.log(content.style.biu);//空
</script>
-
中括号运算符可以用纯数字为属性名。点运算符不能。
var obj = {};
//如果给obj使用点操作符扩展一个 数字或者数字开头的属性，会报错
//报错内容：Uncaught SyntaxError: Unexpected number
obj.2 = "hello";
console.log(obj.2);
var obj = {};
//给对象扩展一个 属性名为2 的属性，值为world
obj[2] = "world";
//可以获取到属性名为2的属性值
console.log(obj[2]);
有人说，开玩笑怎么会有属性名为数字的对象哟，那你可以了解一下类数组对象
所以，当我们读取obj对象的 name 属性时，有两种正确写法：
obj.name;
obj['name'];
当 name 被一个变量 a 保存起来的时候，我们想要通过变量 a访问时，只能这么写：
obj[a];
所以按照书写习惯总结一下：常量用点，变量就用中括号
欢迎讨论~
拜拜，晚安
网友评论