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

JavaScript 基础 - 对象

news 2025/9/19 18:10:34

对象

对象是一种无序的数据集合，可以详细的描述描述某个事物。 注意数组是有序的数据集合。它由属性和方法两部分构成。

语法

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

  <script>let 对象名 = {属性名：属性值，方法名：函数}</script>
属性

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

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

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

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

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

let person = {name: '小明', age: 18
}

查

语法： 对象名.属性   对象[‘属性’] ， 单引号和双引号都可 
<script>let person = {name: '小明', age: 18, stature: 185,gender: '男', };// 访问人的名字console.log(person.name) console.log(person['name']) </script>

增

语法： 对象名.新属性 = 新值 
 <script>// 声明一个空的对象（没有任何属性）let user = {}// 动态追加属性user.name = '小明'user['age'] = 18// 动态添加与直接定义是一样的，只是语法上更灵活</script>

改

语法：对象名.属性 = 新值 

 <script>let user = {name:'小红'
}// 动态追加属性user.name = '小明'</script>

改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改 

删（了解）

 语法：delete 对象名.属性

方法和调用

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

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

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

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

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

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

 <script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,singing: function () {console.log('两只老虎，两只老虎，跑的快，跑的快...')},run: function () {console.log('我跑的非常快...')}}// 调用对象中 singing 方法person.singing()// 调用对象中的 run 方法person.run()
​</script>

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

 <script>// 声明一个空的对象（没有任何属性，也没有任何方法）let user = {}// 动态追加属性user.name = '小明'user.['age'] = 18// 动态添加方法user.move = function () {console.log('移动一点距离...')}</script>

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

null

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

遍历对象
目标：能够遍历输出对象里面的元素
for 遍历对象的问题：
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标 
let obj = {uname: 'pink'
}
for(let k in obj) {// k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'// obj[k]  属性值    obj['uname']   obj[k]
}

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

k 是获得对象的 属性名 ， 对象名[k] 是获得 属性值

内置对象

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。提供了一系列做数学运算的方法。

属性

  • Math.PI，获取圆周率

// 圆周率
console.log(Math.PI);
方法

  • Math.random，生成 0 到 1 间的随机数  [ 0,1)

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

    生成0-10之间的随机数

Math.floor(Math.random() * (10 + 1))

 

     生成N-M之间的随机数

Math.floor(Math.random() * (M - N + 1)) + N

 

  • 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)

数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。

随机颜色案例

