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

JavaScript 基础 - 对象

news 2025/12/27 17:11:08

对象

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

语法

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

  <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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程目录 Web 项目 Docker 化部署概述Dockerfile 详解构建阶段生产阶段构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）&#xff1a…...

编程新知 2025/8/12 16:28:43

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/12/25 2:41:33

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/12/27 4:45:59