使用时的差别
定义对象时可以混搭
var obj = {
'name':'xiaoming',//键值对
age:18,//属性
isStudent:true//属性
}
可以通过属性访问也可以通过键访问
console.log(obj.name);
console.log(obj['age']);
以上看起来似乎没有什么差别。
但是 属性名义对象时，属性必须是合法的变量名，像下面这样 定义时就会报错，当然取值时也会报错。
var obj = {
my name = 'xiaoming'
}
而键值则可以正常取值赋值
var obj = {
'my name' :'xiaoming'
}
console.log(obj['my name']);
键值可以是任意字符，哪怕是中文也可以。
即：
- 键可以使用任意字符，无需满足js变量命名方式
- 属性必须满足js变量命名方式
其次
键可以是变量及表达式的值 由此可以动态创建对象
var list = ['xiaoming', 'xiaohua'];
var obj = {};
for (var i = 0; i < list.length; i++) {
obj['name=' + list[i]] = list[i];
}
console.log(obj);
=> { 'name=xiaoming': 'xiaoming', 'name=xiaohua': 'xiaohua' }
这是属性不具备的。
构建动态的键，有什么应用场景
比如前端会按照分页的方式从服务端获取数据，那么每一页的数据都可以通过动态构建键的方式存储在obj对象中。
getData(page) {
axios.get('url', params: {page}).then(function (response) {
obj['page=' + page] = response.data;
});
}
getData(1);
getData(2);
getData(3);
以上obj感觉像是一个键值对的数据库对象，再使用内容时操作起来很方便。
相关连接
探究不同点
属性定义对象和键值对定义对象实际上是对象的两种表示方法，
按照MDN相关链接所述，分别是 1. 点表示法 2. 括号表示法 这里甚至涉及到了命名空间。
点表示法
当你想访问对象内部的属性或方法时，去 点 属性 或者方法
对象的名字表现为一个命名空间(namespace)
在这里 顶部定义的对象obj就是一个命名空间，
子命名空间 把一个对象 作为 另一个对象成员对象的值 就创建了子命名空间
例如：
obj.name = {
first: "huang",
last: "xiaoming"
}
name就是子命名空间了，我们可以这么访问 obj.name.first
也可以用 obj["name"]["first"] 这个就是括号表示法
括号表示法
此段内容 均为引用
另外一种访问属性的方式是使用括号表示法(bracket notation)，替代这样的代码
person.age
person.name.first
使用如下所示的代码：
person['age']
person['name']['first']
这看起来很像访问一个数组的元素，从根本上来说是一回事儿，你使用了关联了值的名字，而不是索引去选择元素。难怪对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射，而数组做的是数字到值的映射。
结论
括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字。
点表示法只能接受字面量的成员的名字，不接受变量作为名字。
简单来说就是 括号表示法 括号里 可以是个变量
比如：
var person = {};
var myDataName = 'height';
var myDataValue = '1.75m';
person[myDataName] = myDataValue;
console.log(person.height);
打印结果为 1.75m
person对象是这样{ height: '1.75m' }
这里 person 的属性是动态设置的，使用点表示法是无法做到这一点的。
所以，括号表示法 比 点表示法 更强大，但是 点表示法 更方便
其实，实际中我们有也可能用到过，只是没注意罢了
平常用点表示法要方便许多，当要用到一个变量作为对象的属性的时候，只能括号表示法，自然就会用括号表示法了。
