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

JavaScript 基础 - 对象

news 2026/4/6 2:41:45

对象

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

语法

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

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

属性

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

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

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 对象名.属性

方法和调用

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

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

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

 <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 基础 - 对象

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

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

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！SWEBench排行榜上迎来了新玩家—— StarShip CodeGen Agent，姚班带队初创公司OpenCSG出品，以23.67%的成绩获得全球第二名的成绩。同时创造了非GPT-4o基模的最高纪录（SOTA）。我们都知道，SWEBe…...

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

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

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

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

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

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

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

Spring的@Async注解及其用途

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

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

JS（DOM、事件）

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

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

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

构造方法和析构方法分别用于初始化对象的属性和释放类占有的资源构造方法_init_() 语法格式如下： 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 室内装饰装修用溶剂型醇酸木器涂料检测

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

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

Maven 中的 classifier 属性用过没？

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

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

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

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

编程日记 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」版本开始，标志着其操作系统的全面革新。鸿蒙Next将摒弃所有基于AOSP的代码，与Android系统彻底分离，实现完全自主的研发路径。通过精简约40%的冗余代码，鸿蒙Next致力于构建一个更高效、更流畅的系…...

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

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

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

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

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

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

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

Lua 基础 04 模块

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

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

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

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

编程日记 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

Leaflet 结合 leaflet-velocity 实现动态风场可视化的实战指南

1. 从零开始搭建风场可视化环境第一次接触风场可视化时，我被那些动态流动的粒子效果深深吸引。作为Web地图开发中最酷炫的效果之一，用Leaflet实现风场展示其实比你想象的简单得多。我们先从最基础的环境搭建说起。我推荐使用VSCode作为开发工具&#x…...

编程新知 2026/4/6 1:56:08

实战指南，基于快马平台快速构建用于工业质检的yolo缺陷检测系统

今天想和大家分享一个很实用的工业质检项目实战经验——基于YOLO模型快速搭建零件缺陷检测系统。这个项目特别适合需要快速验证算法效果的场景，我在InsCode(快马)平台上只用半天就完成了从原型到部署的全流程。项目背景与需求分析工业质检对精度和实时性要求很高&…...

编程新知 2026/4/6 1:52:03

【面板数据】地级市及区县人口空心化数据（2000-2024年）

人口空心化是指在城镇化和人口迁移过程中，区域青壮年劳动力及常住人口持续外流，导致人口规模收缩、人口老龄化加深、人口空间集聚能力下降和社会经济活力减弱的现象参照陈义勇等（2025）文中关于人口空心化指标的衡量方式&#xf…...

编程新知 2026/4/6 1:29:47

002、零基础搭建你的第一个AI开发环境

昨天帮隔壁组实习生看代码，小伙子对着屏幕发愁：“环境都跑不起来，一训练就报cuda版本不匹配。”我凑过去一看，好家伙，系统里装了三个Python版本，conda环境混着pip装，torch版本和cuda差了两位小数…...

编程新知 2026/4/6 1:01:32

[具身智能-231]：OpenCV的库文件为啥是cv2, 而不是cv？

这是一个非常经典的问题！很多初学者在写代码时都会感到困惑：明明安装的是 opencv-python，为什么导入时却要写 import cv2？而且这个 "2" 到底代表 OpenCV 2 还是 OpenCV 3/4？简单直接的回答是：cv2…...

编程新知 2026/4/6 0:20:51

打造行业大模型更好还是做垂直 Agent 更好

打造行业大模型更好还是做垂直 Agent 更好？从小学生的糖果王国管理谈起，拆解AI落地的终极选择题关键词：行业大模型、垂直 Agent、AI落地、通用 vs 垂直、能力边界、ROI模型、端云协同、大模型Agent架构摘要：这篇文章从「小学生管理…...

编程新知 2026/4/5 23:33:56

四场景下的两阶段鲁棒优化模型构建与实施——列与约束生成算法及其数据处理机制探究

两阶段鲁棒优化模型多场景采用matlab编程两阶段鲁棒优化程序，考虑四个场景，模型采用列与约束生成（CCG）算法进行求解，场景分布的概率置信区间由 1-范数和∞-范数约束，程序含拉丁超立方抽样kmeans数据处理程…...

编程新知 2026/4/5 23:15:33

MTKClient技术内幕：从硬件交互到场景落地的深度探索

MTKClient技术内幕：从硬件交互到场景落地的深度探索【免费下载链接】mtkclient MTK reverse engineering and flash tool 项目地址: https://gitcode.com/gh_mirrors/mt/mtkclient 一、技术原理解析：MTKClient如何与硬件对话 MTKClient的核心能…...

编程新知 2026/4/5 22:47:08

2025最权威的五大AI辅助论文方案实测分析

Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 于借助人工智能去生成文本之际，原始输出常常带有显著的模式化印迹。为达成“降AI…...

编程新知 2026/4/5 22:05:55

计算机毕业设计：Python地铁运营数据多维分析与智能管理平台 Django框架数据分析可视化大数据机器学习深度学习（建议收藏）✅

博主介绍：✌全网粉丝10W，前互联网大厂软件研发、集结硕博英豪成立软件开发工作室，专注于计算机相关专业项目实战6年之久，累计开发项目作品上万套。凭借丰富的经验与专业实力，已帮助成千上万的学生顺利毕业，…...

编程新知 2026/4/5 21:33:22

对象

语法

属性

查

增

改