<body><script>function getRandomColor(flag = true) {//该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式if (flag) {let str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']for (let i = 1; i <= 6; i++) {let random = Math.floor(Math.random() * arr.length)str += arr[random]}return str//如果参数为true或者无参数，则处理16进制颜色，核心思想是循环6次，生成随机的6个数字（取 值范围0~15），根据这个数字去找数组的值，然后和 # 拼接起来，并且返回值。} else {let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)return `rgb(${r},${g},${b})`//如果参数为false，随机生成一个0~255的数给三个变量，分别作为 r g b 三个颜色，之后拼接字 符串rgb(255,255,255)格式}}console.log(getRandomColor(true))console.log(getRandomColor(false))console.log(getRandomColor())</script>
</body>

 

相关文章：

JavaScript 基础 - 对象

对象 对象是一种无序的数据集合&#xff0c;可以详细的描述描述某个事物。 注意数组是有序的数据集合。它由属性和方法两部分构成。 语法 声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。 <script>let 对象名 {属性名&#xff1a;属性值…...

编程日记 2024/6/4 4:14:08

代码随想录第23天|回溯part3 组合与分割

39.组合总和 class Solution { public:vector<vector<int>> res;vector<int> path;void backTracking(vector<int>& candidates,int target,int sum,int n,int step){if(n > 150) return;if(sum > target) return;if(sum target){res.push_…...

编程日记 2024/6/4 4:13:06

nginx和proxy_protocol协议

目录 1. 引言2. HTTP server的配置3. Stream server的配置3.1 作为proxy_protocol的前端服务器3.2 作为proxy_protocol的后端服务器1. 引言 proxy_protocol 是haproxy开发的一种用于在代理服务器和后端服务器之间传递客户端连接信息的协议。使用 proxy_protocol 的主要优势是能…...

编程日记 2024/6/4 4:12:04

【pytorch】数据转换/增强后保存

数据转换 from PIL import Image from pathlib import Path import matplotlib.pyplot as plt import numpy as npimport torch import torchvision.transforms as Tplt.rcParams["savefig.bbox"] = tight # orig_im...

编程日记 2024/6/4 4:09:00

超越Devin！姚班带队，他们创大模型编程新世界纪录

超越Devin&#xff01;SWEBench排行榜上迎来了新玩家—— StarShip CodeGen Agent&#xff0c;姚班带队初创公司OpenCSG出品&#xff0c;以23.67%的成绩获得全球第二名的成绩。 同时创造了非GPT-4o基模的最高纪录&#xff08;SOTA&#xff09;。 我们都知道&#xff0c;SWEBe…...

编程日记 2024/6/4 4:06:57

江苏大信环境科技有限公司：环保领域的开拓者与引领者

2009 年&#xff0c;江苏大信环境科技有限公司在宜兴环保科技工业园成立。自创立之始&#xff0c;该公司便笃定坚守“诚信为本、以质量求生存、以创新谋发展”这一经营理念&#xff0c;全力以赴为客户构建专业的工业有机废气治理整体解决方案&#xff0c;进而成为国家高新技术企…...

编程日记 2024/6/4 4:05:56

关于 Bean 容器的注入方式，99 % 的人都答不全！

引言&#xff1a;在使用 Spring 框架开发应用程序时&#xff0c;依赖注入是一个至关重要的概念。而对于 Bean 容器的注入方式&#xff0c;虽然我们可能都有一定的了解&#xff0c;但实际上很多人在被问及这个问题时可能并不能完整地回答。本文将深入探讨 Spring 中 Bean 容器的…...

编程日记 2024/6/4 4:03:54

Spring的@Async注解及其用途

Spring 的 Async 注解是 Spring Framework 4.2 版本引入的功能&#xff0c;它用于支持异步方法执行。当一个方法标注了 Async&#xff0c;Spring 会在一个单独的线程中调用该方法&#xff0c;从而不会阻塞主线程的执行。 Async 注解的用途&#xff1a; 提高性能&#xff1a;通…...

编程日记 2024/6/4 4:02:53

JS（DOM、事件）

DOM 概念:Document Object Model&#xff0c;文档对象模型。将标记语言的各个组成部分封装为对应的对象: Document:整个文档对象Element:元素对象Attribute:属性对象Text:文本对象Comment:注释对象 JavaScript通过DOM&#xff0c;就能够对HTML进行操作: 改变 HTML 元素的内…...

编程日记 2024/6/4 4:01:52

学习小心意——python的构造方法和析构方法

构造方法和析构方法分别用于初始化对象的属性和释放类占有的资源 构造方法_init_() 语法格式如下&#xff1a; class 类名:def __init__(self, 参数1, 参数2, ...):# 初始化代码self.属性1 参数1self.属性2 参数2# ... 示例代码如下 class Student:def __init__(self):s…...

编程日记 2024/6/4 4:00:51

GB/T 23995-2009 室内装饰装修用溶剂型醇酸木器涂料检测

溶剂型醇酸木器涂料是指以醇酸树脂为主要成膜物&#xff0c;通过氧化干燥成膜的溶剂型木器涂料适用于室内木制品表面的保护及装饰。 GB/T 23995-2009室内装饰装修用溶剂型醇酸木器涂料检测项目&#xff1a; 测试指标 测试方法 在容器中状态 GB/T 23995 细度 GB/T 6753.1 …...

编程日记 2024/6/4 3:59:50

Maven 中的 classifier 属性用过没？

最近训练营有小伙伴问到松哥一个关于 Maven 依赖的问题&#xff0c;涉及到 classifier 属性&#xff0c;随机问了几个小伙伴&#xff0c;都说工作中没用到过&#xff0c;因此简单整篇文章和小伙伴们分享下。 Maven 大家日常开发应该都有使用&#xff0c;Maven 中有一个比较好玩…...

编程日记 2024/6/4 3:55:46

Linux网络编程：传输层协议|UDP|TCP

知识引入&#xff1a; 端口号&#xff1a; 当应用层获得一个传输过来的报文时&#xff0c;这时数据包需要知道&#xff0c;自己应该送往哪一个应用层的服务&#xff0c;这时就引入了“端口号”&#xff0c;通过区分同一台主机不同应用程序的端口号&#xff0c;来保证数据传输…...

编程日记 2024/6/4 3:53:44

MongoDB CRUD操作：内嵌文档查询

MongoDB内嵌文档的查询 文章目录 MongoDB内嵌文档的查询使用点号.查询内嵌文档嵌套字段的相等匹配使用查询操作符进行匹配指定AND条件 嵌套文档的匹配使用 MongoDB Atlas 查询内嵌文档导航至集合指定查询过滤文档点击应用 可以使用下面几种方法查询MongoDB中的嵌入文档&#xf…...

编程日记 2024/6/4 3:52:44

JavaScript、Kotlin、Flutter可以开发鸿蒙APP吗？

自从去年华为宣布推出「鸿蒙Next」版本开始&#xff0c;标志着其操作系统的全面革新。鸿蒙Next将摒弃所有基于AOSP的代码&#xff0c;与Android系统彻底分离&#xff0c;实现完全自主的研发路径。通过精简约40%的冗余代码&#xff0c;鸿蒙Next致力于构建一个更高效、更流畅的系…...

编程日记 2024/6/4 3:51:42

刚体运动描述：欧拉角与四元数

在机器人学中&#xff0c;刚体的运动描述是非常重要的&#xff0c;特别是当我们需要精确控制机器人的姿态时。欧拉角和四元数是两种常用的描述刚体在三维空间中旋转的方法。下面将分别介绍这两种方法并给出其特点。 欧拉角 定义与特点&#xff1a; 定义&#xff1a;欧拉角是…...

编程日记 2024/6/4 3:49:40

一文速通23种设计模式——单例模式、工厂模式、建造者模式、原型模式、代理模式、装饰器模式、组合模式、组合模式、桥接模式、观察者模式、策略模式……

一文速通23种设计模式 写在前面 本文基于结城浩所著《图解设计模式》&#xff0c;其中所使用代码皆为Java版本。 随书代码下载地址-点击“随书下载” 全文15205字&#xff0c;全部读完需要约20分钟。 目录 一文速通23种设计模式写在前面 第一部分 适应设计模式迭代器模式 (…...

编程日记 2024/6/4 3:48:39

Lua 基础 04 模块

Lua 基础相关知识 第四期 require 模块&#xff0c;通常是一个表&#xff0c;表里存储了一些字段和函数&#xff0c;单独写在一个 lua 文件。 例如&#xff0c;这是一个 tools.lua 文件&#xff0c;定义了一个局部 tools 表&#xff0c;包含一个 log 函数&#xff0c;可以传…...

编程日记 2024/6/4 3:47:38

速递FineWeb：一个拥有无限潜力的15T Tokens的开源数据集

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提…...

编程日记 2024/6/4 3:46:37

HDLBits答案汇总

一.Getting Started Getting started-CSDN博客 二.Verilog Basics-CSDN博客 Vectors-CSDN博客 Module Hierarchy-CSDN博客 Procedures-CSDN博客 More Verilog Features-CSDN博客 三.Circuits Combinational Basic-CSDN博客 Multiplexers-CSDN博客 Arithmetic-CSDN博客 Karnau…...

编程日记 2024/6/4 3:45:35

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/9/18 0:10:03

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/9/18 17:17:43

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/9/19 2:07:13

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/9/15 23:48:19

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/8/25 16:43:44

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/9/13 8:23:57

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/2 18:15:10