JavaScript -练习册(3)对象
在JavaScript里面语句大多用法也和C语言相通,例如for while if else有C语言基础就不在赘述,今天咱们来聊聊对象。
JS里的对象和C的结构体有点像,以下是JS对象和C语言结构体的对比
DeepSeek生成
以下是C语言结构体和JS对象的对比:
// C 的结构体
struct Point {
int x;
int y;
};
struct Point p1 = {10, 20};
printf("x: %d, y: %d", p1.x, p1.y); // 访问成员 |
// JavaScript 对象
const point = {
x: 10,
y: 20,
print() { // 可以包含函数(方法)
console.log(`x: ${this.x}, y: ${this.y}`);
}
};
point.print(); // 调用方法
console.log(point.x+ point.y); |
DeepSeek生成结束
看起来和结构体比较像,但是直接调用了Print的函数,我们可以新建一个Object.js来测试js的对象,运行上面代码调用对象里面的函数。运行结果如下图1所示。
图1:调用Point对象里的内容运行结果
在这个对象里this代表调用该方法的对象实例,就是调用对象里的参数信息,如果不加this就会报错,有点像Python类里面的self。${}代表将字符串插入在一整个Str之间。类似python f”str{x}”的语法,用字符串替换x的内容。
在JS的对象里面如果不需要对象里的内容可以增加或者减少,基于上面的对象函数我们增加或者删除对象里面的内容做测试,代码如下,运行结果如图2所示。
point.print(); // 调用方法
point.z = 30; // 添加属性
console.log(point.x+ point.y,point.z);
delete point.y; // 删除属性
point.print(); // 调用方法 |
图2:运行结果
结果第一行,打印x和y的值没错
结果第二行,打印x+y的值,以及打印z的值 都是30没错
结果第三行,删除了y所以打印的时候y是没有定义的
通过上面 的例子我们完成了对象里属性的删减以及增加,我们可以通过in的方法去测试对象里的属性是否存在,也可以判断数据是不是undefined,下面给出一个简单的例子:
console.log("x" in point); // 检查属性是否存在
console.log(point.x !== undefined); // 检查属性是否存在
console.log("y" in point); // 检查属性是否存在
console.log(point.y !== undefined); // 检查属性是否存在
console.log("修改x属性等于undefined");
point.x = undefined;
console.log("x" in point); // 检查属性是否存在
console.log(point.x !== undefined); // 检查属性是否存在 |
注意⚠️:在JS里面判断是不是相等要=== 三个=,判断不等 要用!==,用==是宽松相等,会进行类型转换,而`===`是严格相等,不进行类型转换。一个=是赋值。
运行上面的例子输出结果如下图3所示:
图3:对象属性测试
咱们从第一个True开始看,因为x的值真实存在,并且值不等于undefined所以使用in和!==时候都能得出true的结果,但我手动修改x的属性等于undefined时候那么只有in管用,因为x真实存在,但是ta的值等于undefined,大概知道这个意思即可。
因为对象的属性是可以被枚举的我们可以通过for语句把对象的属性打印出来,以下是简单的例子:
// JavaScript 对象
const point = {
x: 10,
y: 20,
print() { // 可以包含函数(方法)
console.log(`x: ${this.x}, y: ${this.y}`);
}
};
for(let i in point){
console.log(i, point);
}
point.z = 30; // 添加属性
delete point.y; // 删除属性
for(let i in point){
console.log(i, point);
} |
运行结果如下图4所示:
图4:枚举对象属性运行结果
也可以用自带的函数去遍历对象的属性值和属性名,以下是个简单的例子,图5则为运行结果。
console.log('属性名');
console.log(Object.keys(point)); // 获取所有属性名
console.log('属性值');
console.log(Object.values(point)); // 获取所有属性值
console.log('属性名和值');
console.log(Object.entries(point)); // 获取所有属性名和属性值 |
图5:获取的属性名和属性值结果
根据以上内容已经对object有一些了解,真用起来遇到什么问题就去查参考文档吧,里面有更详细的说明,今天就先到这里啦!拜拜!
参考文档:
JavaScript权威指南第7版