当前位置： 首页 > news >正文

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

news 2025/11/13 20:22:06

 

目录

对象

语法

属性和访问

方法和调用

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.log，console其实就是 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); // 输出修改后的日期和时间

____________________

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

相关文章：

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

目录 对象 语法 属性和访问 方法和调用 this关键字 null 遍历对象 内置对象 Math 属性 方法 Date 创建日期对象 获取和设置日期 ⭐对象 对象是 JavaScript 数据类型的一种&#xff0c;数据类型也包括数值类型、字符串类型、布尔类型、undefined。对象数据类型可…...

编程日记 2024/5/14 13:07:53

如何获得一个Oracle 23ai数据库（docker容器）

准确的说&#xff0c;是Oracle 23ai Free Developer版&#xff0c;因为企业版目前只在云上&#xff08;OCI和Azure&#xff09;和ECC上提供。 方法包括3种&#xff0c;本文介绍第3种&#xff1a; Virtual ApplianceRPM安装Docker 我已经有了一台Oracle Linux 8的虚机&#x…...

编程日记 2024/5/14 13:05:50

想跨境出海？云手机提供了一种可能性

全球化时代&#xff0c;越来越多的中国电商开始将目光投向了海外市场。这并不是偶然&#xff0c;而是他们在长期的市场运营中&#xff0c;看到了出海的必要性和潜在的机会。 中国的电商市场无疑是全球最大也最发达的之一。然而&#xff0c;随着市场的不断发展和竞争的日益加剧…...

编程日记 2024/5/14 13:04:49

制药行业新突破：CANOpen转PROFINET网关配置案例解析

在药品制造工业环境中&#xff0c;实现CanOpen转Profinet协议之间转换的网关配置是一个关键过程&#xff0c;确保了不同通信协议的设备能够互相协作。以开疆智能CanOpen转Profinet网关为例&#xff0c;以下是其配置流程&#xff1a;首先安装CanOpen转Profinet网关的配置软件&am…...

编程日记 2024/5/14 13:02:47

vue前端时间段选择控件

实现效果: 可选具体的某天的某时某分某秒 vue前端代码: <el-form-item label"日期"><el-date-pickerv-model"daterangerq"style"width: 240px"value-format"yyyy-MM-dd HH:mm:ss"type"datetimerange"range-separat…...

编程日记 2024/5/14 13:01:45

用wordpress建外贸独立站的是主流的外贸建站方式

WordPress因其易用性、灵活性和强大的功能支持&#xff0c;成为了外贸企业首选的网站建设平台。 从技术和功能角度来看&#xff0c;WordPress提供了丰富的主题和插件&#xff0c;这些都是构建专业外贸网站所必需的。例如&#xff0c;有专门为外贸网站设计的主题和插件&#xf…...

编程日记 2024/5/14 13:00:44

差异基因散点图绘制教程

差异基因散点图绘制教程 本期教程 小杜的生信笔记&#xff0c;自2021年11月开始做的知识分享&#xff0c;主要内容是R语言绘图教程、转录组上游分析、转录组下游分析等内容。凡事在社群同学&#xff0c;可免费获得自2021年11月份至今全部教程&#xff0c;教程配备事例数据和相…...

编程日记 2024/5/14 12:56:40

Windows安装多版本MySQL

5.7 - 配置 my.ini [client] port 3307[mysql] default-character-set utf8mb4[mysqld] port 3307 server_id 1 character-set-server utf8mb4basedir "E://MySQL/mysql5.7" datadir "E://MySQL/mysql5.7/data"# 将所有表名转换为小写字母 lower_c…...

编程日记 2024/5/14 12:54:38

Redis7降级到Redis6如何AOF备份恢复（错的）

Redis7降级到Redis6如何AOF备份恢复&#xff08;错的&#xff09; 前提&#xff1a;从始至终开启AOF 介绍的Docker安装的Redis&#xff0c;不是Docker也一样&#xff0c;差不多 一、data目录差异 redis版本7 - /data/appendonlydir - appendonly.aof.manifest - appendo…...

编程日记 2024/5/14 12:53:36

通过EXCEL控制PLC启停电机的一种方法

概述 本例将介绍用微软EXCEL电子表格控制西门子S7-1200 PLC实现电机启停的一种方法。 第1步&#xff1a; 添加PLC设备&#xff0c;选择西门子S7-1214C CPU&#xff0c;设置IP地址&#xff1a;192.168.18.18&#xff0c;子网掩码&#xff1a;255.255.255.0。 第2步&#xff1a…...

编程日记 2024/5/14 12:52:35

【GPT4O 开启多模态新时代！】

