【知识点】obj.style[xxx]和obj.style.xx

以下内容均为个人整理的观点，一个个字码出来的，不喜勿喷

讲了一天的课，我又来了
初学者很多人看到这段代码的时候，可能会有些许的疑惑，咦？哪个是正确的？都有什么区别？

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];

所以按照书写习惯总结一下：常量用点，变量就用中括号

---

欢迎讨论~

拜拜，晚安