JavaScript 对象
对象 指包含数据和用于处理数据的指令的数据结构. 对象有时也指现实世界中的一些事, 例如在赛车游戏当中一辆车或者一幅地图都可以是一个对象。—— MDN
1. 创建对象
对象的格式如下：
{
prop1: 'value1',
prop2: ,
prop3: {},
method1: function() {
},
}
对象最简单的创建方式就是使用对象字面量。
var person = {};
以上创建了一个最简单的空对象。
对象在 JavaScript 中的应用范围非常广。
显然数值、字符串、布尔类型这些数据类型是不太适合描述这样一个人的。
这个时候就可以考虑使用对象，也就是说当需要描述的事物变得复合（无法使用单一的数据类型描述的时候），就可以考虑使用对象存储数据。
var person = {
'name': '小明',
'age': ,
isAdult: false,
sex: 'man',
hobby: ['eat', 'sleep', 'play doudou'],
parents: {
mather: {
name: '大红',
},
father: {
name: '大明',
},
},
say: function() {
console.log('我叫' + this.name + '，我今年' + this.age + '岁了。');
},
};
console.log(person); // 在控制台可以观察 person 对象
其中部分属性在声明的时候，属性名上加上了引号，这在 JavaScript 中是被允许的，但一般情况下不会加上引号，原因之一是没有必要加，不应该与字符串混淆，另外一点就是可以消除初学者对 JSON 和 JavaScript 对象在理解上的歧义。
2. 操作对象
2.1 访问对象的属性值
访问属性有 2 种方式：
var obj = {
key: 'value',
say: function() {
console.log('never 996');
},
};
console.log(obj.key); // 输出："value"
console.log(obj['key']); // 输出："value"
obj.say(); // 输出："never 996"
obj['say'](); // 输出："never 996"
这两种方式都很常用。第二种通常会应用在需要用变量确定属性名的时候去使用。
var person = {
age: ,
name: '鸽手',
};
Object.keys(person).forEach(function(key) {
console.log(person[key]);
});
var obj = {};
console.log(obj.value); // 输出：undefined
2.2 设置对象的属性值
设置属性值也有 2 种方式：
设置属性值按照如下规则进行：
var person = {
age: ,
};
person.name = '阿花';
person['hobby'] = ['eat', 'play doudou'];
console.log(person);
person.age = ;
console.log(person);
3. 使用特殊的属性名
对象的属性名是可以用任意字符串表示的。
上面有提到，声明属性的时候可以带上引号。
var obj = {
--^$@@@age: ,
};
var obj = {
'--^$@@@age': ,
};
var obj = {
'--^$@@@age': ,
};
var val = obj.--^$@@@age;
JavaScript 无法解析这种特殊的语法，所以要使用 对象['属性名'] 的形式访问。
var obj = {
'--^$@@@age': ,
};
var val = obj['--^$@@@age'];
console.log(val); // 输出：16
var counter = {};
var strs = [
'#@T%TGFDSgfdsgsf',
'#@T%TGFDSgfdsgsf',
'123fdafeafewa',
'123fdafeafewa',
'#@T%TGFDSgfdsgsf',
];
strs.forEach(function(item) {
if (item in counter) {
counter[item]++;
} else {
counter[item] = ;
}
});
console.log(counter);
strs 是由字符串组成的数组，即需要统计的一组数据。
利用对象的特性来对字符串分类计数。
4. 其他创建对象的方法
除了字面量的方式，还有许多创建对象的方式。
4.1 使用 Object 对象
使用 new Object() 或者 Object() 的方式也可以创建一个对象
var obj1 = new Object();
var obj2 = new Object; // 如果没有参数 可以不带括号
var obj3 = Object();
上面的方式都可以创建一个空对象。
var obj1 = new Object({
age: ,
name: '长睫毛',
});
var obj2 = Object({
age: ,
name: '小酒窝',
});
console.log(obj1, obj2);
4.2 构造函数
使用构造函数，也可以创建对象。
function Car(color, maxSpeed) {
this.color = color;
this.maxSpeed = maxSpeed;
}
Car.prototype.bibi = function() {
console.log('哔哔！');
};
var car = new Car('red', );
console.log(car);
4.3 Object.create
var parent = {
walk: function() {
console.log('走路');
},
};
var son = Object.create(parent);
console.log(parent === son);
son.walk();
5. 遍历对象
5.1 for … in
var me = {height: , weight: };
var i;
for (i in me) {
console.log(i);
console.log(me[i]);
}
需要注意的是 for ... in 循环只遍历可枚举属性，同时对象原型上的也会被访问到。
var me = {height: , weight: };
var you = Object.create(me);
you.age = ;
var i;
for (i in you) {
console.log(i);
}
上面这个例子就把 me 和 you 中的所有属性都遍历出来了。
var me = {height: , weight: };
var you = Object.create(me);
you.age = ;
var i;
for (i in you) {
if (you.hasOwnProperty(i)) {
console.log(i);
}
}
这样就只会输出 age 了。
5.2 Object.keys
Object.keys 会返回对象上的所有可枚举属性组成的数组。
var gugugu = {
name: '?王',
hobby: '放鸽子',
};
var keys = Object.keys(gugugu);
console.log(keys);
keys.forEach(function(key) {
console.log(gugugu[key])
});
通过遍历属性组成的数组来遍历对象。
5.3 Object.getownPropertyNames
var gugugu = {
name: '?王',
hobby: '放鸽子',
};
var desc = Object.create(null);
desc.enumerable = false; // 是否可枚举 默认就是false
desc.value = '最强鸽手';
Object.defineProperty(gugugu, 'nickname', desc);
console.log(Object.keys(gugugu));
console.log(Object.getownPropertyNames(gugugu));
注意：ES6 还提供了
Object.values、Object.entries、for ... of、Reflect.ownKeys等特性，结合这些特性也能遍历一个对象。
6. 创建绝对纯净的对象
纯净对象仅为本篇中的称呼方式，这种特殊的对象没有特定的称呼。
纯净对象即原型为 null 的对象。
使用 Object.create(null) 来创建纯净对象。
var obj1 = Object.create(null);
console.log(obj1);
var obj2 = {};
console.log(obj2);
7. 小结
对象最常用的两种创建方式，就是使用字面量和构造函数。