JavaScript 对象入门:基础用法全解析

 

目录

对象

语法

属性和访问

方法和调用

this关键字

null

遍历对象

内置对象

Math

属性

方法

Date 

创建日期对象

获取和设置日期


⭐对象

对象是 JavaScript 数据类型的一种,数据类型也包括数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。

✨语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

这是创建单个对象最直接的方法。只需简单地列出以逗号分隔的键值对,用花括号包围起来即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript对象</title>
</head>
<body>
​<script>// 声明字符串类型变量let str = 'hello world!'// 声明数值类型变量let num = 199
​// 声明对象类型变量,使用一对花括号// user 便是一个对象了,目前它是一个空对象let user = {}</script>
</body>
</html>

✨属性和访问

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。

  1. 属性都是成对出现的,包括属性名,它们之间使用英文 : 分隔

  2. 多个属性之间使用英文 ',' 分隔

  3. 属性就是依附在对象上的变量

  4. 属性名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 对象</title>
</head>
<body>
​<script>// 通过对象描述一个人的数据信息// person 是一个对象,它包含了一个属性 name// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔let person = {name: '小明', // 描述人的姓名age: 18, // 描述人的年龄stature: 185, // 描述人的身高gender: '男', // 描述人的性别}</script>
</body>
</html>

可以通过点符号或方括号访问对象的属性。点符号是最常见的访问属性的方式,但如果属性名包含特殊字符或者是变量,就需要使用方括号。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 对象</title>
</head>
<body>
​<script>// 通过对象描述一个人的数据信息// person 是一个对象,它包含了一个属性 name// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔let person = {name: 'w', // 人的姓名age: 18, // 人的年龄stature: 185, // 人的身高gender: '男', // 人的性别};// 访问人的名字console.log(person.name) // w// 访问人性别console.log(person.gender) //  男// 访问人的身高console.log(person['stature']) //  185// 或者console.log(person.stature) //  185</script>
</body>
</html>

 

扩展:也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 对象</title>
</head>
<body>
​<script>// 声明一个空的对象(没有任何属性)let user = {}// 动态追加属性user.name = 'w'user['age'] = 8// 动态添加与直接定义是一样的,只是语法上更灵活</script>
</body>
</html>

修改和添加属性

// 修改属性
person.age = 35;// 添加新属性
person.gender = "female";console.log(person); // 输出: {name: "Alice", age: 35, gender: "female"}

删除属性

使用 delete 关键字可以从对象中删除属性。

delete person.age;
console.log(person); // 输出: {name: "Alice", gender: "female"}

✨方法和调用

数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。

  1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔

  2. 多个属性之间使用英文 , 分隔

  3. 方法是依附在对象中的函数

  4. 方法名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript  对象方法</title>
</head>
<body>
​<script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,// 方法是由方法名和函数两部分构成,它们之间使用 : 分隔singing: function () {console.log('两只老虎,两只老虎,跑的快,跑的快...')},run: function () {console.log('我跑的非常快...')}}</script>
</body>
</html>

声明对象,并添加了若干方法后,可以使用 .[] 调用对象中函数,称之为方法调用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 对象方法</title>
</head>
<body>
​<script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,// 方法是由方法名和函数两部分构成,它们之间使用 : 分隔singing: function () {console.log('两只老虎,两只老虎,跑的快,跑的快...')},run: function () {console.log('我跑的非常快...')}}// 调用对象中 singing 方法person.singing()// 调用对象中的 run 方法person.run()
​</script>
</body>
</html>

扩展:也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 对象方法</title>
</head>
<body>
​<script>// 声明一个空的对象(没有任何属性,也没有任何方法)let user = {}// 动态追加属性user.name = '小明'user.['age'] = 18// 动态添加方法user.move = function () {console.log('移动一点距离...')}</script>
</body>
</html>

注:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。

this关键字

this 关键字是一个特殊变量,它指向函数调用的上下文对象。在方法中使用 this 可以访问调用该方法的对象的属性。

let person = {name: "Alice",greet: function() {console.log("Hello, my name is " + this.name);}
};person.greet(); // 输出: Hello, my name is Alice

✨null

null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object

📖遍历对象
let obj = {uname: 'pink'
}
for(let k in obj) {// k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'// obj[k]  属性值    obj['uname']   obj[k]
}

 

for in 不提倡遍历数组 因为 k 是 字符串

⭐内置对象

回想一下我们曾经使用过的 console.logconsole其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()

除了 console 对象外,JavaScritp 还有其它的内置的对象

✨Math

Math 是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。

📖属性
  • Math.PI,获取圆周率

// 圆周率
console.log(Math.PI);
📖方法
  • Math.random,生成 0 到 1 间的随机数

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
  • Math.ceil,数字向上取整

