对象的属性差异

对象是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感觉像是一个键值对的数据库对象,再使用内容时操作起来很方便。

推荐阅读更多精彩内容