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

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

news 2025/6/22 21:00:12

 

目录

对象

语法

属性和访问

方法和调用

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

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/6/20 16:01:39

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/6/15 15:47:35

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/6/12 14:37:21

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/6/21 8:18:07

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/6/20 12:24:55

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/6/21 12:01:48

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2025/6/21 16:40:01

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/6/22 12:22:35