// 舍弃小数部分,整数部分加1
Math.ceil(3.4)
  • Math.floor,数字向下取整

// 舍弃小数部分,整数部分不变
Math.floor(4.68)
  • Math.round,四舍五入取整

// 取整,四舍五入原则
Math.round(5.46539)
Math.round(4.849)
  • Math.max,在一组数中找出最大的

// 找出最大值
Math.max(10, 21, 7, 24, 13)
  • Math.min,在一组数中找出最小的

// 找出最小值
Math.min(24, 18, 6, 19, 21)
  • Math.pow,幂方法

// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
  • Math.sqrt,平方根

// 求某数的平方根
Math.sqrt(16)

对于内置对象方法的使用,我们只需要勤加练习就可以熟练使用,不需要死记硬背。

✨Date 

Date 对象用于处理日期和时间。

📖创建日期对象

可以通过多种方式创建 Date 对象,包括使用当前日期和时间、指定日期和时间等。

let now = new Date();
let specificDate = new Date("2024-05-01");
let specificDateTime = new Date(2024, 5, 1, 15, 0, 0); // 2024年5月1日15点0分0秒
📖获取和设置日期

Date 对象提供了多种方法来获取和设置具体的日期和时间。

console.log(now.getFullYear()); // 获取年份
console.log(now.getMonth()); // 获取月份,注意月份是从0开始计数的
console.log(now.getDate()); // 获取日now.setFullYear(2025);
now.setHours(20);
console.log(now); // 输出修改后的日期和时间

____________________

⭐感谢你的阅读,希望本文能够对你有所帮助。如果你喜欢我的内容,记得点赞关注收藏我的博客,我会继续分享更多的内容。⭐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/837354.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

程序员之路:裁员与内卷下的生存之道

作为一名普通的程序员&#xff0c;身处这个瞬息万变的IT行业&#xff0c;面对着今年不断加剧的裁员浪潮和日益激烈的内卷竞争&#xff0c;我时常感到焦虑和不安。然而&#xff0c;正是这些挑战&#xff0c;让我们更加深入地思考了在这个行业中&#xff0c;我们该如何找到自己的…

2024统计建模中国新质生产力统计测度与时空演变及其驱动因素研究

高质量成品论文46页word版本1.5w字书写完整数据集1000行py代码一等奖论文&#xff01;这里仅展示部分内容&#xff0c;完整版在下面的链接。 【1.5w字全网最佳】2024统计建模大赛高质量成品论文39页配套完整代码运行全套数据集https://www.jdmm.cc/file/2710661/ 中国新质生产…

【2024HNCTF】密码组部分出题记录

2024H&NCTF 密码组部分出题记录 题目&#xff1a;BabyPQ、HappyDance 文章目录 2024H&NCTF 密码组部分出题记录BabyPQ | 签到HappyDance BabyPQ | 签到 本题为nc交互题&#xff0c;之所以采用这种形式&#xff0c;是因为可能有很多密码新师傅们不了解这种赛题形式&a…

AI机器人火了,探讨早就可以帮我们开拓市场的中关村科金语音机器人

近期AI机器人给我们带来了不少惊喜&#xff0c;比如国外 Figuer 联合 OpenAI 做了 Chatgpt 机器人&#xff0c;可以通过对话后推理干活&#xff0c;国内仿生机器人员工也开始量产&#xff0c;看到AI机器人不禁想到会不会替代我们的工作&#xff1f;我们了解到很多机器人厂家的…

#初阶模板

目录 1.泛型编程 2.模板 &#xff08;1&#xff09;函数模板 &#xff08;2&#xff09;举个栗子&#xff08;模板的使用&#xff09; 1.模板的声明有两种形式 2.函数模板的原理 &#xff08;3&#xff09;模板参数的匹配原则 &#xff08;4&#xff09;类模板 类模板…

AI图像生成-原理

一、图像生成流程总结 【AI绘画】深入理解Stable Diffusion&#xff01;站内首个深入教程&#xff0c;30分钟从原理到模型训练 买不到的课程_哔哩哔哩_bilibili 二、如果只是用comfy UI生成图片 1、找到下面几个文件&#xff0c;把对应模型移动到对应文件夹即可使用 2、选择对…

大学c语言基础很差,能不能学51单片机?会不会很困难?

开始前我分享下我的经历&#xff0c;我刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;一年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些51单片机学习方法和资料&#xff0c;让我不断提升自己&#xff0c;感谢帮助过我的人&#xff0c; 如大家和我一样…

python turtle 升国旗

​一、导语 大家好,前段时间,我们画出了五星红旗,今天我们要用Python的Turtle库来绘制一个五星红旗,并让国旗上升,让我们一起来感受编程与艺术的完美结合吧!领略国家的强大!爱祖国,做一个遵纪守法的好公民。 二、效果展示 升国旗 三、开发过程 一、准备工作 首先我们…

