对象是js重最重要的概念之一。
在定义对象是，常用的方式是”属性定义“大法：
var obj = {
name: 'xiaoming',
age: 18,
isStudent: true
}
上面obj有3个属性，分别是name、age、isStudent。
除了”属性定义“大法，可以运用”键值定义“大法：
var obj = {
"name": 'xiaoming',
"age": 18,
"isStudent": true
}
”键值定义“对象方式和json对象格式一样，这也是为什么在js中，所谓的json对象和普通对象经常混为一谈。
这两种方式的共同点是什么？差异又是什么？
以上两种方式在定义对象时一般情况下可以混搭
var obj = {
'name': 'xiaoming', // 键值
age: 18, // 属性
isStudent: true // 属性
}
混搭后，可以正常的访问属性：
// 通过键访问name
console.log(obj['name'])
=> xiaoming
// 通过属性访问age
console.log(obj.age)
=> 18
也可以反过来：
// 通过属性访问name
console.log(obj.name)
=> xiaoming
// 通过键值访问age
console.log(obj['age'])
=> 18
通过这两个案例，一般情况下我们可以随意用属性访问的方式或键值的方式访问，但是，遇到特殊情况时：
var obj = {
'my name': 'xiaoming', // 键是‘my name’，有一个空格
age: 18, // 属性
isStudent: true // 属性
}
此时，'my name'只能通过键值访问方式来访问内容，而不能用属性方式
console.log(obj['my name']);
=> xiaoming
console.log(obj.my name);
=> error!!!!
键值方式可以采用任意字符，哪怕是中文也可以。
var obj = {
'姓名': 'xiaoming', // 键是‘my name’，有一个空格
age: 18, // 属性
isStudent: true // 属性
}
console.log(obj['姓名']);
=> xiaoming
总结：
键可以用任意字符，不满足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' }
总结
键可以是表达式，动态构建，访问时也可以动态构建键。
属性不具备这个特性。
不管是键值还是属性，都适用于值为函数时
var obj = {
'姓名': function () {
console.log('xiaoming');
},
age: function () {
console.log(18)
},
}
obj['姓名']();
obj.age();
总结
用键值还是属性，主要考虑键和属性的命名差异点，至于后面的值是什么类型无所谓。
构建动态的键，有什么应用场景
比如前端会按照分页的方式从服务端获取数据，那么每一页的数据都可以通过动态构建键的方式存储在obj对象中。
var obj = {};
getData(page) {
axios.get('url', params: {page}).then(function (response) {
obj['page=' + page] = response.data;
});
}
getData(1);
getData(2);
getData(3);
以上obj感觉像是一个键值对的数据库对象，再使用内容时操作起来很方便。
网友评论