336|4

2657

帖子

6

TA的资源

五彩晶圆(初级)

楼主
 

JavaScript -练习册(3)对象 [复制链接]

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版
 
 
 
 

查看本帖全部内容,请登录或者注册
此帖出自编程基础论坛

最新回复

感觉现在java越来越没有存在感       详情 回复 发表于 2025-2-1 08:13
点赞 关注
个人签名

希望做一些大家觉得好用的东西!

 

回复
举报

7153

帖子

11

TA的资源

版主

沙发
 
有对照学习,大佬的知识可真是广泛,我原来都是以应用为目的去学习一些东西,但是您就是非常系统的学习,这方法好!
此帖出自编程基础论坛

点评

我其实也是以应用来,但需要一些基础  详情 回复 发表于 2025-2-1 08:33
 
 
 

回复

6737

帖子

10

TA的资源

版主

板凳
 

感觉现在java越来越没有存在感    

此帖出自编程基础论坛

点评

js用的还是挺多的  详情 回复 发表于 2025-2-1 08:33
 
个人签名

在爱好的道路上不断前进,在生活的迷雾中播撒光引

 
 

回复

2657

帖子

6

TA的资源

五彩晶圆(初级)

4
 
lugl4313820 发表于 2025-2-1 07:50 有对照学习,大佬的知识可真是广泛,我原来都是以应用为目的去学习一些东西,但是您就是非常系统的学习,这 ...

我其实也是以应用来,但需要一些基础

此帖出自编程基础论坛
 
 
 

回复

2657

帖子

6

TA的资源

五彩晶圆(初级)

5
 
秦天qintian0303 发表于 2025-2-1 08:13 感觉现在java越来越没有存在感    

js用的还是挺多的

此帖出自编程基础论坛
 
 
 

回复
您需要登录后才可以回帖 登录 | 注册

随便看看
查找数据手册?

EEWorld Datasheet 技术支持

相关文章 更多>>
关闭
站长推荐上一条 2/8 下一条
Microchip 直播|利用motorBench开发套件高效开发电机磁场定向控制方案 报名中!
直播主题:利用motorBench开发套件高效开发电机磁场定向控制方案
直播时间:2025年3月25日(星期二)上午10:30-11:30
快来报名!

查看 »

 
EEWorld订阅号

 
EEWorld服务号

 
汽车开发圈

 
机器人开发圈

About Us 关于我们 客户服务 联系方式 器件索引 网站地图 最新更新 手机版

站点相关: 国产芯 安防电子 汽车电子 手机便携 工业控制 家用电子 医疗电子 测试测量 网络通信 物联网

北京市海淀区中关村大街18号B座15层1530室 电话:(010)82350740 邮编:100190

电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2025 EEWORLD.com.cn, Inc. All rights reserved
快速回复 返回顶部 返回列表