OpenAI深夜震撼发布最新模型GPT-4o,送上最快速便捷教程

北京时间5月14日凌晨&#xff0c;有人说OpenAI一夜改变了历史。 在我们的深夜、太平洋时间的上午 10 点&#xff0c;OpenAI 召开春季发布会&#xff0c;公布了最新的GPT-4o模型&#xff0c;o代表Omnimodel&#xff08;全能模型&#xff09;。20多分钟的演示直播&#xff0c;展…

美国加州正测试ChatGPT等生成式AI,在4大部门应用

5月11日&#xff0c;美联社消息&#xff0c;美国加州政府正在测试ChatGPT等生成式AI&#xff0c;应用在税收和收费管理部、交通部、公共卫生部以及卫生与公众服务部4大部门。 测试时间6个月&#xff0c;为其提供技术支持的一共有5家公司&#xff0c;分别是OpenAI、Anthropic、…

成都新增数字产业园,打造生态经济新引擎

成都产业园运营方树莓集团——数字产业生态链建设者。秉持高效、友善、敢为的集团核心文化&#xff0c;有效链接政、产、企、校四个板块&#xff0c;构建了产业生态闭环系统。在成都市区内&#xff0c;已布局了多家数字文创产业园&#xff0c;其中具有代表性的参考国际数字影像…

Linux 第三十一章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

GRFB-UNet:一种新的多尺度注意力网络,用于铺路分割

不同场景下的带注释的触觉铺装示例: GRFB-UNet网络结构: GRFB模块的结构: 铺路在视障人士的旅行中起着至关重要的作用。因此,识别铺装的形状和位置以支持视障人士的移动性是相当有意义的,而视觉分割技术就适合这项任务。为了有效提高触觉铺装分割的精度和鲁棒性,…

httpsok-v1.11.0支持CDN证书自动部署

&#x1f525;httpsok-v1.11.0支持CDN证书自动部署 介绍 httpsok 是一个便捷的 HTTPS 证书自动续签工具&#xff0c;专为 Nginx 、OpenResty 服务器设计。已服务众多中小企业&#xff0c;稳定、安全、可靠。 一行命令&#xff0c;一分钟轻松搞定SSL证书自动续期 v1.11.0 版…

从“山寨的”MTK芯片发展历程 同类芯片比较基础常识 如何简单识别mtk机型

联发科技&#xff08;MediaTek Inc.简称“联发科” &#xff0c;联发科起家于CD-ROM芯片&#xff0c;直接将DVD内分别承担视频和数字解码功能的两颗芯片整合到了一颗芯片上&#xff0c;并提供相应的软件方案。并一度占据大陆DVD市场60%的芯片供应量&#xff01;他将图像处理、M…

证卡打印机打印头故障的主要原因以及如何预防

爱立识打印头故障的主要原因主要包括以下几点&#xff1a; Evolis 打印机清洁卡 灰尘或碎屑堆积&#xff1a;长时间不清洁打印机导致灰尘或碎屑在机器内积累&#xff0c;可能会导致打印头划伤或堵塞。 使用不洁的卡片&#xff1a;使用不洁的卡片可能会导致灰尘或污垢进入打印机…

气膜建筑为何能够建在楼顶—轻空间

近年来&#xff0c;随着体育设施建设的推进和政策支持&#xff0c;越来越多的体育从业者将目光聚焦到了楼顶&#xff0c;希望通过在楼顶加盖气膜馆来充分利用有限的土地资源。那么&#xff0c;为什么气膜建筑能够建在楼顶呢&#xff1f;轻空间将从气膜建筑的结构特点、安全性、…

Java的VO,BO,PO,DO,DTO

写在前面 本文看下VO&#xff0c;BO&#xff0c;PO&#xff0c;DO&#xff0c;DTO&#xff0c;都是啥&#xff01; 1&#xff1a;正文 先看一张图&#xff0c;看了图就能知道个大概了&#xff1a; 1.1&#xff1a;PO 全称是persistent object&#xff0c;对应数据的表&am…

Linux - make与makefile

文章目录 什么是make和makefile如何使用依赖关系 和 依赖方法伪目标 写个程序-进度条换行和回车的区别 什么是make和makefile make是一个命令 makefile是一个文件 这就是make和makefile的本质 make和 ll , pwd ,su 一样都是命令 makefile和 test &#xff0c; test.c 一样都是…

REACT 在组件之间共享状态

有时&#xff0c;您希望两个组件的状态始终一起变化。要做到这一点&#xff0c;请从他们俩身上删除状态&#xff0c;将其移动到他们最近的共同父级&#xff0c;然后通过道具将其传递给他们。这被称为提升状态&#xff0c;这是编写 React 代码时最常见的事情之一。 举例提升状态…