系列文章目录 GPT-4o的出现&#xff0c;让 AI 真正进入了全能时代&#xff0c;而且 OpenAI 宣布所有人免费使用&#xff01; 不论你是需要写文章、听声音还是看视频&#xff0c;GPT-4o都能满足你的需求 文章目录 系列文章目录什么是GPT-4o&#xff1f;一、GPT-40 的新功能二、…...

编程日记 2024/5/14 12:51:34

HTTP协议及Python实现

最近的项目需要频繁在前后端之间传输数据&#xff0c;本篇主要介绍HTTP协议以及数据传输方法。 1 HTTP协议 1.1 http协议简介 HTTP(Hypertext Transfer Protocol)是一种用于传输超文本数据的应用层协议。它是万维网上数据交换的基础&#xff0c;定义了客户端和服务器之间进行通…...

编程日记 2024/5/14 12:50:33

【机器学习】逻辑化讲清PCA主成分分析

碎碎念&#xff1a;小编去年数学建模比赛的时候真的理解不了主成分分析中的“主成分”的概念&#xff01;&#xff01;但是&#xff0c;时隔两年&#xff0c;在机器学习领域我又行了&#xff0c;终于搞明白了&#xff01;且看正文&#xff01;再分享一个今天听到的播客中非常触…...

编程日记 2024/5/14 12:49:32

Vue常见的指令

Vue.js 提供了许多内置指令&#xff0c;这些指令可以在模板中用于处理元素的显示、行为等。以下是 Vue.js 中常见的 7 个指令及其详细代码示例&#xff1a; 1、v-bind&#xff1a;用于属性绑定&#xff0c;可以动态更新 HTML 属性。 html<template> <div> <img…...

编程日记 2024/5/14 12:47:30

【Ansible】ansible-playbook剧本

playbook 是ansible的脚本 playbook的组成 1&#xff09;Tasks&#xff1a;任务&#xff1b;通过tasks 调用ansible 的模板将多个操作组织在一个playbook中运行 2&#xff09;Variables&#xff1a;变量 3&#xff09;Templates&#xff1a;模板 4&#xff09;Handles&#xf…...

编程日记 2024/5/14 12:46:28

Linux的命令

&#xff1b; 昨天学习了七个命令&#xff0c;分别是&#xff1a;cd命令&#xff08;切换目录&#xff09;、pwd命令&#xff08;当前目录&#xff09;、mkdir命令&#xff08;创建目录&#xff09;、touch命令&#xff08;创建文件&#xff09;、date命令&#xff08;显…...

编程日记 2024/5/14 12:43:25

No known conditions for “./lib/locale/lang/zh-cn“ entry in “element-plus“ pa

yarn的安装和卸载 npm install -g yarn npm uninstall yarn -g //yarn卸载 改用yarn卸载试试 先安装yarn npm install -g yarn 卸载掉原来的element-plus yarn remove element-plus 重新安装原有的element-plus版本 yarn add element-plus2.3.1 低版本页面引用为 i…...

编程日记 2024/5/14 12:41:23

实验名称：TCP 连接管理

目录 前言 TCP报文段格式 TCP建立连接 TCP释放连接 实验目的 实验原理 实验步骤 1. 启动WireShark&#xff0c;设置抓包状态 2. 访问指定服务器 &#xff0c;通过Wireshark抓取通信数据报文 3. 分析TCP连接建立的三次握手和连接释放的四次握手过程 原始数据记录 实验…...

编程日记 2024/5/14 12:36:16

go语言map底层及扩容机制原理详解(上)

底层数据结构-哈希表 go语言map的底层数据结构是哈希表&#xff1a;通过哈希表来存储键值对&#xff0c;通过hash函数把键值对散列到一个个桶(bucket)中。 什么是哈希表&#xff1f; 在顺序结构以及平衡树中&#xff0c;元素与其的存储位置之间没有对应关系&#xff0c;因此…...

编程日记 2024/5/14 12:35:14

互联网职场说 | “领导找我谈话，原来是给我涨薪，但却只涨了200，还偷偷叮嘱我保密，这次只给我涨了薪”

职场中&#xff0c;一般当领导找你谈话时&#xff0c;心里总是会涌起两种心理活动&#xff1a;问责和表扬。不过很多人第一反应就是有点担心害怕&#xff0c;其次才会想有什么好事临到我了&#xff01; 一位职场网友分享说&#xff0c;有天领导忽然找她谈话&#xff0c;当时心…...

编程日记 2024/5/14 12:33:12

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/11/12 20:03:10

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/11/13 6:08:40

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/10/8 5:48:25

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/11/10 19:39:24

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/11/12 6:43:43

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/11/12 13:16:29

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/11/12 8:25:09