5.7 KiB
| title | publish |
|---|---|
| 27-对象的基本操作 | true |
对象的基本操作
创建对象
使用 new 关键字调用的函数，是构造函数 constructor。构造函数是专门用来创建对象的函数。
例如：
var obj = new Object();
记住，使用typeof检查一个对象时，会返回object。
关于常见对象的更多方式，可以看上一篇文章《对象的创建&构造函数》。
向对象中添加属性
在对象中保存的值称为属性。
向对象添加属性的语法：
对象.属性名 = 属性值;
举例：
var obj = new Object();
//向obj中添加一个name属性
obj.name = '孙悟空';
//向obj中添加一个gender属性
obj.gender = '男';
//向obj中添加一个age属性
obj.age = 18;
console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来
打印结果：
{
"name":"孙悟空",
"gender":"男",
"age":18
}
获取对象中的属性
方式 1：
语法：
对象.属性名;
如果获取对象中没有的属性，不会报错而是返回undefined。
举例：
var obj = new Object();
//向obj中添加一个name属性
obj.name = '孙悟空';
//向obj中添加一个gender属性
obj.gender = '男';
//向obj中添加一个age属性
obj.age = 18;
// 获取对象中的属性，并打印出来
console.log(obj.gender); // 打印结果：男
console.log(obj.color); // 打印结果：undefined
方式 2：可以使用[]这种形式去操作属性
对象的属性名不强制要求遵守标识符的规范，不过我们尽量要按照标识符的规范去做。
但如果确实要使用特殊的属性名，就不能采用.的方式来操作对象的属性。比如说，123这种属性名，如果我们直接写成obj.123 = 789来操作属性，是会报错的。那怎么办呢？办法如下：
语法格式如下：（读取时，也是采用这种方式）
// 注意，括号里的属性名，必须要加引号
对象['属性名'] = 属性值;
上面这种语法格式，举例如下：
obj['123'] = 789;
重要：使用[]这种形式去操作属性，更加的灵活，因为，我们可以在[]中直接传递一个变量。
修改对象的属性值
语法：
对象.属性名 = 新值;
obj.name = 'tom';
删除对象的属性
语法：
delete obj.name;
in 运算符
通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回 true，没有则返回 false。
语法：
'属性名' in 对象;
举例：
//检查对象 obj 中是否含有name属性
console.log('name' in obj);
我们平时使用的对象不一定是自己创建的，可能是从接口获取的，这个时候，in 运算符可以派上用场。
当然，还有一种写法可以达到上述目的：
if (obj.name) {
// 如果对象 obj 中有name属性，我就继续做某某事情。
}
for of：遍历数组
ES6 中，如果我们要遍历一个数组，可以这样做：
let arr1 = [2, 6, 8, 5];
for (let value of arr1) {
console.log(value);
}
打印结果：
2
6
8
5
for ... of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用 for…of 遍历数组。
注意，上面的数组中，for ... of获取的是数组里的值；如果采用for ... in遍历数组，则获取的是 index 索引值。
Map 对象的遍历
for ... of既可以遍历数组，也可以遍历 Map 对象。
for in：遍历对象的属性
for ... in主要用于遍历对象，不建议用来遍历数组。
语法：
for (const 变量 in 对象) {
}
解释：对象中有几个属性，循环体就会执行几次。每次执行时，会将对象中的每个属性的 属性名 赋值给变量。
语法举例：
for (var key in obj) {
console.log(key); // 这里的 key 是：对象属性的键（也就是属性名）
console.log(obj[key]); // 这里的 obj[key] 是：对象属性的值（也就是属性值）
}
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
const obj = {
name: 'smyhvae',
age: 28,
gender: '男',
address: 'shenzhen',
sayHi: function () {
console.log(this.name);
},
};
// 遍历对象中的属性
for (const key in obj) {
console.log('属性名:' + key);
console.log('属性值:' + obj[key]); // 注意，因为这里的属性名 key 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
}
</script>
</head>
<body></body>
</html>
打印结果：
属性名:name
属性值:smyhvae
属性名:age
属性值:26
属性名:gender
属性值:男
属性名:address
属性值:shenzhen
属性名:sayHi
属性值:function() {
console.log(this.name);
}
for in 遍历数组（不建议）
另外，for in 当然也可以用来遍历数组（只是不建议），此时的 key 是数组的索引。举例如下：
const arr = ['hello1', 'hello2', 'hello3'];
for (const key in arr) {
console.log('属性名：' + key);
console.log('属性值：' + arr[key]);
}
打印结果：
属性名：0
属性值：hello1
属性名：1
属性值：hello2
属性名：2
属性值：hello3