29-对象的基本操作

文档摘要

title: 29-对象的基本操作对象的基本操作创建对象使用 new 关键字调用的函数，是构造函数 constructor。构造函数是专门用来创建对象的函数。例如：记住，使用检查一个对象时，会返回。关于创建对象的更多方式，可以看上一篇文章《对象的创建&构造函数》。向对象中添加属性在对象中保存的值称为属性。向对象添加属性的语法：举例：打印结果：这里我们也可以看出一个规律：如果对象里本身没有某个属性，则用点语法赋值时，这个属性会被创建出来。获取对象中的属性方式 1：语法：如果获取对象中没有的属性，不会报错而是返回。


title: 29-对象的基本操作

对象的基本操作

创建对象

使用 new 关键字调用的函数，是构造函数 constructor。构造函数是专门用来创建对象的函数。

例如：


const obj = new Object();

记住，使用typeof检查一个对象时，会返回object。

关于创建对象的更多方式，可以看上一篇文章《对象的创建&构造函数》。

向对象中添加属性

在对象中保存的值称为属性。

向对象添加属性的语法：


对象.属性名 = 属性值;

举例：


const 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。

举例：


const 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;

当然，如果属性名遵循了标识符的命名规范，也可以使用方括号操作属性。

重要：使用[]这种形式去操作属性会更灵活，因为我们可以在[]中传递一个变量。也就是说，如果属性名以变量的形式存储，请记得也必须使用方括号的形式操作属性。这在日常开发中，使用得非常多。比如：


const person = {
		name: '千古壹号',
    age: 30
}

const myKey = 'name';
// 错误的访问方式
console.log(obj.myKey); // undefined
// 正确的访问方式
console.log(obj[myKey]); // 千古壹号

修改对象的属性值

语法：


对象.属性名 = 新值;

举例：


obj.name = 'qiangu yihao';

删除对象的属性

语法：


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);
}

打印结果：

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: 'qianguyihao',
                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
属性值:qianguyihao

属性名: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

赞赏作者

创作不易，你的赞赏和认可，是我更新的最大动力：