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

JavaScript 基础 - 对象

news 2025/11/9 5:31:46

对象

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

语法

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

  <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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/11/7 9:56:44

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/11/7 14:07:42

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/10/27 2:28:51

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/11/7 21:08:33

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/9/18 15:40:29

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/8 7:49:49

OpenLayers 分屏对比(地图联动)

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

编程新知 2025/9/30 5:23:30

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/11/7 21:05:19

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/11/8 2:28:34